Some web pages, such as news pages, require the user to look at a calendar in order to appreciate the timing of events. This series shows you how to design a calendar for a web page. This is the first part of an eight-part series.
The above code has these elements: XML, DOCTYPE, HTML, HEAD and BODY. The components of the calendar will be contained in a DIV element. There will be buttons which, when clicked, cause a calendar to appear. This is the basic content of the BODY element for now, showing the DIV element and one button.
<div id="Cal" onclick="calJustClicked = true;">
</div>
<button type="button" onclick="calJustClicked = true; showCal()">Show Current Month's Calendar</button>
The DIV element has the ID "Cal." The button has the title "Show Current Month's Calendar." It has an onclick event whose meaning we shall see soon.
In this section we shall deal only with the first button. The CSS display property of the calendar (DIV) is given an initial value of "none." Layering is used; when the calendar is to be displayed, it appears in front of every other element. So the DIV element for the calendar is given the absolute value for its CSS position property, and a z-index value of 2; the BODY element is given the absolute value for its position property, and a z-index value of zero. This is the basic code for the CSS:
When the button is clicked, the showCal() function is called. This function changes the value of the CSS display property for the calendar (DIV) to "block." The calendar is displayed as a result. When you click the BODY element, the removeCal() function is called. This function changes the value of the CSS display property of the calendar (DIV) to "none." The calendar disappears. Note that when this property is "none," the calendar (DIV) is off the screen. This is the basic JavaScript; I explain further below:
What is the use of the first statement, "calJustClicked = true;"? When you click the BODY element, a function is called to remove the calendar from the screen. When you click the button, another function is called to display the calendar.
Now, when you click the BODY element, only one function is called. However, when you click the button, the BODY element is indirectly clicked. So, two events are triggered. These events oppose one another. The one from the button causes the calendar to be displayed. The one from the BODY, which follows immediately, causes the calendar to be removed. When we click the button, we want only the first event to take effect.
When you click the button, the statement "calJustClicked = true" first sets the calJustClicked global variable to true, indicating that the button has just been clicked. When the opposing function from the BODY is immediately called, it first checks to see if calJustClicked is true, with
if (calJustClicked == false)
If it is true, it does not remove the calendar. However, before the opposing function completes its execution, it resets the calJustClicked variable to false (the default value). In this way, when you next click the body element, the calendar will be removed.
Now when the calendar is displayed, you may need to click it for one reason or another. When you click the calendar, the BODY element will also receive the click (indirectly). In order to prevent the calendar from being removed, the calendar (DIV) has the attribute
onclick="calJustClicked = true;"
This has the same effect as for the "Show Current Month's Calendar" button.
HTML 
Modifying a Web Page Calendar
