Welcome to the fourth part of an eight-part series on constructing a web page calendar. In the previous part, we discussed the first four code segments for the ShowCurrentMonth function of this application. In this part, we will tackle the last three code segments, move on to the validateDate function, and make modifications that will let you accurately display any month of any year.
Showing Any Month with a Web Page Calendar - The Buttons (Page 3 of 5 )
For our project there are four buttons. The first one has the title "Show Current Month’s Calendar." The second button will have the title "Show any Month’s Calendar." The third button will have the title "Show Current Year’s Calendar." The fourth button will have the title "Show any Year’s Calendar."
We have the tag for the first button on our web page already. Add the following tags for the next three buttons:
<button type="button" onclick="CalJustClicked = true; showCurrentMonth()">Show Current Month's Calendar</button>
<br /><br />
<button type="button">Show any Month’s Calendar</button>
<br /><br />
<button type="button">Show Current Year’s Calendar</button>
<br /><br />
<button type="button">Show any Year’s Calendar</button>
We shall add the event attributes latter. Before and above each button added are two line break elements (<br /><br />). The first line break element ensures that the next button appears below it. The next one creates a space of one line before you see the next button.
The buttons do not have the same width. In your commercial project you can use CSS to make them have the same width, or position them differently.