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.

Expand|Select|Wrap|Line Numbers

 
#datePicker

{

       display:none;

       position:absolute;

       border:solid 2px black;

       background-color:white;

}

and the calender is following

Expand|Select|Wrap|Line Numbers

 
<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#...

Expand|Select|Wrap|Line Numbers

 
<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:

Expand|Select|Wrap|Line Numbers

 
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.

Expand|Select|Wrap|Line Numbers

 
<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

Expand|Select|Wrap|Line Numbers

 
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 :)

Changing stylesheet rules

re: Changing stylesheet rules

re: Changing stylesheet rules

re: Changing stylesheet rules

re: Changing stylesheet rules

Similar ASP.NET bytes

/bytes/development

/bytes/it

/bytes/about