Menu

Calendar
A calendar allows users to select any date ot time

Download

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

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

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

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

Coupling

Button

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 ;) */ ] }) ;

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 onChange callback 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

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}
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 Fisable 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
popupOptions
popupOptions: { position: 'bottom left', lastResort: 'bottom left', prefer: 'opposite', hideOnScroll: false }
text
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' }

Callbacks

Callback Context Description
onChange active content Is called after a calendar date changes. return false; will cancel the change
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

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' }
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', 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