[C# ASP.NET]WebForm自定義月曆上預約行程的實現方法

    　工作上有需求要做類似在月曆上預約行程的功能，所以簡單做了一個陽春版的月曆來用。
主要是利用.aspx檔的嵌入式程式碼來繪製HTML。

首先在前端也就是aspx檔放上以下程式碼

<!--上方Div放入下拉式年月選單-->
<div >
    <asp:DropDownList ID="DDL_Year" runat="server"></asp:DropDownList>
    <asp:DropDownList ID="DDL_Mouth" runat="server"></asp:DropDownList>
</div>
<!--下方Div放入月曆區塊-->
<div>
    <table class="FormStyle">
        <tr>
            <td>日</td>
            <td>一</td>
            <td>二</td>
            <td>三</td>
            <td>四</td>
            <td>五</td>
            <td>六</td>
        </tr>
        <!--嵌入式程式碼位置(傳入參數分別是目前所選的年和月)-->
        <% Response.Write(ShowCalendar(DDL_Year.SelectedValue, DDL_Mouth.SelectedValue)); %>
    </table>
</div>

再來在後置程式碼也就是cs檔上補上呼叫的函式

/// <summary>
/// 顯示月曆程式碼
/// </summary>
/// <param name="StrYear">目前所選年</param>
/// <param name="StrMouth">目前所選月</param>
/// <returns>HTML語法</returns>
protected string ShowCalendar(string StrYear, string StrMouth)
{
    //回傳的HTML語法
    string StrHTML = "";

    //傳入年月的開始日
    DateTime StartDate = Convert.ToDateTime(StrYear + "/" + StrMouth + "/01");
    //開始日的星期值
    int iStartWeek = Convert.ToInt16(StartDate.DayOfWeek);

    //傳入年月的該月天數
    int iDay = StartDate.AddMonths(1).AddDays(-1).Day;
    //定義暫存星期參數 0代表這月曆重從禮拜日開始
    int iWeekTemp = 0;
   
    //傳入年月從第一天開始跑到最後一天
    for (int i = 1; i <= iDay; i++)
    {
        //每個禮拜日往下新增一行
        if (iWeekTemp == 0) StrHTML += "<tr>";
       
        //第一天特別處理(因為要補上上個月的空白格數)
        if (i == 1)
        {
            //補空格到 暫存星期參數 等於 開始日的星期數之前
            while (iWeekTemp < iStartWeek)
            {
                StrHTML += "<td></td>";
                iWeekTemp++;
            }
        }
       
        StrHTML += "<td width=\"14%\">";
        //月曆上的格子加上該月日期
        StrHTML += "<span><font>" + i.ToString().PadLeft(2,'0') + "</font></span><br />";

        //這邊可以從資料庫上的資料來加上已預約的行程(這邊只寫個範例)
        StrHTML += "<p style=\"background-color:#ffffe0;\">已預約:18:00~22:00</p>";
       
        //今天之前的日期不顯示預約連結
        if (Convert.ToDateTime(StrYear + "/" + StrMouth + "/" + i.ToString()) > DateTime.Now)
        {
            //傳遞參數(Get參數請依實際需求去調整)
            string StrQuery = "Year=" + StrYear + "&Mouth=" + StrMouth + "&Day=" +  i.ToString().PadLeft(2,'0');
            //加入連結用來導入預約頁面
            StrHTML += "<a href=\"ReserveDetail.aspx?\"" + StrQuery + ">預約</a>";
        }

        StrHTML += "</td>";

        //每個禮拜六結束一橫列
        if (iWeekTemp == 6) StrHTML += "</tr>";
       
        iWeekTemp++;
       
        //禮拜六之後回到禮拜日
        if (iWeekTemp > 6) iWeekTemp = 0;
    }

    //如果最後一天不是禮拜六,需補齊一橫列的滿格數
    if (iWeekTemp != 0)
    {
        for (; iWeekTemp <= 6; iWeekTemp++)
        {
            StrHTML += "<td>";
            StrHTML += "</td>";

            if (iWeekTemp == 6) StrHTML += "</tr>";
        }
    }

    return StrHTML;
}

　　這邊有一點需要注意的是為了要讓DropDownList觸發PostBack要加上下面程式碼，
如此一來才能在每次選擇年月的時候重新繪製月曆。

DDL_Year.AutoPostBack = true;
DDL_Mouth.AutoPostBack = true;


成品如下圖