Pin Me

How to Create a Calendar in HTML

written by: Karishma Sundaram•edited by: Michele McDonough•updated: 5/20/2011

There are many ways to create a calendar in HTML, whether static or dynamic. One can choose from plain HTML, JavaScript, ASP or any number of dynamic scripting languages. In this article, we look at a few examples, and explain a number of common sticking points in calendar creation.

  • slide 1 of 5

    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.

  • slide 2 of 5

    Using HTML Tables

    HTML Calendar using 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>

  • slide 3 of 5

    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="&nbsp;"

    end if

    if iDayToDisplay = thisDay Then

    Response.Write ("<td align=center bgcolor="& highlightcolor & "><b>" & iDayToDisplay & "</b></td>")

    else

    Response.Write ("<td align=center>" & iDayToDisplay & "</td>")

    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.

  • slide 4 of 5

    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.

  • slide 5 of 5

    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.