Designing a Web Page Calendar

Introduction

I will show you how to design a monthly calendar and a yearly calendar. I will start by showing you how to design a calendar for the current month and then a calendar for the current year. I will continue by showing you how to design a calendar for any month and then a calendar for any year.

You need basic knowledge of HTML, JavaScript and CSS in order to understand this series.

The Web Page

Your web page will normally have many HTML elements. Here I will talk only about the things related to the calendar on the web page.

Since your web page will normally have many HTML elements, there may be no space for the calendar to occupy. This series assumes that your web page has many elements or a lot of text, and there is no space for the calendar.

We shall have four buttons for the calendars. The first one, when clicked, will show the calendar for the current month. This button will have the title "Show Current Month's Calendar." The second button, when clicked, will show the calendar of any month of your choice, from the year 1900 forward. We shall use the JavaScript date object for this. This date object imposes this limit. However, your platform (operating system) may impose other limits. This button will have the title "Show any Month's Calendar."

The third button, when clicked, will show the calendar for the current year. It will have the title "Show Current Year's Calendar." The fourth and last button for our project, when clicked, will show the calendar of any year of your choice, from 1900 forward. However your platform may impose other limits.

When the first or third button is clicked, the corresponding calendar appears. When you click outside the calendar on the body element, the calendar disappears. When the second or fourth button is clicked, a dialog box appears; you enter more criteria (e.g. the particular year). When you click the OK button, the calendar appears; when you click outside the calendar on the body element, the calendar disappears.