倒數2天，把握時間繼續努力！

製作月曆元件

昨天製作了顧客視角的服務項目詳細頁後，今天依照原先的 Wireflame 設計線稿，刻出可供預約的日期時段區塊，這部分有另外拉出去做 component，為的是在預約表單的頁面也能重複使用。可以先看一下畫面(左邊為線稿、右邊則為目前畫面截圖)：

本想將可預約日期加上 icon 標示，實際做出來後覺得好像設計反了，因為這樣會讓使用者不清楚可預約的日期到底是幾號，所以這部分邏輯就顛倒過來，將不可預約的日期以淺灰色的 icon 標示，較可讓使用者一眼就知道還剩幾號是可供預約的。

1. 使用 <Table> 手刻

<thead> 拿來做星期的標示，個人偏愛從星期一開始。

<table>
    <thead>
        <tr>
            <th>一</th>
            <th>二</th>
            <th>三</th>
            <th>四</th>
            <th>五</th>
            <th>六</th>
            <th>日</th>
        </tr>
    </thead>
</table>

tbody 裡則是使用一行一行的 <tr> 來渲染每周、 <tr> 裡的 <td> 當然就是以7個為一組。

<table>
    <tbody>
        <tr>
            <td>x</td>
            <td>3</td>
            <td>x</td>
            <td>x</td>
            <td>6</td>
            <td>x</td>
            <td>x</td>
        </tr>
    </tbody>
</table>

2. 整理可供預約日期資料
   因為在服務項目裡，僅在資料庫中存入可供預約的日期與時段、與曾經可預約但已被預約的日期時段，所以需要手動整理資料。分別依序如下：

• 將當月日期列成一個陣列，每個日期都是一個 object
• 每個日期中的 object 都有日期和是否還可預約的欄位
• 將可供預約日期從陣列中 map 後，在是否還可預約的欄位中，將值顯示為 true
• 如果是可供預約的日期，就將日期內的時段陣列也加入其 object 的時段欄位中，該時段欄位也是陣列再包 object ，放入時段的值與可否預約的布林值

整體大約會像這樣：

const data = [
    {
     date: 1, 
     isEnabled: true, 
     period: [
        { time: "09:00~12:00", isEnabled: false},
        { time: "14:00~17:00", isEnabled: true},
        { time: "19:00~22:00", isEnabled: true}
      ]
    },
    {
     date: 2, 
     isEnabled: false
    },
    // 以此類推後續日期
];

3. 將資料渲染至表格內

• 使用迴圈將每7個換行(即一個 <tr>)、並將每天都塞入 <td> 裡
• 使用每天的可否預約決定渲染什麼內容：如果是可預約的就以粗體黑色渲染該日日期，不可預約則渲染灰字 icon 標示(同時加上 cursor 的變化)
• 在可預約的日期 <td> 上，添加 onClick 監聽事件，若點選就在整個月曆表格下方顯示當日可供預約的時段
• 顯示時段區區塊也是 component，可預約與不可預約的顯示效果亦不同