Getting Started
1. Install
We will start by downloading the calendar and its theme.
npm i @schedule-x/calendar @schedule-x/theme-default
2. Setup
After downloading and importing our dependencies, we can create an instance of the calendar using the
createCalendar
function. This function takes one argument: its configuration object. It is then rendered
using the render
method.
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
andviewMonthAgenda
. - 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 depend on your use case. For many use cases, something like this 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:
const calendar = createCalendar(/***/)
calendar.setTheme('dark')
// or
calendar.setTheme('light')