用户控件形式的多选日历控件MultiSelectCalendar

问题的提出：

在开发系统的过程中，曾遇到过为职工排休的情况，当时想的就是应该用日历控件，直观方便。但是ASP.NET中的日历控件默认是单选的，每次点击一个日期就会引发postback，每次postback后控件的SelectedDates属性就会被刷新，而该控件又没有可以设为false的autopostback属性，那么要想实现日期的多选，就只能靠自己来写了。经过考虑之后，认为实现这个功能，关键在于将每次选择的日期集合保存起来，在页面postback后重新生成时根据这个集合中的元素绘制日历中的单元格的样式。

实现的思路就是将所选的日期用一个集合保存，并保留在Session中。每次点击一个日期时，都检验集合中是否已经有该日了，如果有，则删除，如果没有则添加。这样就能实现用鼠标点击选择、已经选择的点击后取消的效果。

 

具体实现：

新建一个WEB用户控件，命名为MultiSelectCalendar，在设计视图中拖入一个普通的日历控件，命名为MultiCalendar，为了美观，在“自动套用格式”中选择专业2型。下面是源代码。

Public Class MultiSelectCalendar

    Inherits System.Web.UI.UserControl

 

#Region " Web 窗体设计器生成的代码 "

     ‘省略

#End Region

 

    Private colDt As SelectedDatesCollection

 

    Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

        '在此处放置初始化页的用户代码

        If Not IsPostBack Then

            colDt = MultiCalendar.SelectedDates

            Session("date") = colDt

        Else

            colDt = Session("date")

        End If

    End Sub

 

    Private Sub MultiCalendar_DayRender(ByVal sender As System.Object, ByVal e As System.Web.UI.WebControls.DayRenderEventArgs) Handles MultiCalendar.DayRender

        Dim ctlCell As TableCell

        Dim dt As Date

 

        If e.Day.IsOtherMonth Then

            e.Cell.Controls.Clear()

        End If

        If colDt.Contains(e.Day.Date) Then

            e.Cell.BackColor = Color.FromArgb(51, 51, 153)

            e.Cell.ForeColor = Color.White

        Else

            e.Cell.BackColor = Color.LightGray

            e.Cell.ForeColor = Color.Black

        End If

    End Sub

 

    Private Sub MultiCalendar_PreRender(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MultiCalendar.PreRender

        If IsPostBack Then

            If Not colDt.Contains(MultiCalendar.SelectedDate) Then

                colDt.Add(MultiCalendar.SelectedDate)

            Else

                colDt.Remove(MultiCalendar.SelectedDate)

            End If

            Session("date") = colDt

        End If

    End Sub

End Class

 

其中变量colDt用来保存所选日期的集合。可以看到，实现比较简单，完全是在控件自有的事件、方法中实现的，而无需自己编写额外的函数。如果在三个函数中设置断点，可以看到三个函数的执行顺序是Page_Load、MultiCalendar_PreRender、MultiCalendar_DayRender，搞清楚逻辑顺序是非常重要的。

最后我们可以在.ascx上添加一个列表框来测试一下，将MultiCalendar_PreRender修改成下面的样子，就可以在列表框中列出被选日期集合中的所有日期。

Private Sub MultiCalendar_PreRender(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MultiCalendar.PreRender

        If IsPostBack Then

            If Not colDt.Contains(MultiCalendar.SelectedDate) Then

                colDt.Add(MultiCalendar.SelectedDate)

            Else

                colDt.Remove(MultiCalendar.SelectedDate)

            End If

            Session("date") = colDt

        End If

 

        Dim dt As Date

        ListBox1.Items.Clear()

        For Each dt In colDt

            ListBox1.Items.Add(dt.ToString)

        Next

End Sub

注意到在这个函数中，代码是括在了If IsPostBack中间的，因为我在用列表框做测试时，发现第一次打开页面的时候，会在集合里面添加 0001年 1月 1日零点 这个日期，不知道为什么，难道是日历控件默认的被选日期？

 

总结：

多选日历控件的基本功能抽取成了一个WEB用户控件，提高了代码的可重用性，但还有可以改进的地方。如应该考虑将日期集合暴露成一个只读属性，还可以考虑将外观相关的一些设置暴露为属性，在用户控件中如何实现还在学习中。最后完善成能够直接引用进工具箱的控件最好。