Test new Activity Calendar and add sub page

cms/src/routes/+page.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import type { PageData } from './$types';
 	export let data: PageData;
-	//import events from "$lib/data/activities_events.json"
 	const qualify_exams = data.qualify_exams;
     const competitive_exams = data.competitive_exams;
     const detail = data.detail;
@@ -12,51 +11,7 @@
 	const com1 = "/images/com1.jpg";
 	const com2 = "/images/com2.jpg";
 	const com3 = "/images/com3.jpg";
-	/* import FullCalendar from '$lib/components/FullCalendar.svelte';
-	import daygridPlugin from '@fullcalendar/daygrid';
-	import interactionPlugin from '@fullcalendar/interaction';
-	import type { EventClickArg } from '@fullcalendar/core';
-	let calendarRef;
-	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
-		);
 
-		// change the border color just for fun
-		info.el.style.borderColor = 'red';
-
-	}
-	let options = {
-		initialView: 'dayGridMonth',
-		plugins: [daygridPlugin,interactionPlugin],
-		locale: 'th',
-        headerToolbar: {
-			start: 'prev,next',
-			center: 'title'
-		},
-        contentHeight:"auto",
-        selectable: true,
-        buttonText: {
-            month: 'เดือน', 
-            agendaDay: 'วัน', 
-            agendaWeek: 'สัปดาห์', 
-            today: 'วันนี้'
-        },
-		events:[
-			{ "id": "1","title": "ทำความสะอาด", "start": new Date()  },
-			{ "id": "2","title": "กิจกรรมบางอย่าง", "start": "2023-03-28"  },
-			{ "id": "3", "start": "2023-03-08T13:00:00", "end": "2023-03-10T12:00:00", "title": "ค่ายรักการอ่าน" }
-		],
-		dateClick: clickDate,
-		eventClick: clickEvent,
-	}; */
-	
 </script>
 <section class="header relative items-start mt-12 flex max-h-860-px">
     <div class="container mx-auto items-start flex flex-wrap">

cms/src/routes/qualifying/+page.svelte

@@ -1,11 +1,17 @@
 <script lang="ts">
+	import ActivityCalendar from '$lib/components/ActivityCalendar.svelte'
     import type { PageData } from './$types'
     export let data: PageData;
 	const exams = data.exams
+	const events = data.events
 </script>
 
-<section class="items-start h-screen flex max-h-860-px pt-10  bg-blueGray-100">
-    <div class="container mx-auto items-start flex flex-wrap px-4">
+<div class="x">
+	<ActivityCalendar {events} />
+</div>
+<section class="items-start h-screen flex max-h-1000-px pt-10  bg-blueGray-100">
+
+	<div class="container mx-auto items-start flex flex-wrap px-4">
 		<h2 class="font-semibold text-2xl text-blueGray-600 mb-4">
 			การสอบคัดเลือก
 		</h2>
@@ -44,4 +50,6 @@
 			</div>
 		</div>
 	</div>
-</section>
+
+</section>
+

cms/src/routes/qualifying/[id]/+page.server.ts

@@ -0,0 +1,7 @@
+
+import type { PageServerLoad } from './$types'
+export const load: PageServerLoad = async ({params}) => {
+    const id = params.id
+    return {id}
+}
+