HTML Calendar Code Generator

This page generates a monthly calendar as semantic HTML. The calendar uses a real table with a <caption>, column headings, and CSS for presentation instead of obsolete attributes such as bgcolor, align, border, or <font>.

Use the previous and next controls below to change the displayed month, then copy the generated code. For a data-driven calendar with events, see the PHP calendar tutorial.

Generated Calendar for July 2011 Top ↑

‹ July 2011 ›
Sun	Mon	Tue	Wed	Thu	Fri	Sat
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

Customize this calendar

Basic HTML Calendar Structure Top ↑

A calendar is naturally tabular data: weekdays form the columns and dates occupy the cells. Use <caption> for the month and year, <thead> for weekday headings, <tbody> for dates, and scope="col" on weekday headings.

<table class="calendar">
  <caption>September 2026</caption>
  <thead><tr>
    <th scope="col">Sun</th>
    <!-- Continue through Saturday -->
  </tr></thead>
  <tbody>
    <tr><td><time datetime="2026-09-01">1</time></td></tr>
  </tbody>
</table>

Copy the Generated HTML Top ↑

The first version includes month navigation links generated by this PHP page. If the destination page does not run PHP, use the static version farther below.

<style>\n.p2n-calendar{border-collapse:collapse;width:min(100%,34rem);font-family:Arial,sans-serif;text-align:center}\n.p2n-calendar caption{caption-side:top;font-weight:700;font-size:1.1rem;padding:.6rem}\n.p2n-calendar caption a{display:inline-block;padding:0 .6rem;text-decoration:none}\n.p2n-calendar th,.p2n-calendar td{border:1px solid #bbb;padding:.5rem;min-width:2.5rem}\n.p2n-calendar th{background:#f3f3f3}\n.p2n-calendar td{height:3rem;vertical-align:top}\n.p2n-calendar-compact{max-width:24rem;font-size:.9rem}\n.p2n-calendar-compact th,.p2n-calendar-compact td{padding:.3rem;min-width:2rem;height:2.4rem}\n</style>
<table class="p2n-calendar"><caption><a href="html_calendar.php?prm=-173&amp;chm=-1" rel="nofollow" aria-label="Previous month">&#x2039;</a> <span>July 2011</span> <a href="html_calendar.php?prm=-173&amp;chm=1" rel="nofollow" aria-label="Next month">&#x203a;</a></caption><thead><tr><th scope="col">Sun</th><th scope="col">Mon</th><th scope="col">Tue</th><th scope="col">Wed</th><th scope="col">Thu</th><th scope="col">Fri</th><th scope="col">Sat</th></tr></thead><tbody><tr><td aria-hidden="true"></td><td aria-hidden="true"></td><td aria-hidden="true"></td><td aria-hidden="true"></td><td aria-hidden="true"></td><td><time datetime="2011-07-01">1</time></td><td><time datetime="2011-07-02">2</time></td></tr><tr><td><time datetime="2011-07-03">3</time></td><td><time datetime="2011-07-04">4</time></td><td><time datetime="2011-07-05">5</time></td><td><time datetime="2011-07-06">6</time></td><td><time datetime="2011-07-07">7</time></td><td><time datetime="2011-07-08">8</time></td><td><time datetime="2011-07-09">9</time></td></tr><tr><td><time datetime="2011-07-10">10</time></td><td><time datetime="2011-07-11">11</time></td><td><time datetime="2011-07-12">12</time></td><td><time datetime="2011-07-13">13</time></td><td><time datetime="2011-07-14">14</time></td><td><time datetime="2011-07-15">15</time></td><td><time datetime="2011-07-16">16</time></td></tr><tr><td><time datetime="2011-07-17">17</time></td><td><time datetime="2011-07-18">18</time></td><td><time datetime="2011-07-19">19</time></td><td><time datetime="2011-07-20">20</time></td><td><time datetime="2011-07-21">21</time></td><td><time datetime="2011-07-22">22</time></td><td><time datetime="2011-07-23">23</time></td></tr><tr><td><time datetime="2011-07-24">24</time></td><td><time datetime="2011-07-25">25</time></td><td><time datetime="2011-07-26">26</time></td><td><time datetime="2011-07-27">27</time></td><td><time datetime="2011-07-28">28</time></td><td><time datetime="2011-07-29">29</time></td><td><time datetime="2011-07-30">30</time></td></tr><tr><td><time datetime="2011-07-31">31</time></td><td aria-hidden="true"></td><td aria-hidden="true"></td><td aria-hidden="true"></td><td aria-hidden="true"></td><td aria-hidden="true"></td><td aria-hidden="true"></td></tr></tbody></table>

Static Calendar Without Month Navigation Top ↑

Use this version when you only need a fixed month and do not want the previous/next links.

July 2011
Sun	Mon	Tue	Wed	Thu	Fri	Sat
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

<style>\n.p2n-calendar{border-collapse:collapse;width:min(100%,34rem);font-family:Arial,sans-serif;text-align:center}\n.p2n-calendar caption{caption-side:top;font-weight:700;font-size:1.1rem;padding:.6rem}\n.p2n-calendar caption a{display:inline-block;padding:0 .6rem;text-decoration:none}\n.p2n-calendar th,.p2n-calendar td{border:1px solid #bbb;padding:.5rem;min-width:2.5rem}\n.p2n-calendar th{background:#f3f3f3}\n.p2n-calendar td{height:3rem;vertical-align:top}\n.p2n-calendar-compact{max-width:24rem;font-size:.9rem}\n.p2n-calendar-compact th,.p2n-calendar-compact td{padding:.3rem;min-width:2rem;height:2.4rem}\n</style>
<table class="p2n-calendar"><caption><span>July 2011</span></caption><thead><tr><th scope="col">Sun</th><th scope="col">Mon</th><th scope="col">Tue</th><th scope="col">Wed</th><th scope="col">Thu</th><th scope="col">Fri</th><th scope="col">Sat</th></tr></thead><tbody><tr><td aria-hidden="true"></td><td aria-hidden="true"></td><td aria-hidden="true"></td><td aria-hidden="true"></td><td aria-hidden="true"></td><td><time datetime="2011-07-01">1</time></td><td><time datetime="2011-07-02">2</time></td></tr><tr><td><time datetime="2011-07-03">3</time></td><td><time datetime="2011-07-04">4</time></td><td><time datetime="2011-07-05">5</time></td><td><time datetime="2011-07-06">6</time></td><td><time datetime="2011-07-07">7</time></td><td><time datetime="2011-07-08">8</time></td><td><time datetime="2011-07-09">9</time></td></tr><tr><td><time datetime="2011-07-10">10</time></td><td><time datetime="2011-07-11">11</time></td><td><time datetime="2011-07-12">12</time></td><td><time datetime="2011-07-13">13</time></td><td><time datetime="2011-07-14">14</time></td><td><time datetime="2011-07-15">15</time></td><td><time datetime="2011-07-16">16</time></td></tr><tr><td><time datetime="2011-07-17">17</time></td><td><time datetime="2011-07-18">18</time></td><td><time datetime="2011-07-19">19</time></td><td><time datetime="2011-07-20">20</time></td><td><time datetime="2011-07-21">21</time></td><td><time datetime="2011-07-22">22</time></td><td><time datetime="2011-07-23">23</time></td></tr><tr><td><time datetime="2011-07-24">24</time></td><td><time datetime="2011-07-25">25</time></td><td><time datetime="2011-07-26">26</time></td><td><time datetime="2011-07-27">27</time></td><td><time datetime="2011-07-28">28</time></td><td><time datetime="2011-07-29">29</time></td><td><time datetime="2011-07-30">30</time></td></tr><tr><td><time datetime="2011-07-31">31</time></td><td aria-hidden="true"></td><td aria-hidden="true"></td><td aria-hidden="true"></td><td aria-hidden="true"></td><td aria-hidden="true"></td><td aria-hidden="true"></td></tr></tbody></table>

Compact Calendar Top ↑

For a narrower layout, change the CSS rather than adding old HTML width attributes. This compact version reduces the maximum width, cell padding, and cell height.

July 2011
Sun	Mon	Tue	Wed	Thu	Fri	Sat
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

<style>\n.p2n-calendar{border-collapse:collapse;width:min(100%,34rem);font-family:Arial,sans-serif;text-align:center}\n.p2n-calendar caption{caption-side:top;font-weight:700;font-size:1.1rem;padding:.6rem}\n.p2n-calendar caption a{display:inline-block;padding:0 .6rem;text-decoration:none}\n.p2n-calendar th,.p2n-calendar td{border:1px solid #bbb;padding:.5rem;min-width:2.5rem}\n.p2n-calendar th{background:#f3f3f3}\n.p2n-calendar td{height:3rem;vertical-align:top}\n.p2n-calendar-compact{max-width:24rem;font-size:.9rem}\n.p2n-calendar-compact th,.p2n-calendar-compact td{padding:.3rem;min-width:2rem;height:2.4rem}\n</style>
<table class="p2n-calendar p2n-calendar-compact"><caption><span>July 2011</span></caption><thead><tr><th scope="col">Sun</th><th scope="col">Mon</th><th scope="col">Tue</th><th scope="col">Wed</th><th scope="col">Thu</th><th scope="col">Fri</th><th scope="col">Sat</th></tr></thead><tbody><tr><td aria-hidden="true"></td><td aria-hidden="true"></td><td aria-hidden="true"></td><td aria-hidden="true"></td><td aria-hidden="true"></td><td><time datetime="2011-07-01">1</time></td><td><time datetime="2011-07-02">2</time></td></tr><tr><td><time datetime="2011-07-03">3</time></td><td><time datetime="2011-07-04">4</time></td><td><time datetime="2011-07-05">5</time></td><td><time datetime="2011-07-06">6</time></td><td><time datetime="2011-07-07">7</time></td><td><time datetime="2011-07-08">8</time></td><td><time datetime="2011-07-09">9</time></td></tr><tr><td><time datetime="2011-07-10">10</time></td><td><time datetime="2011-07-11">11</time></td><td><time datetime="2011-07-12">12</time></td><td><time datetime="2011-07-13">13</time></td><td><time datetime="2011-07-14">14</time></td><td><time datetime="2011-07-15">15</time></td><td><time datetime="2011-07-16">16</time></td></tr><tr><td><time datetime="2011-07-17">17</time></td><td><time datetime="2011-07-18">18</time></td><td><time datetime="2011-07-19">19</time></td><td><time datetime="2011-07-20">20</time></td><td><time datetime="2011-07-21">21</time></td><td><time datetime="2011-07-22">22</time></td><td><time datetime="2011-07-23">23</time></td></tr><tr><td><time datetime="2011-07-24">24</time></td><td><time datetime="2011-07-25">25</time></td><td><time datetime="2011-07-26">26</time></td><td><time datetime="2011-07-27">27</time></td><td><time datetime="2011-07-28">28</time></td><td><time datetime="2011-07-29">29</time></td><td><time datetime="2011-07-30">30</time></td></tr><tr><td><time datetime="2011-07-31">31</time></td><td aria-hidden="true"></td><td aria-hidden="true"></td><td aria-hidden="true"></td><td aria-hidden="true"></td><td aria-hidden="true"></td><td aria-hidden="true"></td></tr></tbody></table>

Style the Calendar with CSS Top ↑

Modern HTML keeps structure in the markup and presentation in CSS. Avoid old attributes such as bgcolor, align, cellspacing, cellpadding, and the obsolete <font> element.

.calendar {
  border-collapse: collapse;
  width: min(100%, 34rem);
  text-align: center;
}
.calendar th, .calendar td {
  border: 1px solid #bbb;
  padding: 0.5rem;
}

Calendar Accessibility Top ↑

A calendar grid should expose its structure rather than relying only on visual alignment. A caption identifies the month, column headers identify weekdays, and real table markup preserves row/column relationships for assistive technology.

Keep weekday headings as <th scope="col">.
Give navigation controls descriptive labels such as “Previous month” and “Next month”.
Do not communicate events by color alone.
If dates become interactive controls, make their purpose and selected/current states available programmatically.

PHP and Monthly Planner Options Top ↑

This generator creates the month grid on the server. For calendars populated from PHP or a database, continue with the PHP calendar tutorial. To build a printable schedule with dated plans, see the monthly planner.

The month navigation values on this page are validated as integers before they are used. When building your own generator, validate query-string values rather than trusting raw $_GET input.

Common Calendar Markup Mistakes Top ↑

Using old presentational table attributes Top ↑

Use CSS for borders, spacing, colors, sizing, and alignment instead of border, bgcolor, align, cellpadding, or cellspacing.

Building a calendar with spaces and line breaks Top ↑

A calendar has genuine row-and-column relationships, so a table is more appropriate than manually spacing text.

Leaving weekday cells as ordinary table cells Top ↑

Use header cells with scope="col" so the weekday relationship is explicit.

Trusting navigation parameters Top ↑

Query-string values are user input. Validate them server-side before using them in date calculations or application logic.

Customize the HTML Calendar HTML Tables HTML <time> Element PHP Calendar PHP Monthly Planner

Frequently Asked Questions Top ↑

Q1: What HTML elements should I use for a monthly calendar?

Use a table for the calendar grid, a caption for the month and year, column header cells for weekdays, and regular cells for dates.

Q2: Should I use the old border, bgcolor, cellpadding or cellspacing attributes?

No. Those are presentational techniques from older HTML. Use CSS for borders, colors, spacing and sizing.

Q3: Why use scope="col" on weekday headings?

It identifies each weekday heading as the header for its calendar column, which makes the table structure clearer to assistive technology.

Q4: Can I copy this calendar to a page that does not run PHP?

Yes. Use the static generated version, which contains the HTML and CSS for the selected month without PHP-powered navigation links.

Q5: How do I make the calendar narrower?

Adjust CSS such as max-width, padding and font-size. Do not use obsolete HTML width or font attributes for presentation.

Q6: How can I add events to this calendar?

For dynamic events, generate the date cells from application data. The related PHP calendar and monthly planner tutorials show server-side approaches.

HTML Meta Tags BODY tag

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author Watch on YouTube

Connect:

endawoke	08-11-2013
the code has only upto 2014 so it is dificalt to know other holy dayes

Lungelo	22-07-2015
I need a code of a calendar that is more or less like outlook calendar, that will allow me to easily make appointment and print them

David	01-02-2016
Please, I need step by step lecture on how to html calendar, for daily devotion that displays each day with date and topic. Thanks

smo1234	04-02-2016
For that you need Activity calendar, that can be developed using database support where the data is stored. You can see one event calendar example here.

Portia	09-09-2016
Hey I need a July 2016 calender an its code please

smo1234	10-09-2016
There is one in PHP section showing 2016 calendar.

Gerald	18-12-2018
How to change the date, for examlpe jan.1 2018 because i don't know how to change it.

bob	26-11-2014
ok but highlight the date

Ryan	16-01-2015
Ok Thanks...