summaryrefslogtreecommitdiff
path: root/public/js/fullcalendar/examples/daygrid-views.html
diff options
context:
space:
mode:
Diffstat (limited to 'public/js/fullcalendar/examples/daygrid-views.html')
-rw-r--r--public/js/fullcalendar/examples/daygrid-views.html104
1 files changed, 104 insertions, 0 deletions
diff --git a/public/js/fullcalendar/examples/daygrid-views.html b/public/js/fullcalendar/examples/daygrid-views.html
new file mode 100644
index 0000000..9dafe43
--- /dev/null
+++ b/public/js/fullcalendar/examples/daygrid-views.html
@@ -0,0 +1,104 @@
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset='utf-8' />
5<script src='../dist/index.global.js'></script>
6<script>
7
8 document.addEventListener('DOMContentLoaded', function() {
9 var calendarEl = document.getElementById('calendar');
10
11 var calendar = new FullCalendar.Calendar(calendarEl, {
12 headerToolbar: {
13 left: 'prevYear,prev,next,nextYear today',
14 center: 'title',
15 right: 'dayGridMonth,dayGridWeek,dayGridDay'
16 },
17 initialDate: '2023-01-12',
18 navLinks: true, // can click day/week names to navigate views
19 editable: true,
20 dayMaxEvents: true, // allow "more" link when too many events
21 events: [
22 {
23 title: 'All Day Event',
24 start: '2023-01-01'
25 },
26 {
27 title: 'Long Event',
28 start: '2023-01-07',
29 end: '2023-01-10'
30 },
31 {
32 groupId: 999,
33 title: 'Repeating Event',
34 start: '2023-01-09T16:00:00'
35 },
36 {
37 groupId: 999,
38 title: 'Repeating Event',
39 start: '2023-01-16T16:00:00'
40 },
41 {
42 title: 'Conference',
43 start: '2023-01-11',
44 end: '2023-01-13'
45 },
46 {
47 title: 'Meeting',
48 start: '2023-01-12T10:30:00',
49 end: '2023-01-12T12:30:00'
50 },
51 {
52 title: 'Lunch',
53 start: '2023-01-12T12:00:00'
54 },
55 {
56 title: 'Meeting',
57 start: '2023-01-12T14:30:00'
58 },
59 {
60 title: 'Happy Hour',
61 start: '2023-01-12T17:30:00'
62 },
63 {
64 title: 'Dinner',
65 start: '2023-01-12T20:00:00'
66 },
67 {
68 title: 'Birthday Party',
69 start: '2023-01-13T07:00:00'
70 },
71 {
72 title: 'Click for Google',
73 url: 'http://google.com/',
74 start: '2023-01-28'
75 }
76 ]
77 });
78
79 calendar.render();
80 });
81
82</script>
83<style>
84
85 body {
86 margin: 40px 10px;
87 padding: 0;
88 font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
89 font-size: 14px;
90 }
91
92 #calendar {
93 max-width: 1100px;
94 margin: 0 auto;
95 }
96
97</style>
98</head>
99<body>
100
101 <div id='calendar'></div>
102
103</body>
104</html>