diff options
| author | Friedrich Beckmann <friedrich.beckmann@gmx.de> | 2025-04-02 12:09:27 +0200 |
|---|---|---|
| committer | Friedrich Beckmann <friedrich.beckmann@gmx.de> | 2025-04-02 12:09:27 +0200 |
| commit | 9db92ff5476cb3599b71eb253fe6705a76dc1641 (patch) | |
| tree | 2607e4353b08cd33e38852a2688c620b8d429c9c /calendar/index.html | |
first
Diffstat (limited to 'calendar/index.html')
| -rw-r--r-- | calendar/index.html | 111 |
1 files changed, 111 insertions, 0 deletions
diff --git a/calendar/index.html b/calendar/index.html new file mode 100644 index 0000000..801e31b --- /dev/null +++ b/calendar/index.html @@ -0,0 +1,111 @@ +<!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"> + <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, + 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> |