Calendars – 22 Free HTML Calendar Templates
Calendars is a pack of 22 designs, each a single self-contained HTML file with the CSS inline. It covers both halves of the problem: calendar views that display dates — month grid, week schedule, agenda, year overview, printable planner — and calendar controls people interact with: a date picker, appointment slots, availability, recurrence and resource scheduling.
At a glance
- 22 designs, one folder each, single
index.htmlper design - Twelve of the 22 need no JavaScript — including the date picker, which runs on a native
<details>plus radio inputs, with the displayed value driven by:has() - The rest use small, commented vanilla JS only where CSS genuinely cannot help: real date maths, month navigation, a now-line and a countdown
- Selectable days are real controls — buttons or labelled radios, never click-handling divs
- Scroll containers are focusable and labelled; every design checked at 380px
- No framework and no dependencies
How to use
Open the design you want and copy its markup along with the rules from the <style> block. Each design is self-contained — nothing depends on the other 21. Where a design has JavaScript it sits in the same file, commented, so you can take only the behaviour you need.
FAQ
Are these calendar templates free?
Yes — free for personal and commercial projects, including client work.
Do they work with Bootstrap?
Yes. They use their own class names, so you can drop any of them into a Bootstrap card or column without collisions.
