summaryrefslogtreecommitdiff
path: root/public/js/fullcalendar/examples
diff options
context:
space:
mode:
Diffstat (limited to 'public/js/fullcalendar/examples')
-rw-r--r--public/js/fullcalendar/examples/background-events.html101
-rw-r--r--public/js/fullcalendar/examples/daygrid-views.html104
-rw-r--r--public/js/fullcalendar/examples/external-dragging-2cals.html69
-rw-r--r--public/js/fullcalendar/examples/external-dragging-builtin.html149
-rw-r--r--public/js/fullcalendar/examples/full-height.html125
-rw-r--r--public/js/fullcalendar/examples/list-sticky-header.html76
-rw-r--r--public/js/fullcalendar/examples/list-views.html114
-rw-r--r--public/js/fullcalendar/examples/month-view.html100
-rw-r--r--public/js/fullcalendar/examples/multimonth-view.html110
-rw-r--r--public/js/fullcalendar/examples/multiweek-view.html107
-rw-r--r--public/js/fullcalendar/examples/natural-height.html108
-rw-r--r--public/js/fullcalendar/examples/selectable.html123
-rw-r--r--public/js/fullcalendar/examples/timegrid-views-modal.html180
-rw-r--r--public/js/fullcalendar/examples/timegrid-views.html108
14 files changed, 1574 insertions, 0 deletions
diff --git a/public/js/fullcalendar/examples/background-events.html b/public/js/fullcalendar/examples/background-events.html
new file mode 100644
index 0000000..911e0b3
--- /dev/null
+++ b/public/js/fullcalendar/examples/background-events.html
@@ -0,0 +1,101 @@
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: 'prev,next today',
14 center: 'title',
15 right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
16 },
17 initialDate: '2023-01-12',
18 navLinks: true, // can click day/week names to navigate views
19 businessHours: true, // display business hours
20 editable: true,
21 selectable: true,
22 events: [
23 {
24 title: 'Business Lunch',
25 start: '2023-01-03T13:00:00',
26 constraint: 'businessHours'
27 },
28 {
29 title: 'Meeting',
30 start: '2023-01-13T11:00:00',
31 constraint: 'availableForMeeting', // defined below
32 color: '#257e4a'
33 },
34 {
35 title: 'Conference',
36 start: '2023-01-18',
37 end: '2023-01-20'
38 },
39 {
40 title: 'Party',
41 start: '2023-01-29T20:00:00'
42 },
43
44 // areas where "Meeting" must be dropped
45 {
46 groupId: 'availableForMeeting',
47 start: '2023-01-11T10:00:00',
48 end: '2023-01-11T16:00:00',
49 display: 'background'
50 },
51 {
52 groupId: 'availableForMeeting',
53 start: '2023-01-13T10:00:00',
54 end: '2023-01-13T16:00:00',
55 display: 'background'
56 },
57
58 // red areas where no events can be dropped
59 {
60 start: '2023-01-24',
61 end: '2023-01-28',
62 overlap: false,
63 display: 'background',
64 color: '#ff9f89'
65 },
66 {
67 start: '2023-01-06',
68 end: '2023-01-08',
69 overlap: false,
70 display: 'background',
71 color: '#ff9f89'
72 }
73 ]
74 });
75
76 calendar.render();
77 });
78
79</script>
80<style>
81
82 body {
83 margin: 40px 10px;
84 padding: 0;
85 font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
86 font-size: 14px;
87 }
88
89 #calendar {
90 max-width: 1100px;
91 margin: 0 auto;
92 }
93
94</style>
95</head>
96<body>
97
98 <div id='calendar'></div>
99
100</body>
101</html>
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>
diff --git a/public/js/fullcalendar/examples/external-dragging-2cals.html b/public/js/fullcalendar/examples/external-dragging-2cals.html
new file mode 100644
index 0000000..066685d
--- /dev/null
+++ b/public/js/fullcalendar/examples/external-dragging-2cals.html
@@ -0,0 +1,69 @@
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 srcCalendarEl = document.getElementById('source-calendar');
10 var destCalendarEl = document.getElementById('destination-calendar');
11
12 var srcCalendar = new FullCalendar.Calendar(srcCalendarEl, {
13 editable: true,
14 initialDate: '2023-01-12',
15 events: [
16 {
17 title: 'event1',
18 start: '2023-01-11T10:00:00',
19 end: '2023-01-11T16:00:00'
20 },
21 {
22 title: 'event2',
23 start: '2023-01-13T10:00:00',
24 end: '2023-01-13T16:00:00'
25 }
26 ],
27 eventLeave: function(info) {
28 console.log('event left!', info.event);
29 }
30 });
31
32 var destCalendar = new FullCalendar.Calendar(destCalendarEl, {
33 initialDate: '2023-01-12',
34 editable: true,
35 droppable: true, // will let it receive events!
36 eventReceive: function(info) {
37 console.log('event received!', info.event);
38 }
39 });
40
41 srcCalendar.render();
42 destCalendar.render();
43 });
44
45</script>
46<style>
47
48 body {
49 margin: 20px 0 0 20px;
50 font-size: 14px;
51 font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
52 }
53
54 #source-calendar,
55 #destination-calendar {
56 float: left;
57 width: 600px;
58 margin: 0 20px 20px 0;
59 }
60
61</style>
62</head>
63<body>
64
65 <div id='source-calendar'></div>
66 <div id='destination-calendar'></div>
67
68</body>
69</html>
diff --git a/public/js/fullcalendar/examples/external-dragging-builtin.html b/public/js/fullcalendar/examples/external-dragging-builtin.html
new file mode 100644
index 0000000..78fcd89
--- /dev/null
+++ b/public/js/fullcalendar/examples/external-dragging-builtin.html
@@ -0,0 +1,149 @@
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
10 /* initialize the external events
11 -----------------------------------------------------------------*/
12
13 var containerEl = document.getElementById('external-events-list');
14 new FullCalendar.Draggable(containerEl, {
15 itemSelector: '.fc-event',
16 eventData: function(eventEl) {
17 return {
18 title: eventEl.innerText.trim()
19 }
20 }
21 });
22
23 //// the individual way to do it
24 // var containerEl = document.getElementById('external-events-list');
25 // var eventEls = Array.prototype.slice.call(
26 // containerEl.querySelectorAll('.fc-event')
27 // );
28 // eventEls.forEach(function(eventEl) {
29 // new FullCalendar.Draggable(eventEl, {
30 // eventData: {
31 // title: eventEl.innerText.trim(),
32 // }
33 // });
34 // });
35
36 /* initialize the calendar
37 -----------------------------------------------------------------*/
38
39 var calendarEl = document.getElementById('calendar');
40 var calendar = new FullCalendar.Calendar(calendarEl, {
41 headerToolbar: {
42 left: 'prev,next today',
43 center: 'title',
44 right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
45 },
46 editable: true,
47 droppable: true, // this allows things to be dropped onto the calendar
48 drop: function(arg) {
49 // is the "remove after drop" checkbox checked?
50 if (document.getElementById('drop-remove').checked) {
51 // if so, remove the element from the "Draggable Events" list
52 arg.draggedEl.parentNode.removeChild(arg.draggedEl);
53 }
54 }
55 });
56 calendar.render();
57
58 });
59
60</script>
61<style>
62
63 body {
64 margin-top: 40px;
65 font-size: 14px;
66 font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
67 }
68
69 #external-events {
70 position: fixed;
71 left: 20px;
72 top: 20px;
73 width: 150px;
74 padding: 0 10px;
75 border: 1px solid #ccc;
76 background: #eee;
77 text-align: left;
78 }
79
80 #external-events h4 {
81 font-size: 16px;
82 margin-top: 0;
83 padding-top: 1em;
84 }
85
86 #external-events .fc-event {
87 margin: 3px 0;
88 cursor: move;
89 }
90
91 #external-events p {
92 margin: 1.5em 0;
93 font-size: 11px;
94 color: #666;
95 }
96
97 #external-events p input {
98 margin: 0;
99 vertical-align: middle;
100 }
101
102 #calendar-wrap {
103 margin-left: 200px;
104 }
105
106 #calendar {
107 max-width: 1100px;
108 margin: 0 auto;
109 }
110
111</style>
112</head>
113<body>
114 <div id='wrap'>
115
116 <div id='external-events'>
117 <h4>Draggable Events</h4>
118
119 <div id='external-events-list'>
120 <div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'>
121 <div class='fc-event-main'>My Event 1</div>
122 </div>
123 <div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'>
124 <div class='fc-event-main'>My Event 2</div>
125 </div>
126 <div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'>
127 <div class='fc-event-main'>My Event 3</div>
128 </div>
129 <div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'>
130 <div class='fc-event-main'>My Event 4</div>
131 </div>
132 <div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'>
133 <div class='fc-event-main'>My Event 5</div>
134 </div>
135 </div>
136
137 <p>
138 <input type='checkbox' id='drop-remove' />
139 <label for='drop-remove'>remove after drop</label>
140 </p>
141 </div>
142
143 <div id='calendar-wrap'>
144 <div id='calendar'></div>
145 </div>
146
147 </div>
148</body>
149</html>
diff --git a/public/js/fullcalendar/examples/full-height.html b/public/js/fullcalendar/examples/full-height.html
new file mode 100644
index 0000000..18b55f8
--- /dev/null
+++ b/public/js/fullcalendar/examples/full-height.html
@@ -0,0 +1,125 @@
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 height: '100%',
13 expandRows: true,
14 slotMinTime: '08:00',
15 slotMaxTime: '20:00',
16 headerToolbar: {
17 left: 'prev,next today',
18 center: 'title',
19 right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
20 },
21 initialView: 'dayGridMonth',
22 initialDate: '2023-01-12',
23 navLinks: true, // can click day/week names to navigate views
24 editable: true,
25 selectable: true,
26 nowIndicator: true,
27 dayMaxEvents: true, // allow "more" link when too many events
28 events: [
29 {
30 title: 'All Day Event',
31 start: '2023-01-01',
32 },
33 {
34 title: 'Long Event',
35 start: '2023-01-07',
36 end: '2023-01-10'
37 },
38 {
39 groupId: 999,
40 title: 'Repeating Event',
41 start: '2023-01-09T16:00:00'
42 },
43 {
44 groupId: 999,
45 title: 'Repeating Event',
46 start: '2023-01-16T16:00:00'
47 },
48 {
49 title: 'Conference',
50 start: '2023-01-11',
51 end: '2023-01-13'
52 },
53 {
54 title: 'Meeting',
55 start: '2023-01-12T10:30:00',
56 end: '2023-01-12T12:30:00'
57 },
58 {
59 title: 'Lunch',
60 start: '2023-01-12T12:00:00'
61 },
62 {
63 title: 'Meeting',
64 start: '2023-01-12T14:30:00'
65 },
66 {
67 title: 'Happy Hour',
68 start: '2023-01-12T17:30:00'
69 },
70 {
71 title: 'Dinner',
72 start: '2023-01-12T20:00:00'
73 },
74 {
75 title: 'Birthday Party',
76 start: '2023-01-13T07:00:00'
77 },
78 {
79 title: 'Click for Google',
80 url: 'http://google.com/',
81 start: '2023-01-28'
82 }
83 ]
84 });
85
86 calendar.render();
87 });
88
89</script>
90<style>
91
92 html, body {
93 overflow: hidden; /* don't do scrollbars */
94 font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
95 font-size: 14px;
96 }
97
98 #calendar-container {
99 position: fixed;
100 top: 0;
101 left: 0;
102 right: 0;
103 bottom: 0;
104 }
105
106 .fc-header-toolbar {
107 /*
108 the calendar will be butting up against the edges,
109 but let's scoot in the header's buttons
110 */
111 padding-top: 1em;
112 padding-left: 1em;
113 padding-right: 1em;
114 }
115
116</style>
117</head>
118<body>
119
120 <div id='calendar-container'>
121 <div id='calendar'></div>
122 </div>
123
124</body>
125</html>
diff --git a/public/js/fullcalendar/examples/list-sticky-header.html b/public/js/fullcalendar/examples/list-sticky-header.html
new file mode 100644
index 0000000..487af31
--- /dev/null
+++ b/public/js/fullcalendar/examples/list-sticky-header.html
@@ -0,0 +1,76 @@
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 height: 'auto',
13 // stickyHeaderDates: false, // for disabling
14
15 headerToolbar: {
16 left: 'prev,next today',
17 center: 'title',
18 right: 'listMonth,listYear'
19 },
20
21 // customize the button names,
22 // otherwise they'd all just say "list"
23 views: {
24 listMonth: { buttonText: 'list month' },
25 listYear: { buttonText: 'list year' }
26 },
27
28 initialView: 'listYear',
29 initialDate: '2023-01-12',
30 navLinks: true, // can click day/week names to navigate views
31 editable: true,
32 events: [
33 {
34 title: 'repeating event 1',
35 daysOfWeek: [ 1, 2, 3 ],
36 duration: '00:30'
37 },
38 {
39 title: 'repeating event 2',
40 daysOfWeek: [ 1, 2, 3 ],
41 duration: '00:30'
42 },
43 {
44 title: 'repeating event 3',
45 daysOfWeek: [ 1, 2, 3 ],
46 duration: '00:30'
47 }
48 ]
49 });
50
51 calendar.render();
52 });
53
54</script>
55<style>
56
57 body {
58 margin: 40px 10px;
59 padding: 0;
60 font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
61 font-size: 14px;
62 }
63
64 #calendar {
65 max-width: 1100px;
66 margin: 0 auto;
67 }
68
69</style>
70</head>
71<body>
72
73 <div id='calendar'></div>
74
75</body>
76</html>
diff --git a/public/js/fullcalendar/examples/list-views.html b/public/js/fullcalendar/examples/list-views.html
new file mode 100644
index 0000000..cb219d0
--- /dev/null
+++ b/public/js/fullcalendar/examples/list-views.html
@@ -0,0 +1,114 @@
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
13 headerToolbar: {
14 left: 'prev,next today',
15 center: 'title',
16 right: 'listDay,listWeek'
17 },
18
19 // customize the button names,
20 // otherwise they'd all just say "list"
21 views: {
22 listDay: { buttonText: 'list day' },
23 listWeek: { buttonText: 'list week' }
24 },
25
26 initialView: 'listWeek',
27 initialDate: '2023-01-12',
28 navLinks: true, // can click day/week names to navigate views
29 editable: true,
30 dayMaxEvents: true, // allow "more" link when too many events
31 events: [
32 {
33 title: 'All Day Event',
34 start: '2023-01-01'
35 },
36 {
37 title: 'Long Event',
38 start: '2023-01-07',
39 end: '2023-01-10'
40 },
41 {
42 groupId: 999,
43 title: 'Repeating Event',
44 start: '2023-01-09T16:00:00'
45 },
46 {
47 groupId: 999,
48 title: 'Repeating Event',
49 start: '2023-01-16T16:00:00'
50 },
51 {
52 title: 'Conference',
53 start: '2023-01-11',
54 end: '2023-01-13'
55 },
56 {
57 title: 'Meeting',
58 start: '2023-01-12T10:30:00',
59 end: '2023-01-12T12:30:00'
60 },
61 {
62 title: 'Lunch',
63 start: '2023-01-12T12:00:00'
64 },
65 {
66 title: 'Meeting',
67 start: '2023-01-12T14:30:00'
68 },
69 {
70 title: 'Happy Hour',
71 start: '2023-01-12T17:30:00'
72 },
73 {
74 title: 'Dinner',
75 start: '2023-01-12T20:00:00'
76 },
77 {
78 title: 'Birthday Party',
79 start: '2023-01-13T07:00:00'
80 },
81 {
82 title: 'Click for Google',
83 url: 'http://google.com/',
84 start: '2023-01-28'
85 }
86 ]
87 });
88
89 calendar.render();
90 });
91
92</script>
93<style>
94
95 body {
96 margin: 40px 10px;
97 padding: 0;
98 font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
99 font-size: 14px;
100 }
101
102 #calendar {
103 max-width: 1100px;
104 margin: 0 auto;
105 }
106
107</style>
108</head>
109<body>
110
111 <div id='calendar'></div>
112
113</body>
114</html>
diff --git a/public/js/fullcalendar/examples/month-view.html b/public/js/fullcalendar/examples/month-view.html
new file mode 100644
index 0000000..dbd8861
--- /dev/null
+++ b/public/js/fullcalendar/examples/month-view.html
@@ -0,0 +1,100 @@
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 editable: true,
14 selectable: true,
15 businessHours: true,
16 dayMaxEvents: true, // allow "more" link when too many events
17 events: [
18 {
19 title: 'All Day Event',
20 start: '2023-01-01'
21 },
22 {
23 title: 'Long Event',
24 start: '2023-01-07',
25 end: '2023-01-10'
26 },
27 {
28 groupId: 999,
29 title: 'Repeating Event',
30 start: '2023-01-09T16:00:00'
31 },
32 {
33 groupId: 999,
34 title: 'Repeating Event',
35 start: '2023-01-16T16:00:00'
36 },
37 {
38 title: 'Conference',
39 start: '2023-01-11',
40 end: '2023-01-13'
41 },
42 {
43 title: 'Meeting',
44 start: '2023-01-12T10:30:00',
45 end: '2023-01-12T12:30:00'
46 },
47 {
48 title: 'Lunch',
49 start: '2023-01-12T12:00:00'
50 },
51 {
52 title: 'Meeting',
53 start: '2023-01-12T14:30:00'
54 },
55 {
56 title: 'Happy Hour',
57 start: '2023-01-12T17:30:00'
58 },
59 {
60 title: 'Dinner',
61 start: '2023-01-12T20:00:00'
62 },
63 {
64 title: 'Birthday Party',
65 start: '2023-01-13T07:00:00'
66 },
67 {
68 title: 'Click for Google',
69 url: 'http://google.com/',
70 start: '2023-01-28'
71 }
72 ]
73 });
74
75 calendar.render();
76 });
77
78</script>
79<style>
80
81 body {
82 margin: 40px 10px;
83 padding: 0;
84 font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
85 font-size: 14px;
86 }
87
88 #calendar {
89 max-width: 1100px;
90 margin: 0 auto;
91 }
92
93</style>
94</head>
95<body>
96
97 <div id='calendar'></div>
98
99</body>
100</html>
diff --git a/public/js/fullcalendar/examples/multimonth-view.html b/public/js/fullcalendar/examples/multimonth-view.html
new file mode 100644
index 0000000..feb9d23
--- /dev/null
+++ b/public/js/fullcalendar/examples/multimonth-view.html
@@ -0,0 +1,110 @@
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: 'prev,next today',
14 center: 'title',
15 right: 'multiMonthYear,dayGridMonth,timeGridWeek'
16 },
17 initialView: 'multiMonthYear',
18 initialDate: '2023-01-12',
19 editable: true,
20 selectable: true,
21 dayMaxEvents: true, // allow "more" link when too many events
22 // multiMonthMaxColumns: 1, // guarantee single column
23 // showNonCurrentDates: true,
24 // fixedWeekCount: false,
25 // businessHours: true,
26 // weekends: false,
27 events: [
28 {
29 title: 'All Day Event',
30 start: '2023-01-01'
31 },
32 {
33 title: 'Long Event',
34 start: '2023-01-07',
35 end: '2023-01-10'
36 },
37 {
38 groupId: 999,
39 title: 'Repeating Event',
40 start: '2023-01-09T16:00:00'
41 },
42 {
43 groupId: 999,
44 title: 'Repeating Event',
45 start: '2023-01-16T16:00:00'
46 },
47 {
48 title: 'Conference',
49 start: '2023-01-11',
50 end: '2023-01-13'
51 },
52 {
53 title: 'Meeting',
54 start: '2023-01-12T10:30:00',
55 end: '2023-01-12T12:30:00'
56 },
57 {
58 title: 'Lunch',
59 start: '2023-01-12T12:00:00'
60 },
61 {
62 title: 'Meeting',
63 start: '2023-01-12T14:30:00'
64 },
65 {
66 title: 'Happy Hour',
67 start: '2023-01-12T17:30:00'
68 },
69 {
70 title: 'Dinner',
71 start: '2023-01-12T20:00:00'
72 },
73 {
74 title: 'Birthday Party',
75 start: '2023-01-13T07:00:00'
76 },
77 {
78 title: 'Click for Google',
79 url: 'http://google.com/',
80 start: '2023-01-28'
81 }
82 ]
83 });
84
85 calendar.render();
86 });
87
88</script>
89<style>
90
91 body {
92 margin: 40px 10px;
93 padding: 0;
94 font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
95 font-size: 14px;
96 }
97
98 #calendar {
99 max-width: 1200px;
100 margin: 0 auto;
101 }
102
103</style>
104</head>
105<body>
106
107 <div id='calendar'></div>
108
109</body>
110</html>
diff --git a/public/js/fullcalendar/examples/multiweek-view.html b/public/js/fullcalendar/examples/multiweek-view.html
new file mode 100644
index 0000000..5a175fb
--- /dev/null
+++ b/public/js/fullcalendar/examples/multiweek-view.html
@@ -0,0 +1,107 @@
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: 'prev,next today',
14 center: 'title',
15 right: 'dayGridYear,dayGridMonth,timeGridWeek'
16 },
17 initialView: 'dayGridYear',
18 initialDate: '2023-01-12',
19 editable: true,
20 selectable: true,
21 dayMaxEvents: true, // allow "more" link when too many events
22 // businessHours: true,
23 // weekends: false,
24 events: [
25 {
26 title: 'All Day Event',
27 start: '2023-01-01'
28 },
29 {
30 title: 'Long Event',
31 start: '2023-01-07',
32 end: '2023-01-10'
33 },
34 {
35 groupId: 999,
36 title: 'Repeating Event',
37 start: '2023-01-09T16:00:00'
38 },
39 {
40 groupId: 999,
41 title: 'Repeating Event',
42 start: '2023-01-16T16:00:00'
43 },
44 {
45 title: 'Conference',
46 start: '2023-01-11',
47 end: '2023-01-13'
48 },
49 {
50 title: 'Meeting',
51 start: '2023-01-12T10:30:00',
52 end: '2023-01-12T12:30:00'
53 },
54 {
55 title: 'Lunch',
56 start: '2023-01-12T12:00:00'
57 },
58 {
59 title: 'Meeting',
60 start: '2023-01-12T14:30:00'
61 },
62 {
63 title: 'Happy Hour',
64 start: '2023-01-12T17:30:00'
65 },
66 {
67 title: 'Dinner',
68 start: '2023-01-12T20:00:00'
69 },
70 {
71 title: 'Birthday Party',
72 start: '2023-01-13T07:00:00'
73 },
74 {
75 title: 'Click for Google',
76 url: 'http://google.com/',
77 start: '2023-01-28'
78 }
79 ]
80 });
81
82 calendar.render();
83 });
84
85</script>
86<style>
87
88 body {
89 margin: 40px 10px;
90 padding: 0;
91 font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
92 font-size: 14px;
93 }
94
95 #calendar {
96 max-width: 1200px;
97 margin: 0 auto;
98 }
99
100</style>
101</head>
102<body>
103
104 <div id='calendar'></div>
105
106</body>
107</html>
diff --git a/public/js/fullcalendar/examples/natural-height.html b/public/js/fullcalendar/examples/natural-height.html
new file mode 100644
index 0000000..b62c41d
--- /dev/null
+++ b/public/js/fullcalendar/examples/natural-height.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 headerToolbar: {
15 left: 'prev,next today',
16 center: 'title',
17 right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
18 },
19 height: 'auto',
20 navLinks: true, // can click day/week names to navigate views
21 editable: true,
22 selectable: true,
23 selectMirror: true,
24 nowIndicator: true,
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>
diff --git a/public/js/fullcalendar/examples/selectable.html b/public/js/fullcalendar/examples/selectable.html
new file mode 100644
index 0000000..785e90e
--- /dev/null
+++ b/public/js/fullcalendar/examples/selectable.html
@@ -0,0 +1,123 @@
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: 'prev,next today',
14 center: 'title',
15 right: 'dayGridMonth,timeGridWeek,timeGridDay'
16 },
17 initialDate: '2023-01-12',
18 navLinks: true, // can click day/week names to navigate views
19 selectable: true,
20 selectMirror: true,
21 select: function(arg) {
22 var title = prompt('Event Title:');
23 if (title) {
24 calendar.addEvent({
25 title: title,
26 start: arg.start,
27 end: arg.end,
28 allDay: arg.allDay
29 })
30 }
31 calendar.unselect()
32 },
33 eventClick: function(arg) {
34 if (confirm('Are you sure you want to delete this event?')) {
35 arg.event.remove()
36 }
37 },
38 editable: true,
39 dayMaxEvents: true, // allow "more" link when too many events
40 events: [
41 {
42 title: 'All Day Event',
43 start: '2023-01-01'
44 },
45 {
46 title: 'Long Event',
47 start: '2023-01-07',
48 end: '2023-01-10'
49 },
50 {
51 groupId: 999,
52 title: 'Repeating Event',
53 start: '2023-01-09T16:00:00'
54 },
55 {
56 groupId: 999,
57 title: 'Repeating Event',
58 start: '2023-01-16T16:00:00'
59 },
60 {
61 title: 'Conference',
62 start: '2023-01-11',
63 end: '2023-01-13'
64 },
65 {
66 title: 'Meeting',
67 start: '2023-01-12T10:30:00',
68 end: '2023-01-12T12:30:00'
69 },
70 {
71 title: 'Lunch',
72 start: '2023-01-12T12:00:00'
73 },
74 {
75 title: 'Meeting',
76 start: '2023-01-12T14:30:00'
77 },
78 {
79 title: 'Happy Hour',
80 start: '2023-01-12T17:30:00'
81 },
82 {
83 title: 'Dinner',
84 start: '2023-01-12T20:00:00'
85 },
86 {
87 title: 'Birthday Party',
88 start: '2023-01-13T07:00:00'
89 },
90 {
91 title: 'Click for Google',
92 url: 'http://google.com/',
93 start: '2023-01-28'
94 }
95 ]
96 });
97
98 calendar.render();
99 });
100
101</script>
102<style>
103
104 body {
105 margin: 40px 10px;
106 padding: 0;
107 font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
108 font-size: 14px;
109 }
110
111 #calendar {
112 max-width: 1100px;
113 margin: 0 auto;
114 }
115
116</style>
117</head>
118<body>
119
120 <div id='calendar'></div>
121
122</body>
123</html>
diff --git a/public/js/fullcalendar/examples/timegrid-views-modal.html b/public/js/fullcalendar/examples/timegrid-views-modal.html
new file mode 100644
index 0000000..3b4a0fc
--- /dev/null
+++ b/public/js/fullcalendar/examples/timegrid-views-modal.html
@@ -0,0 +1,180 @@
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset='utf-8' />
5<script src='../dist/index.global.js'></script>
6<script>
7
8 /*
9 From https://github.com/fullcalendar/fullcalendar/issues/5026
10 */
11
12 document.addEventListener('DOMContentLoaded', function() {
13 var calendarOptions = {
14 initialDate: '2023-01-12',
15 initialView: 'timeGridWeek',
16 nowIndicator: true,
17 headerToolbar: {
18 left: 'prev,next today',
19 center: 'title',
20 right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
21 },
22 navLinks: true, // can click day/week names to navigate views
23 editable: true,
24 selectable: true,
25 selectMirror: true,
26 dayMaxEvents: true, // allow "more" link when too many events
27 events: [
28 {
29 title: 'All Day Event',
30 start: '2023-01-01',
31 },
32 {
33 title: 'Long Event',
34 start: '2023-01-07',
35 end: '2023-01-10'
36 },
37 {
38 groupId: 999,
39 title: 'Repeating Event',
40 start: '2023-01-09T16:00:00'
41 },
42 {
43 groupId: 999,
44 title: 'Repeating Event',
45 start: '2023-01-16T16:00:00'
46 },
47 {
48 title: 'Conference',
49 start: '2023-01-11',
50 end: '2023-01-13'
51 },
52 {
53 title: 'Meeting',
54 start: '2023-01-12T10:30:00',
55 end: '2023-01-12T12:30:00'
56 },
57 {
58 title: 'Lunch',
59 start: '2023-01-12T12:00:00'
60 },
61 {
62 title: 'Meeting',
63 start: '2023-01-12T14:30:00'
64 },
65 {
66 title: 'Happy Hour',
67 start: '2023-01-12T17:30:00'
68 },
69 {
70 title: 'Dinner',
71 start: '2023-01-12T20:00:00'
72 },
73 {
74 title: 'Birthday Party',
75 start: '2023-01-13T07:00:00'
76 },
77 {
78 title: 'Click for Google',
79 url: 'http://google.com/',
80 start: '2023-01-28'
81 }
82 ]
83 };
84
85 var calendar = new FullCalendar.Calendar(document.getElementById('calendar'), calendarOptions);
86 calendar.render();
87
88 var calendar2 = new FullCalendar.Calendar(document.getElementById('calendar2'), calendarOptions);
89 calendar2.render();
90
91 /*
92 Modal
93 */
94
95 var modal = document.querySelector('.modal');
96 var modalTrigger = document.querySelector('.modal-trigger');
97 var modalOverlay = document.querySelector('.modal-overlay');
98
99 modalTrigger.addEventListener('click', function() {
100 modal.classList.add('is-visible');
101 calendar2.updateSize();
102 });
103 modalOverlay.addEventListener('click', function() {
104 modal.classList.remove('is-visible');
105 });
106 });
107
108</script>
109<style>
110
111 body {
112 margin: 10px;
113 padding: 0;
114 font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
115 font-size: 14px;
116 }
117
118 #calendar {
119 max-width: 1100px;
120 margin: 0 auto;
121 }
122
123 .modal {
124 display: none;
125 position: absolute;
126 z-index: 10000;
127 top: 0;
128 left: 0;
129 width: 100%;
130 height: 100%;
131 }
132
133 .modal.is-visible {
134 display: block;
135 }
136
137 .modal-overlay {
138 position: fixed;
139 z-index: 10;
140 top: 0;
141 left: 0;
142 width: 100%;
143 height: 100%;
144 background: hsla(0, 0%, 0%, 0.5);
145 }
146
147 .modal-wrapper {
148 position: absolute;
149 z-index: 9999;
150 top: 6em;
151 left: 50%;
152 width: 600px;
153 margin-left: -16em;
154 background-color: #fff;
155 box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35);
156 }
157
158 .modal-content {
159 padding: 1em;
160 }
161
162</style>
163</head>
164<body>
165
166 <button class='modal-trigger'>Show modal</button>
167
168 <div id='calendar'></div>
169
170 <div class='modal'>
171 <div class='modal-overlay'></div>
172 <div class='modal-wrapper'>
173 <div class='modal-content'>
174 <div id='calendar2'></div>
175 </div>
176 </div>
177 </div>
178
179</body>
180</html>
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>
generated by cgit v1.2.3 (git 2.25.1) at 2025-08-19 13:35:18 +0000