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

<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;
	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';
	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>
<h1 class="p-5 text-center text-orange-800">กองสรรหาบุคคล</h1>

<div class="w-full flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0" >
	<div class="md:w-2/5 lg:w-2/5 px-3">
		<FullCalendar bind:this={calendarRef} {options} />
	</div>
	<di class="md:w-3/5 lg:w-3/5 px-3">
		{@html detail}
	</di>
</div>
<div class="p-5">
	<h2 class="text-2xl">ประกาศเกี่ยวกับการคัดเลือก</h2>
	<table class="table table-compact w-full">
		<thead>
			<tr>
				<th>วันที่</th>
				<th>การสอบ</th>
				<th>หน่วยงาน</th>
			</tr>
		</thead>
		<tbody>
			{#each qualify_exams as exam}
				<tr>
					<th><a href={'/qualify_exams/' + exam.id}>{exam.date}</a></th>
					<td>{exam.detail}</td>
					<td>{exam.institute}</td>
				</tr>{/each}
		</tbody>
	</table>
</div>
<div class="p-5">
	<h2 class="text-2xl">ประกาศเกี่ยวกับการสอบแข่งขัน</h2>
	<table class="table table-compact w-full">
		<thead>
			<tr>
				<th>วันที่</th>
				<th>การสอบ</th>
			</tr>
		</thead>
		<tbody>
			{#each competitive_exams as exam}
				<tr>
					<th><a href={'/competitive_exams/' + exam.id}>{exam.date}</a></th>
					<td>{exam.detail}</td>
				</tr>{/each}
		</tbody>
	</table>
</div>

้
<div class="px-5">
	<h2>Full Size Calendar</h2>
	<FullCalendar bind:this={calendarRef} {options} />
</div>