Events & Hooks


flatpickr features event hooks for the most common and useful actions. For each hook, you may specify a single function, or an array of functions.

After instantiation, all hooks can be accessed via the instance’s config object. Inside the object, all functions are stored in arrays, so you would need to manipulate the array itself to add or remove functions:

Example: instance.config.onChange.push(function() { } );

Each function added to a hook will receive 3 arguments when called. These are:

  1. selectedDates - an array of Date objects selected by the user. When there are no dates selected, the array is empty.

  2. dateStr - a string representation of the latest selected Date object by the user. The string is formatted as per the dateFormat option.

  3. instance - the flatpickr object, containing various methods and properties.



onChange gets triggered when the user selects a date, or changes the time on a selected date.


onOpen gets triggered when the calendar is opened.


onClose gets triggered when the calendar is closed.


onMonthChange gets triggered when the month is changed, either by the user or programmatically.


onYearChange gets triggered when the year is changed, either by the user or programmatically.

    onChange: function(selectedDates, dateStr, instance) {
    onOpen: [
        function(selectedDates, dateStr, instance){
        function(selectedDates, dateStr, instance){
    onClose: function(selectedDates, dateStr, instance){
       // ...


onReady gets triggered once the calendar is in a ready state.


onValueUpdate gets triggered when the input value is updated with a new date string.


Take full control of every date cell with theonDayCreate()hook.

    onDayCreate: function(dObj, dStr, fp, dayElem){
        // Utilize dayElem.dateObj, which is the corresponding Date

        // dummy logic
        if (Math.random() < 0.15)
            dayElem.innerHTML += "<span class='event'></span>";

        else if (Math.random() > 0.85)
            dayElem.innerHTML += "<span class='event busy'></span>";

Every flatpickr day has relative positioning, which makes it easier to position indicators as we’d like.

.event {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 150px;
    bottom: 3px;
    left: calc(50% - 1.5px);
    content: " ";
    display: block;
    background: #3d8eb9;

.event.busy {
    background: #f64747;