summaryrefslogtreecommitdiff
path: root/public/js/fullcalendar/examples/selectable.html
diff options
context:
space:
mode:
Diffstat (limited to 'public/js/fullcalendar/examples/selectable.html')
-rw-r--r--public/js/fullcalendar/examples/selectable.html123
1 files changed, 123 insertions, 0 deletions
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>