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

【问题标题】：Display date in different color in asp Calendar control在asp日历控件中以不同颜色显示日期
【发布时间】：2021-09-21 17:21:14
【问题描述】：

我正在使用日历控件。我们从数据库中获得了四种不同类型的日期，它们将显示在日历和其他禁用日期上。四种日期是

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;
            }
             

    }

感谢您的帮助和支持。

【问题讨论】：

如果你想用圆圈突出显示那你为什么要添加背景颜色？

标签： c# asp.net date calendar

【解决方案1】：

如果您只想通过圆圈突出显示，则可以在后面的代码中添加 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 类中添加下面的 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>

如下图所示

【讨论】：