今天要來實作前端基礎課表的元件，以供後續預排課表的功能使用~~
因為作者對前端實在不太熟，沒辦法直接把版面刻出來，好在現在元件發展很發達，而且網頁前端的樣式開個 F12 就可以偷了哈哈
meme
這邊參考的來源是 Tailwind UI 提供的 Weekly calendar
Tailwind UI Components Weekly calendar
不過當你開啟 F12 的時候你會發現，哭啊，class 竟然已經被 uglify 了，只好自己慢慢回溯旁邊的 styles 推測 Tailwind 的 class 了
Tailwind UI Components Weekly calendar F12
以下是最後推敲出來的課表，另外，筆者想要做到”自行更換顏色”的功能，但為了方便展示，所以 codepen 的示範程式碼沒有那麼完整
https://codepen.io/chinlinlee/pen/QWooKjL
pnpm i alpinejs
client/bundle/main.js 讓他 bundle AlpineJS 的程式碼import "htmx.org";
import Alpine from "alpinejs";
import { NtunhsCourseHubFns } from "../bundle/course-hub.js";
window.Alpine = Alpine;
// Start Alpine when the page is ready.
window.addEventListener("DOMContentLoaded", (event) => {
Alpine.start();
});
// Restart Alpine when the DOM is altered by HTMX.
document.body.addEventListener("htmx:afterSwap", () => {
Alpine.start();
});