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
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
$('#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 |
$('#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
$('#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 |
// 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.'
}
|
|