newb
newb

Reputation: 45

How to highlight different days with different colors in calendar asp.net

i created calendar control that highlight the selected dates. but i dont know how to use different colors for each day.

        <asp:Calendar ID="Calendar1" runat="server" 

            Height="365px" Width="594px" CssClass="myCalendar"
            OnDayRender="Calendar1_DayRender" OnSelectionChanged="Calendar1_SelectionChanged" >
            <DayHeaderStyle 
    CssClass="myCalendarDayHeader"/>
            <DayStyle CssClass="myCalendarDay" Font-Bold="True" Font-Names="Cordia New" 
                Font-Size="30px"/>
            <SelectedDayStyle 
    CssClass="myCalendarSelector" BackColor="#3366FF"/>
            <SelectorStyle Wrap="True" CssClass="myCalendarSelector"/>
            <TitleStyle 
    CssClass="myCalendarTitle" />
            <TodayDayStyle CssClass="myCalendarToday"/>
        </asp:Calendar>

....

 public static List<DateTime> list = new List<DateTime>();
    Hashtable HolidayList;
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void Calendar1_SelectionChanged(object sender, EventArgs e)
    {
        List<DateTime> newList = (List<DateTime>)Session["SelectedDates"];
        foreach (DateTime dt in newList)
        {
            Calendar1.SelectedDates.Add(dt);
        }
        list.Clear();
    }
    protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)
    {

        if (e.Day.IsWeekend == true)
        {

            e.Cell.Enabled = false;
            e.Day.IsSelectable = false;
            e.Cell.BackColor = System.Drawing.Color.Gray;
        }

            if (e.Day.IsSelected == true)
            {
                list.Add(e.Day.Date);
                e.Day.IsSelectable = false;
            }
            Session["SelectedDates"] = list;


    }

i would like to add a radio button so that i can change color for example radio one is blue radio two is yellow. can anyone have an idea?

Upvotes: 0

Views: 1254

Answers (1)

Sam
Sam

Reputation: 2917

Ok, try this

Add a RadioButtonList with AutoPostBack="true" and OnSelectedIndexChanged event to your markup as follows.

<asp:Calendar ID="Calendar1" runat="server" Height="365px" Width="594px" CssClass="myCalendar"
            OnDayRender="Calendar1_DayRender" OnSelectionChanged="Calendar1_SelectionChanged" >
            <DayHeaderStyle 
    CssClass="myCalendarDayHeader"/>
            <DayStyle CssClass="myCalendarDay" Font-Bold="True" Font-Names="Cordia New" 
                Font-Size="30px"/>
            <SelectedDayStyle 
    CssClass="myCalendarSelector" BackColor="#3366FF"/>
            <SelectorStyle Wrap="True" CssClass="myCalendarSelector"/>
            <TitleStyle 
    CssClass="myCalendarTitle" />
            <TodayDayStyle CssClass="myCalendarToday"/>
        </asp:Calendar>

    <asp:RadioButtonList ID="RadioButtonList1" runat="server" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged" AutoPostBack="true">
        <asp:ListItem>Red</asp:ListItem>
        <asp:ListItem>Yellow</asp:ListItem>
        <asp:ListItem>Green</asp:ListItem>
    </asp:RadioButtonList>

And, in your code behind implement the OnSelectedIndexChanged event as follows

protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)
        {
            System.Drawing.Color selColor;
            switch(RadioButtonList1.SelectedValue)
            {
                case "Red": selColor = System.Drawing.Color.Red;
                    break;
                case "Yellow": selColor = System.Drawing.Color.Yellow;
                    break;
                default: selColor = System.Drawing.Color.Green;
                    break;
            }
            Calendar1.SelectedDayStyle.BackColor = selColor;

        }

That's it! Your selected dates will get highlighted with the color you select in the RadioButtonList control. Have fun!

Upvotes: 1

Related Questions