A calendar allows users to select any date or time



A standard calendar

$('#standard_calendar') .calendar() ;


A range calendar allow you to select a start date and a stop date

$('#rangestart').calendar({ type: 'date', endCalendar: $('#rangeend') }); $('#rangeend').calendar({ type: 'date', startCalendar: $('#rangestart') });

Inline calendar

An inline calendar isn't shown in a popup

$('#inline_calendar') .calendar() ;



A disabled calendar does not allow user interaction


Date calendar

A date calendar disable the time selection

$('#date_calendar') .calendar({ type: 'date' }) ;

Time calendar

A time calendar disable the date selection

$('#time_calendar') .calendar({ type: 'time' }) ;

You can also set the type or date using HTML markup New in 2.8.0

This could be useful when used with form validation without the need to instantiate the calendar via javascript before. Form validation recognizes a calendar component within the form and instantiates it automatically by using existing metadata values.

Year first calendar

A year first calendar allow you to select a date by starting to select a year

$('#year_first_calendar') .calendar({ startMode: 'year' }) ;

24 hour format

You can get rid of the AM/PM stuff

$('#no_ampm') .calendar({ type: 'time', ampm: false }) ;

Month and year calendar

A month and year calendar disable the date and time selection

$('#month_year_calendar') .calendar({ type: 'month' }) ;

Year calendar

A year calendar allow you to select a year only

$('#year_calendar') .calendar({ type: 'year' }) ;

Min/max date

You can set a minimum and a maximum selection date

var today = new Date(); $('#minmax_calendar') .calendar({ minDate: new Date(today.getFullYear(), today.getMonth(), today.getDate() - 5), maxDate: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 5) }) ;

You can also set a minimum and a maximum selection date using HTML markup

Day first calendar

You can chose to use a day first display calendar (parsing and conversion are impacted too)

$('#day_first_calendar') .calendar({ type: 'date', monthFirst: false }) ;

Custom format

You can entirely change the date format

$('#custom_format_calendar') .calendar({ monthFirst: false, type: 'date', formatter: { date: function (date, settings) { if (!date) return ''; var day = date.getDate(); var month = date.getMonth() + 1; var year = date.getFullYear(); return day + '/' + month + '/' + year; } } }) ;

Century Calculation for shortyears

When a 2-digit shortyear is entered, you can adjust how to calculate the belonging century

Example 1:
Shortyears 00-99 -> 2000-2099
$('#shortyear_example1') .calendar({ type: 'date', centuryBreak: 100 }) ;
Example 2:
Shortyears 00-99 -> 1900-1999
$('#shortyear_example2') .calendar({ type: 'date', centuryBreak: 0 }) ;
Example 3:
Shortyears 00-59 -> 3000-3059
Shortyears 60-99 -> 2900-2959
$('#shortyear_example3') .calendar({ type: 'date', currentCentury: 3000 }) ;
Example 4:
Shortyears 00-39 -> 1800-1839
Shortyears 40-99 -> 1740-1799
$('#shortyear_example4') .calendar({ type: 'date', currentCentury: 1800, centuryBreak: 40 }) ;

Select adjacent days

It's possible to also select adjacent days of the previous and next month in the current month view instead of being disabled

$('#adjacentdays_calendar') .calendar({ selectAdjacentDays: true, type: 'date' }) ;


It's possible to change the calendar language to fit with your needs

$('#french_calendar') .calendar({ text: { days: ['D', 'L', 'M', 'M', 'J', 'V', 'S'], months: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Decembre'], monthsShort: ['Jan', 'Fev', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil', 'Aou', 'Sep', 'Oct', 'Nov', 'Dec'], today: 'Aujourd\'hui', now: 'Maintenant', am: 'AM', pm: 'PM' } }) ;



A calendar can be coupled to a button

Select date
$('#button_calendar') .calendar() ;

Disabling specific Days

Days of Week

Disable each Monday, Wednesday and Friday from selection

$('#disableddaysofweek_calendar') .calendar({ disabledDaysOfWeek: [1,3,5] }) ;

Single Dates

Disabling specific single dates which can optionally display a reason in popup on hover

$('#disableddates_calendar') .calendar({ initialDate: new Date(2018,11,1), disabledDates: [{ date: new Date(2018,11,22), message: 'xmas gift shopping' }, { date: new Date(2018,11,25), message: 'Santa Clause is coming to town' }, new Date(2018,11,31) /* No Reason. Everybody knows why ;) */ ] }) ;

Enable only specific Dates

Disable all dates by default and only enable specific given dates.

$('#enableddates_calendar') .calendar({ type: 'date', initialDate: new Date(2019,2,1), enabledDates: [ new Date(2018,2,5), new Date(2018,2,10), new Date(2018,2,20) ] }) ;

Highlighting specific Days

Event Dates

Mark specific days as events, giving them a different cell style and a tooltip message

