Calendar generator
Generate month and year calendars: pick a week start, show or hide week numbers, highlight weekends and a given “today”, then copy a plain text calendar or a self-contained HTML table — including all twelve months of a year at once.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
Calendar settings
Dates are whole calendar days, independent of the local time zone. In the text calendar [7] marks the given “today” and * marks a weekend day; the week number column follows the chosen week start.
HTML preview
This is the HTML source rendered with its own inline styles, ready to save as a .html file.
| W | Mo | Tu | We | Th | Fr | Sa | Su |
|---|---|---|---|---|---|---|---|
| 40 | 1 | 2 | 3 | 4 | |||
| 41 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 42 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 43 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 44 | 26 | 27 | 28 | 29 | 30 | 31 |
Text calendar
2026-10
Mo Tu We Th Fr Sa Su
40 1 2 3* 4*
41 5 6 7 8 9 10* 11*
42 12 13 14 15 16 17* 18*
43 19 20 21 22 23 24* 25*
44 26 27 28 29 30 31* HTML source
<div class="ukcal">
<style>
.ukcal { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #111827; }
.ukcal table { border-collapse: collapse; margin: 0 0 16px; }
.ukcal caption { padding: 4px 0; text-align: left; font-weight: 600; font-size: 14px; }
.ukcal th, .ukcal td { width: 2.2em; height: 2.2em; border: 1px solid #d0d7de; text-align: center; font-size: 13px; }
.ukcal th { background: #f3f4f6; font-weight: 600; }
.ukcal .ukcal-week { background: #f8fafc; color: #6b7280; font-size: 12px; }
.ukcal .ukcal-weekend { color: #b42318; }
.ukcal .ukcal-out { color: #c3c8cf; }
.ukcal .ukcal-today { background: #1f6feb; color: #ffffff; font-weight: 700; }
.ukcal-year { display: flex; flex-wrap: wrap; gap: 16px; }
</style>
<table>
<caption>2026-10</caption>
<thead><tr><th scope="col">W</th><th scope="col" title="Monday">Mo</th><th scope="col" title="Tuesday">Tu</th><th scope="col" title="Wednesday">We</th><th scope="col" title="Thursday">Th</th><th scope="col" title="Friday">Fr</th><th scope="col" title="Saturday">Sa</th><th scope="col" title="Sunday">Su</th></tr></thead>
<tbody><tr><th scope="row" class="ukcal-week">40</th><td class="ukcal-day ukcal-out" title="2026-09-28 Monday"></td><td class="ukcal-day ukcal-out" title="2026-09-29 Tuesday"></td><td class="ukcal-day ukcal-out" title="2026-09-30 Wednesday"></td><td class="ukcal-day" title="2026-10-01 Thursday">1</td><td class="ukcal-day" title="2026-10-02 Friday">2</td><td class="ukcal-day ukcal-weekend" title="2026-10-03 Saturday">3</td><td class="ukcal-day ukcal-weekend" title="2026-10-04 Sunday">4</td></tr><tr><th scope="row" class="ukcal-week">41</th><td class="ukcal-day" title="2026-10-05 Monday">5</td><td class="ukcal-day" title="2026-10-06 Tuesday">6</td><td class="ukcal-day" title="2026-10-07 Wednesday">7</td><td class="ukcal-day" title="2026-10-08 Thursday">8</td><td class="ukcal-day" title="2026-10-09 Friday">9</td><td class="ukcal-day ukcal-weekend" title="2026-10-10 Saturday">10</td><td class="ukcal-day ukcal-weekend" title="2026-10-11 Sunday">11</td></tr><tr><th scope="row" class="ukcal-week">42</th><td class="ukcal-day" title="2026-10-12 Monday">12</td><td class="ukcal-day" title="2026-10-13 Tuesday">13</td><td class="ukcal-day" title="2026-10-14 Wednesday">14</td><td class="ukcal-day" title="2026-10-15 Thursday">15</td><td class="ukcal-day" title="2026-10-16 Friday">16</td><td class="ukcal-day ukcal-weekend" title="2026-10-17 Saturday">17</td><td class="ukcal-day ukcal-weekend" title="2026-10-18 Sunday">18</td></tr><tr><th scope="row" class="ukcal-week">43</th><td class="ukcal-day" title="2026-10-19 Monday">19</td><td class="ukcal-day" title="2026-10-20 Tuesday">20</td><td class="ukcal-day" title="2026-10-21 Wednesday">21</td><td class="ukcal-day" title="2026-10-22 Thursday">22</td><td class="ukcal-day" title="2026-10-23 Friday">23</td><td class="ukcal-day ukcal-weekend" title="2026-10-24 Saturday">24</td><td class="ukcal-day ukcal-weekend" title="2026-10-25 Sunday">25</td></tr><tr><th scope="row" class="ukcal-week">44</th><td class="ukcal-day" title="2026-10-26 Monday">26</td><td class="ukcal-day" title="2026-10-27 Tuesday">27</td><td class="ukcal-day" title="2026-10-28 Wednesday">28</td><td class="ukcal-day" title="2026-10-29 Thursday">29</td><td class="ukcal-day" title="2026-10-30 Friday">30</td><td class="ukcal-day ukcal-weekend" title="2026-10-31 Saturday">31</td><td class="ukcal-day ukcal-out ukcal-weekend" title="2026-11-01 Sunday"></td></tr></tbody>
</table>
</div>What this tool does
- Plan a month or fill a bullet journal: generate a tidy month grid and choose whether weeks start on Monday or Sunday and whether week numbers are shown.
- Print it or paste it into a document: the HTML output carries its own styles, so you can save it as .html or drop it into a rich text editor.
- Grab a whole year at once: pick “Whole year” to render all twelve months, handy for annual planning or teaching material.
- Mark a key date: type any date into “Today” and the text calendar wraps it in brackets while the HTML highlights it, which makes screenshots easy to explain.
Example
Input
Year 2026, month October, week starts on Monday, week numbers shown, “today” 2026-10-07
Output
The text calendar starts with “2026 年 10 月”, the week column runs 40–44, 7 October is written [7], and weekend days appear as 3*, 4*, 10*, 11*; the matching HTML cells carry the ukcal-today and ukcal-weekend classes
In the text calendar brackets mark the given “today” and an asterisk marks a weekend day; the week column uses ISO 8601 numbers with a Monday start and US numbers with a Sunday start.
Frequently asked questions
Which week numbering does the week column use?
It follows the chosen week start: Monday start means ISO 8601 numbers (week 1 contains the first Thursday of the year) and Sunday start means US numbers (week 1 contains 1 January). Keeping the two in step avoids a header that starts on Sunday while showing ISO numbers.
Why does a month sometimes need only 4 rows and sometimes 6?
Rows are generated only as needed: an extra row appears when the leading blanks plus the days of the month exceed a multiple of seven. February 2021 starts on a Monday with 28 days, so it fits in 4 rows, while most months take 5 and a few take 6.
How is “today” marked?
Fill a date (YYYY-MM-DD) into the “Today” field. The text calendar wraps it in brackets, for example [7], and the HTML adds the ukcal-today class for a highlighted cell. Leave it empty and nothing is marked — the tool never reads the system clock on its own.
Does the generated HTML need extra CSS?
No. The output includes a <style> block scoped to .ukcal covering the table, the weekend colour and the today highlight, so saving it as .html or pasting it into a rich text editor just works.
Why can a date never land in the wrong cell because of the time zone?
All dates are computed from integer day numbers (Howard Hinnant’s days_from_civil algorithm) rather than Date objects, so the local time zone or a daylight saving change can never shift a day into another cell.
Keywords：calendar generatormonth calendaryear calendarprintable calendarhtml calendarcalendar table日历生成器月历年历日历表格html 日历周数