Creative Tim  |  Docs

Calendar

PRO

The calendar component helps you to simply create a beautiful event calendar. It uses fullcalendar in base and you can use all of its props for the calendar component.

The below codes are editable and you can modify them the way you want directly from your browser, please use the green button or the ctrl + s to save the changes.

Demo

// NextJS Material Dashboard 2 PRO examples import Calendar from "/examples/Calendar";

November 2021

Sun
Mon
Tue
Wed
Thu
Fri
Sat
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11

Props Information

NameTypeDefaultDescription
header{ title: string, date: string }{ title: "", date: "" }Sets a title with a specific date on the top of the calendar
Fullcalendar PropsYou can pass all of the fullcalendar props for the Calendar as well.

The dayGridPlugin, timeGridPlugin, interactionPlugin plugins are add by default for the Calendar and you don' need to pass them.

Contents