How to Make an HTML Calendar

Techwalla may earn compensation through affiliate links in this story.

You can create a web calendar in HTML with the right tools. For those who choose to create your calendar from scratch, using basic hypertext markup may be the way to go. For those who aren't as web savvy, there are options such as code generators or web sites that provide the calendars already generated after getting a few details from you. Surprisingly, you can find HTML generators in a variety of places.


Step 1

Use a html Calendar code generator. Most site provide free code generating services that provide you with the code already written. One site that provides this service is Waukegan Schools District 60. The district has put together a very effective web editor that generates a calendar code that any novice can use with ease. Once at the site scroll down to find the editor, which is located at the bottom of the page tabbed "Calendar Tools". In the Week Day Text Format area, you can choose whether to abbreviate or spell out days of the week, followed with the options of making them bold or italics. You also have the choice to choose the color of the text. After pressing the button to "Create Calendar", you will be prompted to enter the month of your choice and the year. Completing those tasks will finish the code generation and your calendar is ready for editing. Copy and paste the code in Microsoft word or notepad.


Video of the Day

Step 2

Source code for a calendar

Edit the HTML source code. Change the image source: <img src="" border="0" alt="undefined"> Starting with "http", change this present location to the location of the image you want to use.


Step 3

Edit the days of the week. Change the days to the week by first locating the area needed for editing which can be found here: <td align="center" width="13%"><b><i><font color="red">Sun</font></b></i></td> Each line will have a different day of the week. At the word "Sun" you can change that to whatever date you need. Also inserting the break tag <br> you can add meeting times, reminders or any other notes on that day. If done correctly it should look like this: <td align="center" width="13%"><b><i><font color="red">Sun<br>Don't forget to goto meeting at 6:30</font></b></i></td>


Step 4

Switch to your web page editor. There are many web editors out there being offered as freeware. One of those web editors is HTML List Editor. This simple editor allows you to write and edit HTML code and to save it as a web page for later viewing. There is also Microsoft Front Page which gives you a plethora of options to edit with, one being web page preview, normal view, and source code view. Even if you choose not to use a web editor this code generator will give you the basic template for creating an HTML calendar.