How to Create a Calendar in HTML: Using HTML Tables and ASP

How to Create a Calendar in HTML: Using HTML Tables and ASP
Page content

Introduction

There are many different ways to create a calendar in HTML. Before starting out though, the user has to determine the exact purpose of the calendar itself.

The calendar itself can be as simple as an HTML table that is formatted to form a calendar, or it can be an embedded script within the HTML website. There are also a number of online tools which allow a user to set the options that they require, and generate the code accordingly.

Using HTML Tables

This method is perhaps the simplest but the most tedious one to create a calendar in HTML. The calendar is completely static and is hardcoded, which means the user has to manually generate months or years correctly.

An example of an HTML calendar, for the month of April 2010, using tables:

<html>

<head>

<title>HTML Calendar using Tables</title>

</head>

<body>

<table align=“center” border=1 cellpadding=2>

<tr>

<th>Sun <th>Mon <th>Tue <th>Wed <th>Thu <th>Fri <th>Sat

</tr>

<tr>

<td> <td> <td> <td> <td>1 <td>2 <td>3

</tr>

<tr>

<td>4 <td>5 <td>6 <td>7 <td>8 <td>9 <td>10

</tr>

<tr>

<td>11 <td>12 <td>13 <td>14 <td>15 <td>16 <td>17

</tr>

<tr>

<td>18 <td>19 <td>20 <td>21 <td>22 <td>23 <td>24

</tr>

<tr>

<td>25 <td>26 <td>27 <td>28 <td>29 <td>30 <td>

</tr>

</table>

</body>

</html>

A Calendar in ASP and VBScript

ASP (Active Server Pages) code is usually located on a web server, and sent to the web page, after being parsed into HTML. This enables the code to be dynamic without straining the client’s computer too much, and avoiding hassles when scripting is turned off on browsers.

The following code snippet populates the first row of the calendar, taking into consideration that the starting day of the week is Saturday:

<tr>

<%

For i= 1 to 7

if i=iThisMonthStartsThisDay Then

iDayToDisplay=1

elseif i>iThisMonthStartsThisDay Then

iDayToDisplay = iDayToDisplay + 1

else

iDayToDisplay=" "

end if

if iDayToDisplay = thisDay Then

Response.Write ("" & iDayToDisplay & “)

else

Response.Write ("" & iDayToDisplay & “”)

end If

Next

%>

</tr>

The conditional construct is checking to see whether the date actually falls on that particular day of the week. The For loop allows the construct to keep executing, till the right day and date combination is found.

Creating an HTML Calendar using JavaScript

JavaScript will allow a developer to create a more dynamic calendar. Therefore once the program is written, it can be used to create a calendar for practically any year or month without having to code it manually. Although the code itself may be cumbersome to write at first, the long-term time savings are significant.

There are a few parts to keep in mind while creating a JavaScript calendar. One of the more important calculations is to ascertain the number of days of the month. While for most months, it is possible while inefficient to hardcode it, February presents a slight problem. The following code snippet is a swift solution:

function noofdays(mm, yyyy)

{

var daysofmonth;

if((mm == 4) || (mm ==6) || (mm ==9) || (mm == 11))

{

daysofmonth = 30;

}

else

{

daysofmonth = 31

if(mm == 2)

{

if (yyyy/4 - parseInt(yyyy/4) != 0)

{

daysofmonth = 28

}

else

{

if (yyyy/100 - parseInt(yyyy/100) != 0)

{

daysofmonth = 29

}

else

{

If(yyyy/400 – parseInt(yyyy/400)!=0)

{

daysofmonth = 28

}

else

{

daysofmonth =29

}

}

}

}

}

return daysofmonth;

}

The function receives two parameters for establishing the number of days in the month: the first is the month in question and the second is the year. The first conditional if statement sets the number of days to 30 in the case of April, June, September, and November. The second half set the variable to 31, and then checks if it is February. If the condition is true, a series of steps to check for leap years starts.

The programming condition for a leap year is that it must be divisible by 4. However, if the year is divisible by 4 or 100 but not by both, the year is not a leap year. For example, the year 1900 is not a leap year, in spite of being divisible by 4.

Free Calendar Generators

There are a number of websites that put up free calendar generators, which let the user pick colors and set other parameters for their calendars. These pieces of code are usually free of charge, and require a backlink or a credit at the most. On the flip side, these snippets of code must be treated with the same caution reserved for most Internet transactions as well.