Changing stylesheet rules

[programmerboy]

I have a calender control on my page. It is a popup control, meaning when I click on calender image then it opens up. But the problem is when I am changing the month, it becomes invisible due to stylesheet rule. which is following.

#datePicker
{
       display:none;
       position:absolute;
       border:solid 2px black;
       background-color:white;
}

and the calender is following

<img src="Calendar.gif" onclick="displayCalendar()" />

<div id="datePicker">
    <asp:Calendar
        id="calEventDate"
        OnSelectionChanged="calEventDate_SelectionChanged" 
        Runat="server" />
    </div>

function displayCalendar()
{
    var datePicker = document.getElementById('datePicker');
    datePicker.style.display = 'block';
}

Can I change style sheet rule dynamically in the page load postback event, so when the month changes I can make display:"block" instead of "none".

[kunal pawar]

You can do one thing, create another CSS class for display image and assign that css class using javascript to datePicker

[Frinavale]

Change the <div> that contains the Calendar into a Panel.

When the month is changed set the style of the panel to display:block.
You'll have to change your JavaScript so that it uses the Panel's ClientID. Sometimes when the Panel is rendered in the browser (as a <div>) it's given a different ID than the one you gave it in your .NET code. The reason is because the ID has to be unique....so if you're using MasterPages or User Controls this is changed in order to meet this requirement.

Please note that I'm using VB.NET in the following example...let me know if you're using C#...

<img src="Calendar.gif" onclick="displayCalendar()" />

<asp:Panel Id="datePicker" runat="server">
    <asp:Calendar
        id="calEventDate"
        OnSelectionChanged="calEventDate_SelectionChanged" 
        Runat="server" />
</asp:Panel>

function displayCalendar()
{
    var datePicker = document.getElementById('<%= datePicker.ClientID %>');
    datePicker.style.display = 'block';
}

In your .net code you'd have:

Private displayCalEventDate As Boolean = False 'indicates whether or not to display the panel containng the calendar on postback

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

     If IsPostBack = True Then
         'Retrieving whether or not to display the panel containing the calanedar
         'from ViewState... it's saved there in the PreRender event.
        displayCalEventDate = Ctype(ViewState("displayCalEventDate"), Boolean)
    End If

End Sub

Protected Sub calEventDate_SelectionChanged(ByVal sender As Object, ByVal e As EventArgs) Handles calEventDate.SelectionChanged
    displayCalEventDate = True
End Sub

Private Sub Page_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreRender
   'The PreRender event happens just before the page is sent to the browser
   'Here Check to see if the calendar's style should be changed to display
   'And save the value for next time (I'm using ViewState here but you don't have to)

    ViewState("displayCalEventDate") = displayCalEventDate 
    If displayCalEventDate Then
      datePicker.style.Remove("display")
      datePicker.style.Add("display", "block")
   End If
End Sub

Cheers!
-Frinny

[programmerboy]

This is what I have and it is working.

<img alt="" src="<%=Page.resolveUrl("~/images/Calendar.gif")%>" onclick="displayCalendar('startDate')" />
<div id="startDate">
    <asp:Calendar
	id="calEventDate"
	OnSelectionChanged="calEventDate_SelectionChanged" 
	Runat="server" BackColor="#6DB523" BorderColor="#FFCC66" BorderWidth="1px" 
	DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt" 
	ForeColor="#663399" Height="200px" ShowGridLines="True" Width="220px" >
	<SelectedDayStyle BackColor="#CCCCFF" Font-Bold="True" />
	<SelectorStyle BackColor="#FFCC66" />
	<TodayDayStyle BackColor="#FFCC66" ForeColor="White" />
	<OtherMonthDayStyle ForeColor="white" />
	<NextPrevStyle Font-Size="9pt" ForeColor="#FFFFCC" />
	<DayHeaderStyle BackColor="#41498A" Font-Bold="True" Height="1px" ForeColor="White" />
	<TitleStyle BackColor="#FC5B04" Font-Bold="True" Font-Size="9pt" 
	    ForeColor="#FFFFCC" />
    </asp:Calendar>
</div>

<img alt="" src="<%=Page.resolveUrl("~/images/Calendar.gif")%>" onclick="displayCalendar('endDate')" />
<div id="endDate">
    <asp:Calendar
	id="calEndDate"
	OnSelectionChanged="calEventDate_SelectionChanged" 
	Runat="server" BackColor="#6DB523" BorderColor="#FFCC66" BorderWidth="1px" 
	DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt" 
	ForeColor="#663399" Height="200px" ShowGridLines="True" Width="220px" >
	<SelectedDayStyle BackColor="#CCCCFF" Font-Bold="True" />
	<SelectorStyle BackColor="#FFCC66" />
	<TodayDayStyle BackColor="#FFCC66" ForeColor="White" />
	<OtherMonthDayStyle ForeColor="white" />
	<NextPrevStyle Font-Size="9pt" ForeColor="#FFFFCC" />
	<DayHeaderStyle BackColor="#41498A" Font-Bold="True" Height="1px" ForeColor="White" />
	<TitleStyle BackColor="#FC5B04" Font-Bold="True" Font-Size="9pt" 
	    ForeColor="#FFFFCC" />
    </asp:Calendar>
</div>

<!-- Following conditional statement is used to check which calender month was changed -->
<%
    If Session("calName") = "calEndDate" Then
%>        
    <script type="text/javascript">
        var datePicker = document.getElementById("endDate");
        datePicker.style.display = "block";
    </script>
<%  
ElseIf Session("calName") = "calStartDate" Then
%>        
    <script type="text/javascript">
        var datePicker = document.getElementById("startDate");
        datePicker.style.display = "block";
    </script>
<% 
   End If
%> 

<!-- This is what I have in vb file -->

Protected Sub calEndDate_VisibleMonthChanged(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.MonthChangedEventArgs) Handles calEndDate.VisibleMonthChanged
	Session("calName") = "calEndDate"
End Sub

Protected Sub calEventDate_VisibleMonthChanged(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.MonthChangedEventArgs) Handles calEventDate.VisibleMonthChanged
	Session("calName") = "calStartDate"
End Sub

And this is in the javascript

function displayCalendar(calID) {
    var datePicker = document.getElementById(calID);
    var notClickedCalenderName = (calID == "startDate" ? notClickedCalenderName = "endDate" : notClickedCalenderName = "startDate");
    var notClickedCalender = document.getElementById(notClickedCalenderName);
    
    if (datePicker.style.display.indexOf("block") > -1) {
        datePicker.style.display = 'none';
    }
    else {
        datePicker.style.display = 'block';
        notClickedCalender.style.display = 'none';
    } 
}

Please let me know if there is difference in our approach.

[Frinavale]

Well that works too :)
My solution uses less JavaScript than yours does but both will get the job done :)