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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Event Calendar</title>
<link rel="stylesheet" href="event-calendar.min.css">
<link rel="stylesheet" href="global.css">
<script src="event-calendar.min.js"></script>
<style>
.ec-timeline .ec-time, .ec-timeline .ec-line {
width: 80px;
}
</style>
</head>
<body>
<header class="row">
<h4 class="col"><a href="https://github.com/vkurko/calendar">Event Calendar</a> Demo</h4>
<button class="toggle-dark-button" title="Toggle dark mode" onclick="document.body.classList.toggle('ec-dark')">
<svg class="light" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg>
<svg class="dark" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg>
</button>
</header>
<main class="row">
<div id="ec" class="col"></div>
</main>
<script type="text/javascript">
const ec = new EventCalendar(document.getElementById('ec'), {
view: 'timeGridWeek',
headerToolbar: {
start: 'prev,next today',
center: 'title',
end: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek resourceTimeGridWeek,resourceTimelineWeek'
},
resources: [
{id: 1, title: 'Resource A'},
{id: 2, title: 'Resource B'}
],
scrollTime: '09:00:00',
events: createEvents(),
views: {
timeGridWeek: {pointer: true},
resourceTimeGridWeek: {pointer: true},
resourceTimelineWeek: {
pointer: true,
slotMinTime: '09:00',
slotMaxTime: '21:00',
slotWidth: 80,
resources: [
{id: 1, title: 'Resource A'},
{id: 2, title: 'Resource B'},
{id: 3, title: 'Resource C'},
{id: 4, title: 'Resource D'},
{id: 5, title: 'Resource E'},
{id: 6, title: 'Resource F'},
{id: 7, title: 'Resource G'},
{id: 8, title: 'Resource H'},
{id: 9, title: 'Resource I', children: [
{id: 10, title: 'Resource J'},
{id: 11, title: 'Resource K'},
{id: 12, title: 'Resource L', children: [
{id: 13, title: 'Resource M'},
{id: 14, title: 'Resource N'},
{id: 15, title: 'Resource O'}
]}
]}
]
}
},
dayMaxEvents: true,
nowIndicator: true,
firstDay: 1,
hiddenDays: [0,6],
selectable: true
});
function createEvents() {
let days = [];
for (let i = 0; i < 7; ++i) {
let day = new Date();
let diff = i - day.getDay();
day.setDate(day.getDate() + diff);
days[i] = day.getFullYear() + "-" + _pad(day.getMonth()+1) + "-" + _pad(day.getDate());
}
return [
{start: days[0] + " 00:00", end: days[0] + " 09:00", resourceId: 1, display: "background"},
{start: days[1] + " 12:00", end: days[1] + " 14:00", resourceId: 2, display: "background"},
{start: days[2] + " 17:00", end: days[2] + " 24:00", resourceId: 1, display: "background"},
{start: days[0] + " 10:00", end: days[0] + " 14:00", resourceId: 1, title: "The calendar can display background and regular events", color: "#FE6B64"},
{start: days[1] + " 16:00", end: days[2] + " 08:00", resourceId: 2, title: "An event may span to another day", color: "#B29DD9"},
{start: days[2] + " 09:00", end: days[2] + " 13:00", resourceId: 2, title: "Events can be assigned to resources and the calendar has the resources view built-in", color: "#779ECB"},
{start: days[3] + " 14:00", end: days[3] + " 20:00", resourceId: 1, title: "", color: "#FE6B64"},
{start: days[3] + " 15:00", end: days[3] + " 18:00", resourceId: 1, title: "Overlapping events are positioned properly", color: "#779ECB"},
{start: days[5] + " 10:00", end: days[5] + " 16:00", resourceId: 2, title: {html: "You have complete control over the <i><b>display</b></i> of events…"}, color: "#779ECB"},
{start: days[5] + " 14:00", end: days[5] + " 19:00", resourceId: 2, title: "…and you can drag and drop the events!", color: "#FE6B64"},
{start: days[5] + " 18:00", end: days[5] + " 21:00", resourceId: 2, title: "", color: "#B29DD9"},
{start: days[1], end: days[3], resourceId: 1, title: "All-day events can be displayed at the top", color: "#B29DD9", allDay: true}
];
}
function _pad(num) {
let norm = Math.floor(Math.abs(num));
return (norm < 10 ? '0' : '') + norm;
}
</script>
</body>
</html>
|
