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

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;
   }

Previous Page

Next Page