HTML
xxxxxxxxxx
1
<div class="calendar" id="calendar-3" data-mdb-default-view="week"></div>
CSS
1
1
JS
xxxxxxxxxx
1
const events = [
2
{
3
summary: 'JS Conference',
4
start: {
5
date: Calendar.dayjs().format('DD/MM/YYYY'),
6
},
7
end: {
8
date: Calendar.dayjs().format('DD/MM/YYYY'),
9
},
10
color: {
11
background: '#cfe0fc',
12
foreground: '#0a47a9',
13
},
14
},
15
{
16
summary: 'Vue Meetup',
17
start: {
18
date: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY'),
19
},
20
end: {
21
date: Calendar.dayjs().add(5, 'day').format('DD/MM/YYYY'),
22
},
23
color: {
24
background: '#ebcdfe',
25
foreground: '#6e02b1',
26
},
27
},
28
{
29
summary: 'Angular Meetup',
30
description: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur',
31
start: {
32
date: Calendar.dayjs().subtract(3, 'day').format('DD/MM/YYYY'),
33
dateTime: Calendar.dayjs().subtract(3, 'day').format('DD/MM/YYYY') + ' 10:00',
34
},
35
end: {
36
date: Calendar.dayjs().add(3, 'day').format('DD/MM/YYYY'),
37
dateTime: Calendar.dayjs().add(3, 'day').format('DD/MM/YYYY') + ' 14:00',
38
},
39
color: {
40
background: '#c7f5d9',
41
foreground: '#0b4121',
42
},
43
},
44
{
45
summary: 'React Meetup',
46
start: {
47
date: Calendar.dayjs().add(5, 'day').format('DD/MM/YYYY'),
48
},
49
end: {
50
date: Calendar.dayjs().add(8, 'day').format('DD/MM/YYYY'),
51
},
52
color: {
53
background: '#fdd8de',
54
foreground: '#790619',
55
},
56
},
57
{
58
summary: 'Meeting',
59
start: {
60
date: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY'),
61
dateTime: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY') + ' 8:00',
62
},
63
end: {
64
date: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY'),
65
dateTime: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY') + ' 12:00',
66
},
67
color: {
68
background: '#cfe0fc',
69
foreground: '#0a47a9',
70
},
71
},
72
{
73
summary: 'Call',
74
start: {
75
date: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY'),
76
dateTime: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY') + ' 11:00',
77
},
78
end: {
79
date: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY'),
80
dateTime: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY') + ' 14:00',
81
},
82
color: {
83
background: '#292929',
84
foreground: '#f5f5f5',
85
},
86
}
87
]);
88
89
const calendarElement = document.getElementById('calendar-3');
90
const calendarInstance = Calendar.getInstance(calendarElement);
91
calendarInstance.addEvents(events);
Console errors: 1