Using CSS to Control Calendar Display
| I l @ ve RuBoard |
Using CSS to Control Calendar DisplayOne of the strongest selling points for moving to the .NET platform is the separation of code from presentation markup. One of the easiest ways to separate what your forms do from what they look like is by using Cascading Style Sheets (CSS). Listing 7.11 demonstrates how you can create cleaner, easier-to-manage code while garnering even more control over the display properties of the Calendar control. Listing 7.11 Changing the look of the Calendar control by using CSS (7cal06.aspx). <%@ Page language="VB" autoeventwireup="false"%> <html> <head> <title>Chapter 7: ASP.NET Rich Controls</title> <style> .Cal { font-family: Verdana; font-size: 8pt; border-top: solid 1 black; border-bottom: solid 1 black; border-left: solid 1 white; border-right: solid 1 white; } .CalDayHeader { background: #EFEFEF; font-size: 10pt; } .CalDay A { text-decoration: none; } .CalNextPrev { font-size: 8pt; } .CalOtherMonthDay { background: #CCCCCC; } .CalOtherMonthDay A { text-decoration: none; } .CalSelectedDay { border: solid 1 red; background: white; } .CalSelector { background-color: silver; font-size: 6pt; } .CalTitle { /* not currently working in Beta 1*/ } .CalToday { background: blue; } .CalToday A { font-weight: bold; text-decoration: none; } .CalWeekend A { background: #EFEFEF; } .CalWeekend A { text-decoration: none; } </style> </head> <body> <form runat="server"> <h3>Using Calendar</h3> Modifying the look of the Calendar control <br><br> <asp:Calendar id="Cal" runat="server" selectionmode="DayWeekMonth" cssclass="Cal" dayheaderstyle-cssclass="CalDayHeader" daystyle-cssclass="CalDay" nextprevstyle-cssclass="CalNextPrev" othermonthdaystyle-cssclass="CalOtherMonthDay" selecteddaystyle-cssclass="CalSelectedDay" selectorstyle-cssclass="CalSelector" titlestyle-cssclass="CalTitle" todaydaystyle-cssclass="CalToday" weekenddaystyle-cssclass="CalWeekend" titlestyle-font-size="12pt" titlestyle-font-bold="True" prevmonthtext="<img border='0' src='images/rew.gif'>" nextmonthtext="<img border='0' src='images/fwd.gif'>" /> </form> </body> </html> Figure 7.9 shows the output from Listing 6.11. Figure 7.9. Changing the look of the Calendar using style sheets. In this example, we've completely separated the display properties from the actual control declaration simply by assigning the CssClass property for each style unit of the calendar. These CSS classes are defined in the <style> section in the head of the document. We could just as easily have included these definitions in an external linked style sheet for an even greater degree of code separation. One of the benefits for using CSS classes instead of inline style properties ”in addition to cleaner code ”is the ability to reuse these class definitions. If you wanted to include two identical-looking calendar controls on the same page or on different pages, using inline style properties creates a great amount of duplicate code. Also, modifications made to one calendar would have to be copied to the second calendar control to keep the controls identical. By using CSS classes in linked style sheets, changes made to the style sheet cascade across the entire site. This greatly increases manageability by allowing Web designers to modify the look of the site without handling the actual Web form code. |
| I l @ ve RuBoard |
