Calendar views

The views are the most basic building blocks of the calendar. There are currently 7 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

An example using all views

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

Year grid interactions

Clicking a date with events opens a compact list of the events on that day. If the event modal plugin is configured, clicking an event in that list opens its event modal.

Double-clicking a date opens the day view when createViewDay() is included in views. You can replace that behavior with the onDoubleClickYearGridDate callback.

Loading events

The strategy for loading events will differ slightly depending on the view.

Day, Week, Month, Year and Agenda views

When a user navigates to new days, weeks, months or years, the calendar will invoke onRangeUpdate, which you can use to load the events for the new range.

const calendar = createCalendar({
  views: [
    createViewDay(),
    createViewWeekAgenda(),
    createViewMonthAgenda(),
    createViewMonthGrid(),
    createViewWeek(),
    createViewYearGrid(),
  ],
 
  events: [],
 
  callbacks: {
    onRangeUpdate: ({ start, end }) => {
      // Load events for the new range
    },
  },
})
 
calendar.render(document.getElementById('calendar'))

List view

The list view is a bit different. When a user scrolls through the list, the calendar will invoke onScrollDayIntoView. You can then use this callback as a hint for when to load more events. For example, if you start by loading all events for January 2026, you can then use this callback to load events for February 2026, when the user reaches one of the last days of January.

const calendar = createCalendar({
  views: [createViewList()],
 
  events: [],
 
  callbacks: {
    onScrollDayIntoView: (date) => {
      // Load events for the new range
    },
  },
})
 
calendar.render(document.getElementById('calendar'))