Add Activity calendar and modify exam data to support calendar

cms/src/lib/components/ActivityCalendar.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
 	import FullCalendar from '$lib/components/FullCalendar.svelte';
 	import daygridPlugin from '@fullcalendar/daygrid';
-	// import timegridPlugin from '@fullcalendar/timegrid';
-	// import interactionPlugin from '@fullcalendar/interaction';
+	import type { EventClickArg } from '@fullcalendar/core';
+	import type {CalendarEvent} from './CalendarEvent'
 	let calendarRef;
-	export let events
-	export let options = {
+	export let events:CalendarEvent[]
+	let options = {
 		initialView: 'dayGridMonth',
 		plugins: [daygridPlugin],
 		locale: 'th',
@@ -23,9 +23,19 @@
         },
 		events,
 		dateClick: clickDate,
+		eventClick: clickEvent,
 	};
 	function clickDate(info: { dateStr: string; }){
 		alert('a day has been clicked!'+info.dateStr);
+	}
+	function clickEvent(info:EventClickArg){
+		alert(
+			'Event: ' + info.event.title +
+			'\nID: ' + info.event.id +
+			'\nCoordinates: ' + info.jsEvent.pageX + ',' + info.jsEvent.pageY + 
+			'\nView: ' + info.view.type
+		);
 	}	
 </script>
-<FullCalendar bind:this={calendarRef} {options} />
+<FullCalendar bind:this={calendarRef} {options} />
+

cms/src/lib/components/CalendarEvent.ts

@@ -0,0 +1,8 @@
+export interface CalendarEvent {
+    id:string;
+    title:string;
+    start:Date|string;
+    end?:Date|string;
+    url?:string;
+    backgroundColor?:string;
+}