Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Create an Object-Oriented JavaScript Calendar Using the Fa-2 : Page 2


advertisement
Create the CSS File
You'll need CSS rules for the month and year banners as well as for the navigation bar at the bottom of the calendar. The calendar holds two types of days—the day that represents today's date, and all other days. You need to created different CSS rules for each day type so the calendar can display the current date differently from all the other dates. You also need a rule to format the days of the week just beneath the banner. Figure 1 shows a screen shot of the completed calendar in action:

Figure 1. The Completed Calendar: Here's the completed calendar as it appears in a browser. Users can switch months or years using the arrow links at the bottom of the calendar.
Open your favorite text editor and create the following classes. Save the file as calendar.css:

.month, .nav{ background-color: navy; color: white; font: 10pt sans-serif; } .nav{ cursor: pointer; cursor: hand; } .dayHeader{ color: black; font: 10pt sans-serif; border-bottom: 1px black solid; font-weight: bold; } .empty{ background-color: white; border-bottom: 1px black solid; } .days{ color: black; background-color: rgb(235,235,235);; font: 10pt sans-serif; border-bottom: 1px black solid; border-left: 1px black solid; border-right: 1px black solid; cursor: pointer; cursor: hand; } .date{ color: maroon; font: 10pt sans-serif; font-weight: bold; border-bottom: 1px black solid; border-left: 1px black solid; border-right: 1px black solid; cursor: pointer; cursor: hand; }




Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap