课程表界面预览

app/course/course.php

@@ -13,6 +13,81 @@ include "../pcdl/html_head.php";
         height:100%;
     }
 </style>
+<link href='../lib/main.css' rel='stylesheet' />
+<script src='../lib/main.js'></script>
+<script>
+
+  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,
+      headerToolbar: {
+        left: 'prev,next today',
+        center: 'title',
+        right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
+      },
+      initialDate: '2020-09-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
+        }
+      },
+      loading: function(bool) {
+        if (bool) {
+          loadingEl.style.display = 'inline'; // show
+        } else {
+          loadingEl.style.display = 'none'; // hide
+        }
+      },
+
+      eventTimeFormat: { hour: 'numeric', minute: '2-digit', timeZoneName: 'short' },
+
+      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>
+
+
 <?php
 //
 
@@ -48,7 +123,6 @@ echo '<button>'.$_local->gui->sign_up.'</button>';
 echo '<button>'.$_local->gui->share.'</button></div>';
 echo "</div>";
 echo '</div>';
-
 echo "<div  class='index_inner'>";
 
 echo '<div class="card" style="margin:1em;padding:10px;">';

app/lib/fullcalendar/examples/json/events.json

@@ -1,56 +1,38 @@
 [
-  {
-    "title": "All Day Event",
-    "start": "2020-09-01"
-  },
-  {
-    "title": "Long Event",
-    "start": "2020-09-07",
-    "end": "2020-09-10"
-  },
-  {
-    "id": "999",
-    "title": "Repeating Event",
-    "start": "2020-09-09T16:00:00-05:00"
-  },
-  {
-    "id": "999",
-    "title": "Repeating Event",
-    "start": "2020-09-16T16:00:00-05:00"
-  },
-  {
-    "title": "Conference",
-    "start": "2020-09-11",
-    "end": "2020-09-13"
-  },
-  {
-    "title": "Meeting",
-    "start": "2020-09-12T10:30:00-05:00",
-    "end": "2020-09-12T12:30:00-05:00"
-  },
-  {
-    "title": "Lunch",
-    "start": "2020-09-12T12:00:00-05:00"
-  },
-  {
-    "title": "Meeting",
-    "start": "2020-09-12T14:30:00-05:00"
-  },
-  {
-    "title": "Happy Hour",
-    "start": "2020-09-12T17:30:00-05:00"
-  },
-  {
-    "title": "Dinner",
-    "start": "2020-09-12T20:00:00"
-  },
-  {
-    "title": "Birthday Party",
-    "start": "2020-09-13T07:00:00-05:00"
-  },
-  {
-    "title": "Click for Google",
-    "url": "http://google.com/",
-    "start": "2020-09-28"
-  }
+	{
+		"id": "999",
+		"title": "Dhammacakkha",
+		"start": "2020-12-06T20:30:00-05:00",
+		"end": "2020-12-06T22:00:00-05:00"
+	},
+	{
+		"id": "999",
+		"title": "Dhammacakkha",
+		"start": "2020-12-07T20:30:00-05:00",
+		"end": "2020-12-07T22:00:00-05:00"
+	},
+	{
+		"id": "999",
+		"title": "Dhammacakkha",
+		"start": "2020-12-10T20:30:00-05:00",
+		"end": "2020-12-10T22:00:00-05:00"
+	},
+	{
+		"id": "1000",
+		"title": "NGPP",
+		"start": "2020-12-07T2:30:00-05:00",
+		"end": "2020-12-07T4:00:00-05:00"
+	},
+	{
+		"id": "1000",
+		"title": "NGPP",
+		"start": "2020-12-10T2:30:00-05:00",
+		"end": "2020-12-10T4:00:00-05:00"
+	},
+	{
+		"id": "1000",
+		"title": "NGPP",
+		"start": "2020-12-11T2:30:00-05:00",
+		"end": "2020-12-11T4:00:00-05:00"
+	}
 ]

app/lib/fullcalendar/examples/time-zones.html

@@ -1,137 +1,147 @@
 <!DOCTYPE html>
 <html>
-<head>
-<meta charset='utf-8' />
-<link href='../lib/main.css' rel='stylesheet' />
-<script src='../lib/main.js'></script>
-<script>
-
-  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,
-      headerToolbar: {
-        left: 'prev,next today',
-        center: 'title',
-        right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
-      },
-      initialDate: '2020-09-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
-        }
-      },
-      loading: function(bool) {
-        if (bool) {
-          loadingEl.style.display = 'inline'; // show
-        } else {
-          loadingEl.style.display = 'none'; // hide
-        }
-      },
-
-      eventTimeFormat: { hour: 'numeric', minute: '2-digit', timeZoneName: 'short' },
-
-      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>
+	<head>
+		<meta charset="utf-8" />
+		<link href="../lib/main.css" rel="stylesheet" />
+		<script src="../lib/main.js"></script>
+		<script>
+			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,
+					headerToolbar: {
+						left: "prev,next today",
+						center: "title",
+						right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek",
+					},
+					initialDate: "2020-12-07",
+					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
+						},
+					},
+					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>

app/uhome/course.php

@@ -24,7 +24,7 @@ include "../pcdl/html_head.php";
     },
     function(data,status){
         let arrData = JSON.parse(data);
-        let html="";
+        let html='<iframe style="width: 100%;height: 60vh;" src="../lib/fullcalendar/examples/time-zones.html"></iframe>';
         for (const iterator of arrData) {
             html += '<div class="card" style="display:flex;margin:1em;padding:10px;">';