Getting Started

1. Install

We will start this tutorial by downloading the calendar and its styles. Please note, that using the styles is completely optional, and you could theoretically create your own theme. If doing so, however, please pin your dependency to a fixed version to avoid risking unwanted breaking changes.

npm i @schedule-x/calendar @schedule-x/theme-default

2. Setup

After downloading and importing our dependencies, we can now move on to create an instance of the calendar using the createCalendar function. This function takes one argument, namely its configuration object. It is then rendered using the render method. This method takes a DOM element, which the calendar is then rendered onto, as its argument.

import { createCalendar, viewMonthGrid } from '@schedule-x/calendar'
import '@schedule-x/theme-default/dist/index.css'
 
const calendar = createCalendar({
  views: [viewMonthGrid],
  events: [
    {
      id: 1,
      title: 'Coffee with John',
      start: '2023-12-04 10:05',
      end: '2023-12-04 10:35',
    },
  ],
})
 
calendar.render(document.getElementById('calendar'))

Configuration object

As a bare minimum, the configuration object needs two things:

A list of views. Currently available views are viewMonthGrid, viewWeek, viewDay and viewMonthAgenda.
A list of events.

Style & theme

CSS of wrapping element

You will need to decide on the styles of the element wrapping the calendar. This will be highly dependent on your use case. For many use cases, however, something like the following should suffice:

#calendar {
  width: 100%;
  height: 800px;
  max-height: 90vh;
}

Theme

The calendar renders to light mode by default. If you want, you can either override this default through configuration, or set the theme programmatically through the setTheme method, like so:

const calendar = createCalendar(/***/)
 
calendar.setTheme('dark')
// or
calendar.setTheme('light')

Start Configuration