Calendar views

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

A note on screen sizes

The Schedule-X calendar is designed to be responsive and used on different screen sizes. 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 you expect your users to view the calendar on small as well as large screens, it is highly recommended that you include at least one view compatible with small screens and at least one view compatible with large screens.

The available views

An example using all views

import {
  createCalendar,
  viewDay,
  viewMonthAgenda,
  viewMonthGrid,
  viewWeek,
} from '@schedule-x/calendar'
import '@schedule-x/theme-default/dist/index.css'
 
const calendar = createCalendar({
  views: [viewMonthGrid, viewDay, viewMonthAgenda, viewWeek],
  events: [],
})
 
calendar.render(document.getElementById('calendar'))