|
|
@@ -0,0 +1,168 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html>
|
|
|
+ <head>
|
|
|
+ <meta charset="utf-8" />
|
|
|
+ <link href="../lib/main.css" rel="stylesheet" />
|
|
|
+ <script src="../lib/main.js"></script>
|
|
|
+ <script>
|
|
|
+ function getCookie(name) {
|
|
|
+ var start = document.cookie.indexOf(name + "=");
|
|
|
+ var len = start + name.length + 1;
|
|
|
+ if (!start && name != document.cookie.substring(0, name.length)) {
|
|
|
+ return null;
|
|
|
+ }
|
|
|
+ if (start == -1) return null;
|
|
|
+ var end = document.cookie.indexOf(";", len);
|
|
|
+ if (end == -1) end = document.cookie.length;
|
|
|
+ return decodeURI(document.cookie.substring(len, end));
|
|
|
+ }
|
|
|
+
|
|
|
+ document.addEventListener("DOMContentLoaded", function () {
|
|
|
+ var initialTimeZone = "local";
|
|
|
+ var timeZoneSelectorEl = document.getElementById("time-zone-selector");
|
|
|
+ var loadingEl = document.getElementById("loading");
|
|
|
+ var calendarEl = document.getElementById("calendar");
|
|
|
+
|
|
|
+ var calendar = new FullCalendar.Calendar(calendarEl, {
|
|
|
+ timeZone: initialTimeZone,
|
|
|
+ locale: getCookie("language"),
|
|
|
+ headerToolbar: {
|
|
|
+ left: "prev,next today",
|
|
|
+ center: "title",
|
|
|
+ right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek",
|
|
|
+ },
|
|
|
+ //initialDate: "2020-12-12",
|
|
|
+ navLinks: true, // can click day/week names to navigate views
|
|
|
+ editable: true,
|
|
|
+ selectable: true,
|
|
|
+ dayMaxEvents: true, // allow "more" link when too many events
|
|
|
+ events: {
|
|
|
+ url: "php/get-events.php",
|
|
|
+ failure: function () {
|
|
|
+ document.getElementById("script-warning").style.display = "inline"; // show
|
|
|
+ },
|
|
|
+ },
|
|
|
+ eventClick: function (info) {
|
|
|
+ info.jsEvent.preventDefault(); // don't let the browser navigate
|
|
|
+
|
|
|
+ if (info.event.url) {
|
|
|
+ window.open(info.event.url);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ loading: function (bool) {
|
|
|
+ if (bool) {
|
|
|
+ loadingEl.style.display = "inline"; // show
|
|
|
+ } else {
|
|
|
+ loadingEl.style.display = "none"; // hide
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ eventTimeFormat: { hour: "numeric", minute: "2-digit" },
|
|
|
+
|
|
|
+ dateClick: function (arg) {
|
|
|
+ console.log("dateClick", calendar.formatIso(arg.date));
|
|
|
+ },
|
|
|
+ select: function (arg) {
|
|
|
+ console.log("select", calendar.formatIso(arg.start), calendar.formatIso(arg.end));
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ calendar.render();
|
|
|
+
|
|
|
+ // load the list of available timezones, build the <select> options
|
|
|
+ // it's HIGHLY recommended to use a different library for network requests, not this internal util func
|
|
|
+ FullCalendar.requestJson(
|
|
|
+ "GET",
|
|
|
+ "php/get-time-zones.php",
|
|
|
+ {},
|
|
|
+ function (timeZones) {
|
|
|
+ timeZones.forEach(function (timeZone) {
|
|
|
+ var optionEl;
|
|
|
+
|
|
|
+ if (timeZone !== "UTC") {
|
|
|
+ // UTC is already in the list
|
|
|
+ optionEl = document.createElement("option");
|
|
|
+ optionEl.value = timeZone;
|
|
|
+ optionEl.innerText = timeZone;
|
|
|
+ timeZoneSelectorEl.appendChild(optionEl);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ function () {
|
|
|
+ // TODO: handle error
|
|
|
+ }
|
|
|
+ );
|
|
|
+
|
|
|
+ // when the timezone selector changes, dynamically change the calendar option
|
|
|
+ timeZoneSelectorEl.addEventListener("change", function () {
|
|
|
+ calendar.setOption("timeZone", this.value);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ </script>
|
|
|
+ <style>
|
|
|
+ body {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ #top {
|
|
|
+ background: #eee;
|
|
|
+ border-bottom: 1px solid #ddd;
|
|
|
+ padding: 0 10px;
|
|
|
+ line-height: 40px;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ .left {
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+ .clear {
|
|
|
+ clear: both;
|
|
|
+ }
|
|
|
+
|
|
|
+ #script-warning,
|
|
|
+ #loading {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ #script-warning {
|
|
|
+ font-weight: bold;
|
|
|
+ color: red;
|
|
|
+ }
|
|
|
+
|
|
|
+ #calendar {
|
|
|
+ max-width: 1100px;
|
|
|
+ margin: 40px auto;
|
|
|
+ padding: 0 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tzo {
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <div id="top">
|
|
|
+ <div class="left">
|
|
|
+ Timezone:
|
|
|
+ <select id="time-zone-selector">
|
|
|
+ <option value="local" selected>local</option>
|
|
|
+ <option value="UTC">UTC</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="right">
|
|
|
+ <span id="loading">loading...</span>
|
|
|
+ <span id="script-warning"><code>php/get-events.php</code> must be running.</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="clear"></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div id="calendar"></div>
|
|
|
+ </body>
|
|
|
+</html>
|
Bhikkhu-Kosalla