How to Build an Online Calendar
Build an online calendar to track important dates or upcoming events. By presenting the calendar online, you can easily share it with others by simply giving the URL link. Create the calendar in tabular format using an HTML table and define calendar dimensions using CSS. Integrate the calendar into an existing Web page, or create a new Web page featuring the calendar alone.
Other People Are Reading
Instructions
-
HTML Calendar Table
-
1
Add the HTML calendar table to the HTML page by inserting the <table> tag into the HTML body.
The table tag should appear within the <body> tag as follows:
<html>
<head>
</head>
<body>
<table>
</table>
</body>
</html>
The table tag defines an empty table. Inside the table you must define rows. Inside each row, you define individual cells.
Note: Code in Section 2 must be placed between the <head> and </head> tags.
-
2
Create a table row for each calendar week plus one row for day headings. For example, to build a calendar for the month of September with the first of the month falling on Wednesday and the last day of the month falling on Thursday, you will need to define six rows corresponding with the five weeks in the month and one header row.
Define each week's row by starting the row with the <tr> tag and ending each row with the </tr> tag.
-
-
3
Define a header row using the <th> tag containing seven cells, each one listing a day of the week.
Use the following code:
<tr><th>Sunday</th><th>Monday</th><th>Tuesday</th><th>Wednesday</th><th>Thursday</th><th>Friday</th><th>Saturday</th></tr>
-
4
Break down each subsequent row into seven cells, each starting with the <td> tag and ending with the </td> tag. Type the day of the month in between the <td> and </td> tags. For the third day of the month, for example, type "<td>day</td>."
Define cells for all days of the week, but define cells that do not contain dates as blank by typing "<td></td>" without anything in between. For example, if the first day of the month falls on a Tuesday, define cells for Sunday and Monday, but do not type any information into the cells.
Use the following format for complete calendar table code including header row and date cells:
<table>
<tr><th>Sunday</th><th>Monday</th><th>Tuesday</th><th>Wednesday</th><th>Thursday</th><th>Friday</th><th>Saturday</th></tr>
<tr><td></td><td></td><td></td><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td></tr>
<tr><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td></tr>
<tr><td>19</td><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td></tr>
<tr><td>26</td><td>27</td><td>28</td><td>29</td><td>30</td><td></td><td></td></tr>
</table>
The above code uses the example of a 30-day month that starts on Wednesday and ends on Thursday.
-
5
Input information pertaining to a particular date into that day's cell between the <td> and </td> tags.
Start a new line after the date by including the <br /> tag. Type the event after the <br /> tag.
For example, if you want to input "John's Birthday" on the third day of the month, use the following code:
<td>3<br />John's Birthday</td>
-
6
Type the month and year above the table in large using the <h1> tag as follows:
<h1>September 2010</h1>
CSS Calendar Formatting
-
7
Include CSS style code into the Web page's header section as follows:
<html>
<head>
<style type="text/css">
</style>
</head>
The CSS section defines the style and formatting of the calendar table. Include all CSS code in between the <style type="text/css"> and </style> tags.
-
8
Create a thick border around the entire calendar by inserting the following code into the CSS style section:
table { border-width: thick;
border-style: solid; }
-
9
Create a thin border around each day's cell and define the size of each day's cell as a small square by including the following code into the CSS section:
td
{width: 100px;
height: 100px;
border-width: thin;
border-style: solid;
}
-
1
Tips & Warnings
The complete calendar code will look as follows:
<html>
<head>
<style type="text/css">
table { border-width: thick;
border-style: solid; }
td
{width: 100px;
height: 100px;
border-width: thin;
border-style: solid;
}
</style>
</head>
<body>
<h1>July 2010</h1>
<table>
<tr><th>Sunday</th><th>Monday</th><th>Tuesday</th><th>Wednesday</th><th>Thursday</th><th>Friday</th><th>Saturday</th></tr>
<tr><td></td><td></td><td></td><td>1</td><td>2 <br /> Sarah's Engagement Party</td><td>3</td><td>4</td></tr>
<tr><td>5</td><td>6 <br /> Tom and Jane's Wedding</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td></tr>
<tr><td>12</td><td>13</td><td>14</td><td>15 <br /> Dentist Appointment</td><td>16</td><td>17</td><td>18</td></tr>
<tr><td>19 <br /> Ann's Graduation</td><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td></tr>
<tr><td>26 <br /> Greg's birthday</td><td>27</td><td>28</td><td>29</td><td>30 <br /> Vegas Vacation</td><td></td><td></td></tr>
</table></body>
</html>
References
Resources
- Photo Credit 2008 Year Monthly calendar with Zodiac sign image by Stasys Eidiejus from Fotolia.com
