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