-
Notifications
You must be signed in to change notification settings - Fork 233
/
resource-grouping.html
97 lines (88 loc) · 3.7 KB
/
resource-grouping.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<script src='../dist/index.global.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialDate: '2023-01-07',
editable: true,
selectable: true,
nowIndicator: true,
aspectRatio: 1.8,
scrollTime: '00:00',
headerToolbar: {
left: 'today prev,next',
center: 'title',
right: 'resourceTimelineDay,resourceTimelineThreeDays,timeGridWeek,dayGridMonth'
},
initialView: 'resourceTimelineDay',
views: {
resourceTimelineThreeDays: {
type: 'resourceTimeline',
duration: { days: 3 },
buttonText: '3 days'
}
},
resourceGroupField: 'building',
resources: [
{ id: 'a', building: '460 Bryant', title: 'Auditorium A' },
{ id: 'b', building: '460 Bryant', title: 'Auditorium B', eventColor: 'green' },
{ id: 'c', building: '460 Bryant', title: 'Auditorium C', eventColor: 'orange' },
{ id: 'd', building: '460 Bryant', title: 'Auditorium D', children: [
{ id: 'd1', title: 'Room D1', occupancy: 10 },
{ id: 'd2', title: 'Room D2', occupancy: 10 }
] },
{ id: 'e', building: '460 Bryant', title: 'Auditorium E' },
{ id: 'f', building: '460 Bryant', title: 'Auditorium F', eventColor: 'red' },
{ id: 'g', building: '564 Pacific', title: 'Auditorium G' },
{ id: 'h', building: '564 Pacific', title: 'Auditorium H' },
{ id: 'i', building: '564 Pacific', title: 'Auditorium I' },
{ id: 'j', building: '564 Pacific', title: 'Auditorium J' },
{ id: 'k', building: '564 Pacific', title: 'Auditorium K' },
{ id: 'l', building: '564 Pacific', title: 'Auditorium L' },
{ id: 'm', building: '564 Pacific', title: 'Auditorium M' },
{ id: 'n', building: '564 Pacific', title: 'Auditorium N' },
{ id: 'o', building: '564 Pacific', title: 'Auditorium O' },
{ id: 'p', building: '564 Pacific', title: 'Auditorium P' },
{ id: 'q', building: '564 Pacific', title: 'Auditorium Q' },
{ id: 'r', building: '564 Pacific', title: 'Auditorium R' },
{ id: 's', building: '564 Pacific', title: 'Auditorium S' },
{ id: 't', building: '564 Pacific', title: 'Auditorium T' },
{ id: 'u', building: '564 Pacific', title: 'Auditorium U' },
{ id: 'v', building: '564 Pacific', title: 'Auditorium V' },
{ id: 'w', building: '564 Pacific', title: 'Auditorium W' },
{ id: 'x', building: '564 Pacific', title: 'Auditorium X' },
{ id: 'y', building: '564 Pacific', title: 'Auditorium Y' },
{ id: 'z', building: '564 Pacific', title: 'Auditorium Z' }
],
events: [
{ id: '1', resourceId: 'b', start: '2023-01-07T02:00:00', end: '2023-01-07T07:00:00', title: 'event 1' },
{ id: '2', resourceId: 'c', start: '2023-01-07T05:00:00', end: '2023-01-07T22:00:00', title: 'event 2' },
{ id: '3', resourceId: 'd', start: '2023-01-06', end: '2023-01-08', title: 'event 3' },
{ id: '4', resourceId: 'e', start: '2023-01-07T03:00:00', end: '2023-01-07T08:00:00', title: 'event 4' },
{ id: '5', resourceId: 'f', start: '2023-01-07T00:30:00', end: '2023-01-07T02:30:00', title: 'event 5' }
]
});
calendar.render();
});
</script>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
font-size: 14px;
}
#calendar {
max-width: 1100px;
margin: 50px auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>