Display date in different color in asp Calendar control

Question

i am using a calendar control. We are getting four different type of date from database and the same will be display on calendar and other date disabled . The four type of date are

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

Today will be highlighted with surrounded by green color circle First Schedule as yellow, Second schedule as Green and Third as fourth as Red color . .

The code i have tried as below for

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

    }

Thanks for your help and support for the same.

Answer 1

If you want to highlight by circles only then you can add css in code behind like below

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
 }

And in css class add below 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>

This will display like below