Calendar demo
November – December 2023
Week
Mon
27
Tue
28
Wed
29
Thu
30
Fri
1
Sat
2
Sun
3
Media fasting
Coffee with John
12 AM
1 AM
2 AM
3 AM
4 AM
5 AM
6 AM
7 AM
8 AM
9 AM
10 AM
11 AM
12 PM
1 PM
2 PM
3 PM
4 PM
5 PM
6 PM
7 PM
8 PM
9 PM
10 PM
11 PM
Gym
6:00 AM – 7:00 AM
Breakfast with Sam
5:00 AM – 6:00 AM
Starbucks
Some appointment
3:00 AM – 4:30 AM
John
Other appointment
3:00 AM – 4:30 AM
Susan & Mike
Code
The demo above is based on the code below.
import { createCalendar, viewDay, viewMonthAgenda, viewMonthGrid, viewWeek } from '@schedule-x/calendar'
import { createDragAndDropPlugin } from '@schedule-x/drag-and-drop'
import { createEventModalPlugin } from '@schedule-x/event-modal'
import '@schedule-x/theme-default/dist/index.css'
const calendar = createCalendar({
views: [viewMonthGrid, viewMonthAgenda, viewWeek, viewDay],
selectedDate: '2023-12-01'
defaultView: viewWeek.name,
events: [
{
id: 1,
title: 'Coffee with John',
start: '2023-12-01',
end: '2023-12-01',
},
{
id: 2,
title: 'Breakfast with Sam',
description: 'Discuss the new project',
location: 'Starbucks',
start: '2023-11-29 05:00',
end: '2023-11-29 06:00',
},
{
id: 3,
title: 'Gym',
start: '2023-11-27 06:00',
end: '2023-11-27 07:00',
calendarId: 'leisure'
},
{
id: 4,
title: 'Media fasting',
start: '2023-12-01',
end: '2023-12-03',