在 asp 日历控件中以不同颜色显示日期

Display date in different color in asp Calendar control

我正在使用日历控件。我们从数据库中获取四种不同类型的日期,相同的日期将显示在日历上,其他日期已禁用。四种类型的日期是

a) Today
b) First Schedule
c) Second Schedule
d) Third Schedule

今天将用绿色圆圈突出显示第一个时间表为黄色,第二个时间表为绿色,第三个时间表为红色。

我试过的代码如下

<asp:Calendar ID="CalScheduleDays" runat="server"   Height="100%" Width="100%" 
                               BorderWidth="1px" DayNameFormat="Shortest" Font-Names="Verdana" OnDayRender="CalScheduleDays_DayRender" TodayDayStyle-ForeColor="#FF0000" >          </asp:Calendar>


protected void CalScheduleDays_DayRender(object sender, System.Web.UI.WebControls.DayRenderEventArgs e)
        {
                e.Day.IsSelectable = false;                
                CalScheduleDays.SelectedDates.Add(_dates.FirstScheduleDate);
                CalScheduleDays.SelectedDates.Add(_dates.SecondScheduleDate);
                CalScheduleDays.SelectedDates.Add(_dates.ThirdScheduleDate);
            
            if (e.Day.IsSelected)
            {
                  e.Cell.BackColor = System.Drawing.Color.LightGray;
                  e.Cell.ForeColor = System.Drawing.Color.Green;
                  e.Day.IsSelectable = true;
            }

            if (e.Day.IsWeekend)
            {
                e.Cell.BackColor = System.Drawing.Color.LightGray;
                e.Cell.ForeColor = System.Drawing.Color.DarkGray;
                e.Day.IsSelectable = false;
            }
             

    }

感谢您的帮助和支持。

如果你只想用圆圈高亮,那么你可以在后面的代码中添加css,如下所示

if (e.Day.Date == dtFirstSchedule)
 {
    e.Cell.CssClass = "dotYellow";
    e.Day.IsSelectable = true;
 }
else if(e.Day.Date==dtSecondSchedule)
 {
   e.Cell.CssClass = "dotGreen";
   e.Day.IsSelectable = true;
 }
else if(e.Day.Date==dtThirdSchedule)
 {
    e.Cell.CssClass = "dotRed";
    e.Day.IsSelectable = true;
 }
else if(e.Day.Date==DateTime.Now.Date)
 {
   e.Cell.CssClass = "dotGreen";
    e.Day.IsSelectable = true;
 }
else
 {
  //do nothing
 }

并在 css class 下方添加 css

<style>
        .dotRed {
            height: 25px;
            width: 25px;
            background-color:red;
            border-radius: 50%;
        }

       
        .dotGreen {
            height: 25px;
            width: 50px;
            background-color:green;
            border-radius: 100%;
            z-index:-1;
        }

        .dotYellow {
            height: 25px;
            width: 25px;
            background-color:yellow;
            border-radius: 50%;
        }
    </style>

这将显示如下