hrms-exam/cms/src/routes/competitive/+page.svelte

<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';

	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>