Events & Hooks


flatpickr has 5 event hooks for the most common and useful actions. For each hook, you may specify a single function, or an array of functions. Callback arguments are explained below.

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

dateStr is a string representation of the latest selected Date object by the user. The string is formatted as per thedateFormatoption.

instance is 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.


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