Events & Hooks

Events

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.

Hooks

onChange

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

onOpen

onOpen gets triggered when the calendar is opened.

onClose

onClose gets triggered when the calendar is closed.

onMonthChange

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

onYearChange

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

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

onValueUpdate

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

onDayCreate

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