Menu

Calendar
A calendar allows users to select any date or time

Types

Calendar

A standard calendar

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

Range

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() ;

Variations

Size

A calendar can have different sizes



Inverted

A calendar can have its colors inverted

Multimonth

You can display multiple months. Use monthOffset, to adjust the the startmonth relative to the selected date

$('#multimonth_calendar') .calendar({ type: 'date', multiMonth: 3, monthOffset: -1 // current month will be shown in the middle of 3 months }) ;

States

Disabled

A disabled calendar does not allow user interaction

Examples

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

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 notation by adjusting the format-token

For details about the token string format see Custom Format
$('#no_ampm') .calendar({ type: 'time', formatter: { time: 'H:mm', cellTime: 'H:mm' } }) ;

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 by using a token string formatter.

Tokens are placeholder characters for a specific output format. Fomantic-UI supports the following tokens:

Description Token Resultset
Day of Week d 0-6
Day of Week (2 char text) dd Su - Sa
Day of Week (3 char text) ddd Sun - Sat
Day of Week (Full text) dddd Sunday - Saturday
Day of Month D 1 to 31
Day of Month (Leading zero) DD 01-31
Day suffix S st,nd,rd,th
Month M 1 to 12
Month (Leading zero) MM 01-12
Month (3 char text) MMM Jan-Dec
Month (Full text) MMMM January-December
Year YYYY or Y 2022
Year (2 Digits) YY 22
Week w 1-53
Week (Leading zero) ww 01-53
Hour (12h Format) h 1-12
Hour (12h Format, Leading zero) hh 01-12
Hour (24h Format) H 0-23
Hour (24h Format, Leading zero) HH 00-23
Minute m 0-59
Minute (Leading zero) mm 00-59
Second s 0-59
Second (Leading zero) ss 00-59
AM/PM A AM-PM
AM/PM (lowercase) a am-pm
Custom Text Wrap in double or single quotes Your text without quotes

If you previously used the ampm setting in FUI < 2.9.0, you will need to update your code to (not) use the A or a token for date/datetime/time/cellTime formatter instead.

For quicker migration you could globally override the format settings like this:

$.fn.calendar.settings.formatter.datetime = 'MMMM D, YYYY H:mm'; $.fn.calendar.settings.formatter.time = 'H:mm'; $.fn.calendar.settings.formatter.cellTime = 'H:mm';

$('#token_format_calendar') .calendar({ type: 'date', formatter: { date: '"approx:"YYYY-MM-DD' } }) ;

You can also provide a custom function to return anything you want

$('#custom_format_calendar') .calendar({ type: 'date', formatter: { date: function (date, settings) { if (!date) return ''; // Show the selected year 85 Years ahead return 'Expires in ' + (date.getFullYear() + 85); } } }) ;

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' }) ;

Language

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'], dayNamesShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'], dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'], 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', weekNo: 'Semaine' } }) ;

Coupling

Button

A calendar can be coupled to a button

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

Context

A calendar popup inside an overflowing container does not allow the calendar popup to be shown completely, because it's still placed inside the same overflowing container of the triggering element by default. To solve this, you can now use the context setting and provide a (non-overflowing) parent element to move the calendar popup outside of the overflowing container and display the calendar popup properly.
The following example places the calendar input inside a overflowing scrolling segment. By defining the context to body the calendar popup is rendered as direct child of body, thus displays the calendar popup properly overlaying the otherwise restricted segment.

Some text ...
Some text ...
Some text ...
Some text ...
Some text ...
Some text ...
Some text ...
Some text ...
Some text ...

$('#context_calendar') .calendar({ context: 'body' }) ;

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-12-01'), disabledDates: [{ date: new Date('2018-12-22'), message: 'xmas gift shopping' }, { date: new Date('2018-12-25'), message: 'Santa Clause is coming to town', inverted: true, variation: 'basic' }, new Date('2018-12-31') /* No Reason. Everybody knows why ;) */ ] }) ;

Hours

Disabling specific hours of specific days which can optionally display a reason in popup on hover

$('#disabledhours_calendar') .calendar({ initialDate: new Date('2021-07-01'), formatter: { datetime: 'MMMM D, YYYY H:mm', time: 'H:mm', cellTime: 'H:mm' }, disabledHours: [ 0, // Midnight will always be disabled { // Every Saturday and Sunday will be entirely disabled days: [0, 6], hours: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23], message: 'We dont work on Saturday and Sunday', inverted: true, variation: 'basic' }, { // Friday afternoon will be disabled date: new Date('2021-07-02'), hours: [12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23], message: 'Sorry this afternoon we are closed !', inverted: true }, { // All hours between 1 and 7 will be disabled every day hours: [1, 2, 3, 4, 5, 6, 7], message: 'We are sleeping !' }, { // 12:00 and 13:00 will be disabled every day hours: [12, 13], message: 'Lunch time !' } ] }) ;

Whole Months

It's possible to disable all days of specific months

$('#disabledmonth_calendar') .calendar({ type: 'date', initialDate: new Date('2020-12-01'), disabledDates: [{ month: 11, //Javascript months start from 0 (!) message: 'All days in December are booked out' }, { month: [0,1], //Javascript months start from 0 (!) message: 'No booking in January or February' } ] }) ;

Whole Years

It's possible to disable all days of a whole year

$('#disabledyear_calendar') .calendar({ type: 'date', initialDate: new Date('2020-12-01'), disabledDates: [{ year: 2020, message: '2020 is not available' }, { year: [2022,2023], message: 'Years 2022 and 2023 are not available' } ] }) ;

Enable only specific Dates

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

$('#enableddates_calendar') .calendar({ type: 'date', initialDate: new Date('2019-03-01'), enabledDates: [ new Date('2019-03-05'), new Date('2019-03-10'), new Date('2019-03-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-04-01'), eventDates: [ { date: new Date('2019-04-21'), message: 'Show me in light purple', class: 'inverted purple', // cellclass variation: 'purple' // tooltip variation },{ date: new Date('2019-04-22'), message: 'Show me in green', class: 'green', variation: 'green' } ] });
$('#eventdates2_calendar').calendar({ initialDate: new Date('2019-04-01'), eventClass: 'inverted red', eventDates: [ new Date('2019-04-20'), //no message tooltip { date: new Date('2019-04-21'), message: 'I got the default color (light red)' },{ date: new Date('2019-04-22'), message: 'Me too' } ] });

Initializing

Initializing a calendar

Calendar is initialized on pre-existing markup

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

Behaviors

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
destroy Destroys instance and removes all events

Calendar

Behavior

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}
disabledHours [] An array of integer values from 0-23 or Objects with given message to show in a popup when hovering over the appropriate date {days: intArray, hours: intArray, 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 click)
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
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
monthOffset 0 Position current month by offset when multimonth > 1
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
popupOptions: { position: 'bottom left', lastResort: 'bottom left', prefer: 'opposite', hideOnScroll: false }
text
text: { days: ['S', 'M', 'T', 'W', 'T', 'F', 'S'], dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'], 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' }
formatter
For details about the below mentioned token string format see Custom Format
// Different customizable methods to format a certain part of the date or popup text output formatter: { // do whatever you like to the given cell // cellOptions is an object containing values for {mode,adjacent,disabled,active,today} cell: function (cell, date, cellOptions) {} // Every other method can either be a token string // or a function(date,settings) which has to return a string cellTime: 'h:mm A', date: 'MMMM D, YYYY', datetime: 'MMMM D, YYYY h:mm A', dayColumnHeader: function (day, settings) {}, dayHeader: 'MMMM YYYY', hourHeader: 'MMMM D, YYYY', minuteHeader: 'MMMM D, YYYY', month: 'MMMM YYYY', monthHeader: 'YYYY', time: 'h:mm A', today: function (settings) {}, year: 'YYYY', yearHeader: function (date, settings) {}, }
parser
// Customizable methods to parse a given date // Has to return a date object parser: { date: function (text, settings) {} }
context false DOM selector where the calendar popup should be attached to. By default (false) the calendar popoup is attached as direct child of the triggering element

Callbacks

Callback Context Description
onBeforeChange(date, text, mode) active content Is called before a calendar date changes. return false; will cancel the change
onChange(date, text, mode) 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
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
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
regExp : { dateWords: /[^A-Za-z\u00C0-\u024F]+/g, dateNumbers: /[^\d:]+/g }
metadata
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
errors
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