Update and clean code

cms/src/lib/components/ActivityCalendar.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import FullCalendar from '$lib/components/FullCalendar.svelte';
+	import daygridPlugin from '@fullcalendar/daygrid';
+	// import timegridPlugin from '@fullcalendar/timegrid';
+	// import interactionPlugin from '@fullcalendar/interaction';
+	let calendarRef;
+	export let events
+	export let options = {
+		initialView: 'dayGridMonth',
+		plugins: [daygridPlugin],
+		locale: 'th',
+        headerToolbar: {
+			start: 'prev,next',
+			center: 'title'
+		},
+        contentHeight:"auto",
+        selectable: true,
+        buttonText: {
+            month: 'เดือน', 
+            agendaDay: 'วัน', 
+            agendaWeek: 'สัปดาห์', 
+            today: 'วันนี้'
+        },
+		events,
+		dateClick: clickDate,
+	};
+	function clickDate(info: { dateStr: string; }){
+		alert('a day has been clicked!'+info.dateStr);
+	}	
+</script>
+<FullCalendar bind:this={calendarRef} {options} />

cms/src/lib/components/FullCalendar.svelte

@@ -0,0 +1,55 @@
+
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { Calendar } from '@fullcalendar/core';
+	import type { CalendarOptions } from '@fullcalendar/core';
+
+	let classes: string | null = null;
+
+	export { classes as class };
+
+	export let style: string | null = null;
+
+	export let options: CalendarOptions;
+
+	export function getAPI() {
+		return calendar;
+	}
+
+	let calendarEl: HTMLElement;
+	let calendar: Calendar;
+
+	onMount(async () => {
+		if (!canBeInitiated) return;
+
+		initCalendar();
+
+		return () => {
+			calendar && calendar.destroy();
+		};
+	});
+
+	$: canBeInitiated =
+		options && options.plugins && options.plugins.length && calendarEl && !calendar;
+
+	$: {
+		if (calendar && options && options.plugins && options.plugins.length) updateCalendarOptions();
+
+		if (canBeInitiated) {
+			initCalendar();
+		}
+	}
+
+	function initCalendar() {
+		calendar = new Calendar(calendarEl, options);
+		calendar.render();
+	}
+
+	function updateCalendarOptions() {
+		calendar.pauseRendering();
+		calendar.resetOptions(options);
+		calendar.resumeRendering();
+	}
+</script>
+
+<div bind:this={calendarEl} class={classes} {style} />

cms/src/lib/components/Header.svelte

@@ -14,9 +14,9 @@
         <li><a href="/about">เกี่ยวกับเรา</a></li>
       </ul>
     </div>
-    <a class="btn btn-ghost normal-case text-xl" 
+    <a  
     href="https://webportal.bangkok.go.th/KSB/page/top/1119/%E0%B8%81%E0%B8%AD%E0%B8%87%E0%B8%AA%E0%B8%A3%E0%B8%A3%E0%B8%AB%E0%B8%B2%E0%B8%9A%E0%B8%B8%E0%B8%84%E0%B8%84%E0%B8%A5">
-      กองสรรหา
+      <img src="images/logo.jpg" alt="logo">
     </a>
   </div>
   <div class="navbar-center hidden lg:flex">
@@ -28,6 +28,6 @@
     </ul>
   </div>
   <div class="navbar-end">
-    <a class="btn" href="/">เข้าสู่ระบบ</a>
+    
   </div>
 </div>