$('#eventdates_calendar').calendar({ initialDate: new Date(2019,3,1), eventDates: [ { date: new Date(2019,3,21), message: 'Show me in light purple', class: 'inverted purple' },{ date: new Date(2019,3,22), message: 'Show me in green', class: 'green' } ] });
$('#eventdates2_calendar').calendar({ initialDate: new Date(2019,3,1), eventClass: 'inverted red', eventDates: [ new Date(2019,3,20), //no message tooltip { date: new Date(2019,3,21), message: 'I got the default color (light red)' },{ date: new Date(2019,3,22), message: 'Me too' } ] });


Initializing a calendar

Calendar is initialized on pre-existing markup

$('.ui.calendar') .calendar() ;


All the following behaviors can be called using the syntax:

$('.ui.calendar').calendar('behavior', argumentOne, argumentTwo...);
refresh Refresh the calendar
popup(arguments) Call the popup module (e.g. passing show will show the calendar popup)
focus Focus the calendar input
blur Blur the calendar input
clear Clear the selected date
get date Get the selected date
set date(date, updateInput = true, fireChange = true) Set the selected date. Pass false to updateInput to disable updating the input. Pass false to fireChange to disable the onBeforeChange and onChange callbacks for this change
get mode Get the current selection mode (year, month, day, hour, minute)
set mode(mode) Set the current selection mode (year, month, day, hour, minute)
get startDate Get the start date for range selection
set startDate(date) Set the start date for range selection
get endDate Get the end date for range selection
set endDate(date) Set the end date for range selection
get focusDate Get the currently focused date
set focusDate(date) Set the currently focused date
set minDate(date) Set the minimal selectable date
set maxDate(date) Set the maximal selectable date



Setting Default Description
type datetime Picker type, can be datetime, date, time, month, or year
firstDayOfWeek 0 Day for first day column (0 = Sunday)
constantHeight true Add row(s) to shorter months to keep day calendar height consistent (6 rows)
today false Show a 'today/now' button at the bottom of the calendar
closable true Close the popup after selecting a date/time
monthFirst true Month before day when parsing/converting date from/to text
touchReadonly true Set input to readonly on touch devices
inline false Create the calendar inline instead of inside a popup
showWeekNumbers false Display the week number on the left
disabledDaysOfWeek [] Disable some days of the week from selection (0= Sunday, 1=Monday, ...)
disabledDates [] An array of Date-Objects or Objects with given message to show in a popup when hovering over the appropriate date {date: Date, message: string}
enabledDates [] An array of Date-Objects to be enabled for selection. All other dates are disabled
eventDates [] An array of Date-Objects or Objects with given message to show in a popup when hovering over the appropriate date and an individual class for the cell {date: Date, message: string, class: string}
eventClass blue Default class to be added to each cell of an eventDate date element when no specific class is given to the eventDate element
on null Choose when to show the popup (defaults to focus for input, click for others)
initialDate null Date to display initially when no date is selected (null = now)
startMode false Display mode to start in, can be year, month, day, hour, minute (false = 'day')
minDate null Minimum date/time that can be selected, dates/times before are disabled
maxDate null Maximum date/time that can be selected, dates/times after are disabled
ampm true Show am/pm in time mode
disableYear false Disable year selection mode
disableMonth false Disable month selection mode
disableMinute false Disable minute selection mode
formatInput true Format the input text upon input blur and module creation
startCalendar null jQuery object or selector for another calendar that represents the start date of a date range
endCalendar null jQuery object or selector for another calendar that represents the end date of a date range
multiMonth 1 Show multiple months when in day' mode
minTimeGap 5 Minimum time gap, can only be 5, 10, 15, 20, 30
centuryBreak 60 Starting short year until 99 where it will be assumed to belong to the last century
currentCentury 2000 century to be added to 2-digit years (00 to centuryBreak-1)
selectAdjacentDays false Make adjacent days from previous and next month also selectable
popupOptions: { position: 'bottom left', lastResort: 'bottom left', prefer: 'opposite', hideOnScroll: false }
text: { days: ['S', 'M', 'T', 'W', 'T', 'F', 'S'], months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], today: 'Today', now: 'Now', am: 'AM', pm: 'PM' }


Callback Context Description
onBeforeChange New in 2.8.0 active content Is called before a calendar date changes. return false; will cancel the change
onChange active content Is called after a calendar date has changed.
onShow active content Is called before a calendar is shown. return false; will prevent the calendar to be shown
onVisible active content Is called when the calendar is shown
onHide active content Is called before a calendar is hidden. return false; will prevent the calendar to be hidden
onHidden active content Is called when the calendar is hidden
onSelect(date,mode) active content Is called when a cell of the calendar is selected providing its value and current mode. return false; will prevent the selection

DOM Settings
DOM settings specify how this module should interface with the DOM

Setting Default Description
name Calendar Name used in log statements
namespace calendar Event namespace. Makes sure module teardown does not effect other events attached to an element.
selector : { popup: '.ui.popup', input: 'input', activator: 'input', append: '.inline.field,.inline.fields' }
If the calendars parent node matches the append selector, the calendar is appended to the input field instead of prepended.
className : { calendar: 'calendar', active: 'active', popup: 'ui popup', grid: 'ui equal width grid', column: 'column', table: 'ui celled center aligned unstackable table', prev: 'prev link', next: 'next link', prevIcon: 'chevron left icon', nextIcon: 'chevron right icon', link: 'link', cell: 'link', disabledCell: 'disabled', weekCell: 'disabled', adjacentCell: 'adjacent', activeCell: 'active', rangeCell: 'range', focusCell: 'focus', todayCell: 'today', today: 'today link' }
regExp : { dateWords: /[^A-Za-z\u00C0-\u024F]+/g, dateNumbers: /[^\d:]+/g }
metadata : { date: 'date', focusDate: 'focusDate', startDate: 'startDate', endDate: 'endDate', mode: 'mode', monthOffset: 'monthOffset' }
silent False Silences all console output including error messages, regardless of other debug settings.
debug false Debug output to console
performance true Show console.table output with performance metrics
verbose false Debug output includes all internal behaviors
error : { popup: 'UI Popup, a required component is not included in this page', method: 'The method you called is not defined.' }

Dimmer Message
Dimmer sub-header