side_navigation

View Options

Explore this complete list of Calendar.js configuration options for the views to easily set up, customize, and update your calendar settings on the fly.

Full Day

calendarInstance.setOptions( {
    views: {
        fullDay: {
            enabled: true
        }
    }
} );
Type:Name:Description:
booleanenabledStates if the view is enabled (defaults to true).
booleanshowAllDayEventDetailsStates if the extra details for an All Day event should be shown (defaults to false).
numberminutesBetweenSectionsStates the number of minutes that should be used between rows in all views (defaults to 30).
booleanshowTimelineArrowStates if the timeline arrow should be shown (defaults to true).
booleanshowExtraTitleBarButtonsStates if the extra toolbar buttons on the main title bars are visible (defaults to true).

Full Week

calendarInstance.setOptions( {
    views: {
        fullWeek: {
            enabled: true
        }
    }
} );
Type:Name:Description:
booleanenabledStates if the view is enabled (defaults to true).
booleanshowAllDayEventDetailsStates if the extra details for an All Day event should be shown (defaults to false).
booleanshowDayNamesHeadersStates if the day names headers should be shown (defaults to true).
numberminutesBetweenSectionsStates the number of minutes that should be used between rows in all views (defaults to 30).
booleanshowTimelineArrowStates if the timeline arrow should be shown (defaults to true).
booleanshowWeekNumbersInTitlesStates if week numbers should be shown in the title bars (defaults to false).
booleanshowExtraTitleBarButtonsStates if the extra toolbar buttons on the main title bars are visible (defaults to true).
booleanshowDatesInDayHeadersStates if the dates should be shown in the day headers (defaults to true).

Full Month

calendarInstance.setOptions( {
    views: {
        fullMonth: {
            allowEventScrolling: true
        }
    }
} );
Type:Name:Description:
numbermaximumEventsPerDayDisplayThe maximum number of events that should be displayed per day (defaults to 3, 0 disables it).
booleanallowEventScrollingStates if the days in the display can be scrolled (defaults to false, overrides maximumEventsPerDayDisplay if true).
booleanshowTimesInEventsStates if the time should be shown on the events (defaults to false).
numberminimumDayHeightStates the height the days should use (defaults to 0 - auto).
booleanshowPreviousNextMonthNamesStates if the previous/next month names should be shown in the days (defaults to true).
booleanuseOnlyDotEventsStates if only dot event icons should be used (to save space, defaults to false).
booleanapplyCssToEventsNotInCurrentMonthStates if extra CSS should be applied to events that are not in the current (defaults to true).
booleanaddYearButtonsStates if the year-jumping buttons should be added (defaults to false).
stringtitleBarDateFormatStates the display format that should be used for the title bar (defaults to "{mmmm} {yyyy}", see date display formats here for options).
booleanshowDayNamesHeadersStates if the day names headers should be shown (defaults to true).
booleanisPinUpViewEnabledStates if the pin-up view is enabled (defaults to false).
string[]pinUpViewImageUrlsStates the pin-up view images that should be used (defaults to []).
booleanshowMonthButtonsInYearDropDownMenuStates if the month name selector buttons are shown in the Year Drop-Down menu (defaults to true).
booleanshowExtraTitleBarButtonsStates if the extra toolbar buttons on the main title bars are visible (defaults to true).
string[]pinUpViewImageCssClassesStates the pin-up view CSS classes that should be used (instead of images, defaults to []).

Full Year

calendarInstance.setOptions( {
    views: {
        fullYear: {
            enabled: true
        }
    }
} );
Type:Name:Description:
booleanenabledStates if the view is enabled (defaults to true).
booleanshowExtraTitleBarButtonsStates if the extra toolbar buttons on the main title bars are visible (defaults to true).

Timeline

calendarInstance.setOptions( {
    views: {
        timeline: {
            enabled: true
        }
    }
} );
Type:Name:Description:
booleanenabledStates if the view is enabled (defaults to true).
stringdefaultAxisStates the default axis the view should use (defaults to "group").
numberminutesBetweenSectionsStates the number of minutes that should be used between headers in all views (defaults to 30).
booleanshowExtraTitleBarButtonsStates if the extra toolbar buttons on the main title bars are visible (defaults to true).

All Events

calendarInstance.setOptions( {
    views: {
        allEvents: {
            enabled: true
        }
    }
} );
Type:Name:Description:
booleanenabledStates if the view is enabled (defaults to true).
booleanshowExtraTitleBarButtonsStates if the extra toolbar buttons on the main title bars are visible (defaults to true).

DatePicker

calendarInstance.setOptions( {
    views: {
        datePicker: {
            selectedDateFormat: "{d}{o} {mmmm} {yyyy}"
        }
    }
} );
Type:Name:Description:
stringselectedDateFormatStates the display format that should be used for the DatePicker input field (defaults to "{d}{o} {mmmm} {yyyy}", see date display formats here for options).
ObjectminimumDateStates the minimum date that can be selected in DatePicker mode (defaults to null).
ObjectmaximumDateStates the minimum date that can be selected in DatePicker mode (defaults to null).