Calendar views

The views are the most basic building blocks of the calendar. There are currently 5 views available, as listed below, but first:

A note on screen sizes

The Schedule-X calendar is designed to be responsive. Given standard browser settings where 1rem = 16px, the calendar has an internal break point of 700px: below this break point, the calendar tries to display only views that are compatible with small screens. Above this break point, the calendar tries to display only views that are compatible with large screens.

If your users will view the calendar on small as well as large screens, you need to include at least one view compatible with small screens and at least one view compatible with large screens.

The available views

View name	Large screens	Small screens
Day	Yes	Yes
Month grid	Yes	No
Month agenda	No	Yes
Week	Yes	No
Resource view (premium)	Yes	Yes

An example using all views

import {
  createViewDay,
  createViewMonthAgenda,
  createViewMonthGrid,
  createViewWeek,
  createCalendar
} from '@schedule-x/calendar'
import '@schedule-x/theme-default/dist/index.css'
 
const calendar = createCalendar({
  views: [createViewDay(), createViewMonthAgenda(), createViewMonthGrid(), createViewWeek()],
  events: [],
})
 
calendar.render(document.getElementById('calendar'))

Configuration Events