hi i am trying to change the color of selected date i used the following code but it is not working

<asp:Calendar ID="Calendar1" runat="server" BackColor="White" BorderColor="Black"
                                    OnDayRender="Calendar1_DayRender" Width="300px" DayNameFormat="Shortest" Font-Names="Times New Roman"
                                    Font-Size="10pt" ForeColor="Black" Height="220px" NextPrevFormat="FullMonth"
                                    TitleFormat="Month">                                   
                                  
                                    <SelectorStyle BackColor="#CCCCCC" Font-Bold="True" Font-Names="Verdana" Font-Size="8pt"
                                        ForeColor="#333333" Width="1%" />
                                    <TodayDayStyle BackColor="#CCCC99" />
                                    <OtherMonthDayStyle ForeColor="#999999" />
                                    <DayStyle Width="14%" />
                                    <NextPrevStyle Font-Size="9pt" ForeColor="#FFFFCC" />
                                    <SelectedDayStyle BackColor="#CC3399" BorderColor="#FF0066" />
                                    <DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Height="10pt" Font-Size="7pt"
                                        ForeColor="#333333" />
                                    <TitleStyle BackColor="Black" Font-Bold="True" Font-Size="13pt" ForeColor="White"
                                        Height="14pt" />
                                </asp:Calendar>

when clicking the date noting is displaying

Recommended Answers

All 3 Replies

Is there any error displayed in your browser?

It seems to be working for me.

Could you post the entire code of your page ? so that somebody can undestand the issue and provide you a solution.

<script language="C#" runat="server">
    

        protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)
        {
            e.Cell.Text = "<a href='#' onclick='clickdate(this.title);' title='" + e.Day.Date.DayOfWeek.ToString() + "'> " + e.Day.Date.Day.ToString() + "</a>";
            //e.Cell.Text = "<input type='button' value='" + e.Day.Date.Day.ToString() + "' onclick='clickdate(this.value);'/>";
           
          
        }
        
       
    </script>

    <script type="text/javascript">
        window.onload
        var days = new Array("Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
        window.onload = function() {
        var thetime = new Date();
           

            var nday = thetime.getDay();

            var dayNames = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");

            clickdate(dayNames[nday]);

        }
        function clickdate(day) {
            for (var i = 0; i < 6; i++) {
                if (days[i] == day) {
                    var tr = document.getElementById("ctl00_ContentPlaceHolder1_" + day + "tableRow");
                    tr.style.backgroundColor = '#CDC673';
                }
                else {
                    var tr = document.getElementById("ctl00_ContentPlaceHolder1_" + days[i] + "tableRow");
                    tr.style.backgroundColor = '';
                }
            }
        }
        
    </script>

    <div id="homeDiv" runat="server" class="StudentPageBackground">
        <table width="100%" cellpadding="0" cellspacing="0">
            <tr>
                <td colspan="2" style="background-color: #EFF7FF; height: 8px">
                </td>
            </tr>
            <tr>
                <td style="width: 20%" valign="top">
                    <div class="PanelMargin">
                        <asp:Panel ID="Panelleft" Width="100%" CssClass="leftPanelColor" runat="server">
                            <div class="PanelHeading">
                                Calender
                                <asp:Label ID="selectedDateLbl" runat="server" ></asp:Label>
                            </div>
                            <div class="PanelBackground">
                                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                                <ContentTemplate>
                                <asp:Calendar ID="Calendar1" runat="server" BackColor="White" BorderColor="Black"
                                    OnDayRender="Calendar1_DayRender" Width="300px" DayNameFormat="Shortest" Font-Names="Times New Roman"
                                    Font-Size="10pt" ForeColor="Black" Height="220px" NextPrevFormat="FullMonth"
                                    TitleFormat="Month">                                   
                                  
                                    <SelectorStyle BackColor="#CCCCCC" Font-Bold="True" Font-Names="Verdana" Font-Size="8pt"
                                        ForeColor="#333333" Width="1%" />
                                    <TodayDayStyle BackColor="#CCCC99" />
                                    <OtherMonthDayStyle ForeColor="#999999" />
                                    <DayStyle Width="14%" />
                                    <NextPrevStyle Font-Size="9pt" ForeColor="#FFFFCC" />
                                    <SelectedDayStyle BackColor="#CC3399" BorderColor="#FF0066" />
                                    <DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Height="10pt" Font-Size="7pt"
                                        ForeColor="#333333" />
                                    <TitleStyle BackColor="Black" Font-Bold="True" Font-Size="13pt" ForeColor="White"
                                        Height="14pt" />
                                </asp:Calendar>
                                </ContentTemplate>
                                </asp:UpdatePanel>
                                
                            </div>
                        </asp:Panel>

I have checked your code.

It seems that you are trying to change the background color using javascript(using clickdate).

As I said in your previous post, SelectedDayStyle will take care of changing the BackColor when you click on a date.

Also your code generates script error in clickdate function at run time. It will also prevent changing the color.

I would suggest not to use bothe javascript funtions and SelectedDayStyle property. Use either one.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.