add 3 demo calendar

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>