add 3 demo calendar

cms/src/routes/+layout.svelte

@@ -4,7 +4,7 @@
 </script>
 
 <Header />
-<div class="p-10 max-w-4xl place-content-center ">
+<div class="p-5 max-w-4xl place-content-center ">
     <div>
         <slot />
     </div>  

cms/src/routes/about/+page.server.ts

@@ -7,5 +7,5 @@ export const load: PageServerLoad = async () => {
 }*/
 
 export const load  = (async () => {
-    return getContact()
+    return await getContact()
 }) satisfies PageServerLoad

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

@@ -1,15 +1,54 @@
 <script lang="ts">
-    import type { PageData } from './$types'
+	import 'dayjs/locale/th.js';
+	import 'dayjs/locale/zh-cn.js';
+	import 'dayjs/locale/es.js';
+	import 'dayjs/locale/ar-dz.js';
+	// มันรองรับ พ.ศ. ใน dayjs แต่ใน velte-calendar ไม่ได้เอาไปใช้ ยังหาวิธีแก้หัวปฎิทินไม่ได้ยังเป็น พ.ศ. 
+	import buddhistEra from 'dayjs/plugin/buddhistEra' 
+	import dayjs from 'dayjs';
+	dayjs.extend(buddhistEra)
+	import { InlineCalendar, Swappable, themes } from 'svelte-calendar';
+	import { onDestroy } from 'svelte';
+	const locales = ['th','en', 'es', 'zh-cn', 'ar-dz'];
+	$: dayjs.locale(locale);
+	onDestroy(() => dayjs.locale('en'));
+
+    import Calendar2 from '$lib/components/Calendar2/Calendar.svelte';
+    import Calendar from '$lib/components/Calendar/Calendar.svelte';
+	const today = new Date
+    const locale = "th"
+	const buddhist = true //buddhist calendar + 543 	
+    let year = today.getFullYear()
+	let month = today.getMonth()
+
     import ver from "$lib/ver.json"
+    import type { PageData } from './$types'
     export let data: PageData;
+
 </script>
-
-<h1 class="text-4xl">{data.company_name}</h1>
-
+<h1 class="text-4xl">เกี่ยวกับ {data.company_name}</h1>
 <div>{data.description}</div>
 <div>{ver.version}</div>
 <div>{ver.builddate}</div>
 
+<h2 class="text-2xl">svelte-calendar</h2>
+<p>3rd svelte-calendar ไม่รองรับ พ.ศ.</p>
+<!-- note: Locale is not reactive -->
+<Swappable value={{ locale }} vertical={false}  >
+	<InlineCalendar theme={themes.light} />
+</Swappable>
+
+<h2 class="text-2xl">Custom Calendar1</h2>
+<div>
+	Calendar ทำเองยังไม่รองรับการแสดง event ในวัน
+</div>
+<Calendar {year} {month} {locale} {buddhist}/>
+
+<h2 class="text-2xl">Custom Calendar2</h2>
+<div>
+	ทำเองรองรับการแสดง event และคลิ้กได้ ได้แต่ยังปรับโค้ดไม่เรียบร้อย
+</div>
+<Calendar2 {locale} {buddhist} />
 
 
 

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

@@ -1,7 +1,35 @@
-<h1 class="text-4xl">การสอบแข่งขัน</h1>
+<script lang="ts">
+	import 'dayjs/locale/th.js';
+	import 'dayjs/locale/zh-cn.js';
+	import 'dayjs/locale/es.js';
+	import 'dayjs/locale/ar-dz.js';
+	// มันรองรับ พ.ศ. ใน dayjs แต่ใน velte-calendar ไม่ได้เอาไปใช้ ยังหาวิธีแก้หัวปฎิทินไม่ได้ยังเป็น พ.ศ. 
+	import buddhistEra from 'dayjs/plugin/buddhistEra' 
+	import dayjs from 'dayjs';
+	dayjs.extend(buddhistEra)
+	import { InlineCalendar, Swappable, themes } from 'svelte-calendar';
+	import { onDestroy } from 'svelte';
 
-fdsafda 
-fdsafda sdaf 
- sdaffsdasaf    rfffffffffffffffff fffffffffffffffffffffffff ffffffffffff fgedfgfdgfdsg
- fedsddddddddddddd  ddddddddddddddd ddddddddd d d d d d d d d d d d d xxxx
- 
+	const locales = ['th','en', 'es', 'zh-cn', 'ar-dz'];
+	let format = 'DD/MM/BBBB'
+	let locale = 'th';
+
+	$: dayjs.locale(locale);
+
+	onDestroy(() => dayjs.locale('en'));
+</script>
+
+
+<h1 class="text-4xl">การสอบแข่งขัน</h1>
+<!-- note: Locale is not reactive -->
+<Swappable value={{ locale }} vertical={false}  >
+	<InlineCalendar theme={themes.light} {format} />
+</Swappable>
+
+<div class="button-group">
+	{#each locales as loc}
+		<button on:click={() => (locale = loc)} class:selected={locale === loc}>
+			{loc} 
+		</button> | 
+	{/each}
+</div>

cms/src/routes/qualifying/+page.server.ts

@@ -0,0 +1,8 @@
+
+import {getExams} from "$lib/data/qualify-exam"
+import type { PageServerLoad } from './$types'
+export const load: PageServerLoad = async () => {
+    const exams = await getExams() 
+    return {exams}
+}
+

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

@@ -1,6 +1,28 @@
+<script lang="ts">
+    import type { PageData } from './$types'
+    export let data: PageData;
+	const exams = data.exams
+</script>
+
 <h1 class="text-4xl">การสอบคัดเลือก</h1>
 
-<button class="btn btn-outline">Button</button>
-<button class="btn btn-outline btn-primary">Button</button>
-<button class="btn btn-outline btn-secondary">Button</button>
-
+้<h1  class="text-2xl">รายการสอบ</h1>
+<div class="overflow-x-auto">
+	<table class="table table-compact w-full">
+	  <thead>
+		<tr>
+		  <th>วันที่</th> 
+		  <th>การสอบ</th> 
+		  <th>หน่วยงาน</th> 
+		</tr>
+	  </thead> 
+	  <tbody>
+		{#each exams as exam}
+		<tr>
+		  <th><a href={"/exams/"+exam.id}>{exam.date}</a></th> 
+		  <td>{exam.detail}</td> 
+		  <td>{exam.institute}</td> 
+		{/each}
+	  </tbody> 
+	</table>
+  </div>