View Options : Documentation : Calendar.js

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:
boolean	enabled	States if the view is enabled (defaults to true).
boolean	showAllDayEventDetails	States if the extra details for an All Day event should be shown (defaults to false).
number	minutesBetweenSections	States the number of minutes that should be used between rows in all views (defaults to 30).
boolean	showTimelineArrow	States if the timeline arrow should be shown (defaults to true).
boolean	showExtraTitleBarButtons	States if the extra toolbar buttons on the main title bars are visible (defaults to true).
boolean	showEventUrls	States if the URLs should be shown in the events (can be clicked, like ToolTips, defaults to false).

Full Week

calendarInstance.setOptions( {
    views: {
        fullWeek: {
            enabled: true
        }
    }
} );

Type:	Name:	Description:
boolean	enabled	States if the view is enabled (defaults to true).
boolean	showAllDayEventDetails	States if the extra details for an All Day event should be shown (defaults to false).
boolean	showDayNamesHeaders	States if the day names headers should be shown (defaults to true).
number	minutesBetweenSections	States the number of minutes that should be used between rows in all views (defaults to 30).
boolean	showTimelineArrow	States if the timeline arrow should be shown (defaults to true).
boolean	showWeekNumbersInTitles	States if week numbers should be shown in the title bars (defaults to false).
boolean	showExtraTitleBarButtons	States if the extra toolbar buttons on the main title bars are visible (defaults to true).
boolean	showDatesInDayHeaders	States if the dates should be shown in the day headers (defaults to true).
boolean	padDayMonthNumbers	States if the day/month numbers should be padded (defaults to false).
boolean	showEventUrls	States if the URLs should be shown in the events (can be clicked, like ToolTips, defaults to false).

Full Month

calendarInstance.setOptions( {
    views: {
        fullMonth: {
            allowEventScrolling: true
        }
    }
} );

Type:	Name:	Description:
number	maximumEventsPerDayDisplay	The maximum number of events that should be displayed per day (defaults to 3, 0 disables it).
boolean	allowEventScrolling	States if the days in the display can be scrolled (defaults to false, overrides maximumEventsPerDayDisplay if true).
boolean	showTimesInEvents	States if the time should be shown on the events (defaults to false).
number	minimumDayHeight	States the height the days should use (defaults to 0 - auto).
boolean	showPreviousNextMonthNames	States if the previous/next month names should be shown in the days (defaults to true).
boolean	useOnlyDotEvents	States if only dot event icons should be used (to save space, defaults to false).
boolean	applyCssToEventsNotInCurrentMonth	States if extra CSS should be applied to events that are not in the current (defaults to true).
boolean	addYearButtons	States if the year-jumping buttons should be added (defaults to false).
string	titleBarDateFormat	States the display format that should be used for the title bar (defaults to "{mmmm} {yyyy}", see date display formats here for options).
boolean	showDayNamesHeaders	States if the day names headers should be shown (defaults to true).
boolean	isPinUpViewEnabled	States if the pin-up view is enabled (defaults to false).
string[]	pinUpViewImageUrls	States the pin-up view images that should be used (defaults to []).
boolean	showMonthButtonsInYearDropDownMenu	States if the month name selector buttons are shown in the Year Drop-Down menu (defaults to true).
boolean	showExtraTitleBarButtons	States if the extra toolbar buttons on the main title bars are visible (defaults to true).
string[]	pinUpViewImageCssClasses	States the pin-up view CSS classes that should be used (instead of images, defaults to []).
boolean	showYearDropDownButtonIcon	States if the arrow icon should be shown on the Year Drop-Down menu button (defaults to true).
boolean	padDayNumbers	States if the day numbers should be padded (defaults to false).
boolean	showPreviousNextYears	States if the year should be shown on the previous/next month year (defaults to true).

Full Year

calendarInstance.setOptions( {
    views: {
        fullYear: {
            enabled: true
        }
    }
} );

Type:	Name:	Description:
boolean	enabled	States if the view is enabled (defaults to true).
boolean	showExtraTitleBarButtons	States if the extra toolbar buttons on the main title bars are visible (defaults to true).
boolean	padDayNumbers	States if the day numbers should be padded (defaults to false).

Timeline

calendarInstance.setOptions( {
    views: {
        timeline: {
            enabled: true
        }
    }
} );

Type:	Name:	Description:
boolean	enabled	States if the view is enabled (defaults to true).
string	defaultAxis	States the default axis the view should use (defaults to "group").
number	minutesBetweenSections	States the number of minutes that should be used between headers in all views (defaults to 30).
boolean	showExtraTitleBarButtons	States 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:
boolean	enabled	States if the view is enabled (defaults to true).
boolean	showExtraTitleBarButtons	States if the extra toolbar buttons on the main title bars are visible (defaults to true).
boolean	showEventUrls	States if the URLs should be shown in the events (can be clicked, like ToolTips, defaults to false).

DatePicker

calendarInstance.setOptions( {
    views: {
        datePicker: {
            selectedDateFormat: "{d}{o} {mmmm} {yyyy}"
        }
    }
} );

Type:	Name:	Description:
string	selectedDateFormat	States 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).
Object	minimumDate	States the minimum date that can be selected in DatePicker mode (defaults to null).
Object	maximumDate	States the minimum date that can be selected in DatePicker mode (defaults to null).