Designing a Web Page Calendar - Code for Simple Month Calendar

(Page 4 of 4 )

Let us continue with our simple month calendar so that you quickly get a feel for what we are doing.

Our monthly calendar is simple. The content is in a DIV element. The first line in the DIV element has two Input Text elements. The first one has the name of the month. The second one has the year. Each of these two elements has IDs.

Generally, when you have content that is in a grid form and that is simple, you can use a table for your layout. We have deliberately made our calendar simple. It is in a grid form. So we shall use a table element for the rest of the calendar (week days and month days). If you want a complicated presentation, then you can use some other layout strategy.

The first row of the table contains the abbreviations for the days of the week. The rest of the rows have the dates of the month. There are seven rows altogether. Every month in our project has this format. There are seven columns, that is, seven table cells per row. Each column represents a day of the week. Each table cell has an ID.

The fact that there are seven rows and seven columns is just coincidence. The first row of the table actually has the abbreviated days of the week and not the dates of the month. The rest of the rows have the dates of the month. The numbers begin from the second table row. So there are actually six rows for the numbers (dates) of the month.

In the above case the last row is empty. This is because the first day of the month starts on a Sunday. With some months, when the first day of the month is not a Sunday, the six rows are occupied. Recall that we shall still have to create a yearly calendar. So let's allow the seven table rows for every month even if one is empty for some months. This will lead to a regular arrangement of the twelve months, and it will also simplify our design.

A table cell that does not have a number for the day is filled with the ' ' character so that the row will not collapse. This is the HTML code for our simple calendar without the IDs.

<div id="Cal" onclick="CalJustClicked = true;">

<input type="text" class="calHead" value=" June&nbsp;&nbsp;&nbsp"> <input type="text" class="calHead" value="2008">

<table border="1">

<tr><td class="sun">S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td></tr>

<tr><td class="sun">1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7
</td></tr>

<tr><td class="sun">8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td>
</tr>

<tr><td class="sun">15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>
21</td></tr>

<tr><td class="sun">22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td>
</tr>

<tr><td class="sun">28</td><td>30</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;
</td><td>&nbsp;</td></tr>

<tr><td class="sun">&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;
</td><td>&nbsp;</td><td>&nbsp;</td></tr>

</table>

</div>

This is the basic code for the image above. Note that all of the cells of the first column have the CSS class "sun". A line for this is added in the style sheet, so that the abbreviation for Sunday and the numbers for the days of the month for Sunday are red. Also, the Input Text elements have a class. It is good to control its styles from the style sheet. These are the added CSS lines:

input.calHead {width:60px;font-weight:bold; background-color:LemonChiffon; margin:0px;border-width:0px}

td.sun {color:red}

I have given the Input Text elements the read-only attribute, so that their values cannot be changed by the user. I have given them the same background color as the DIV element. I have also given them a margin of 0px and a border of 0px. In this way you cannot identify them as Input Text elements. The reason I have chosen Input Text elements for this is that their values will be changing. We shall be changing them using JavaScript.

We have come to the end of this part of the series. We continue in the next part.

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

Comments On: Designing a Web Page Calendar

>>> Be the FIRST to comment on this article!