Every calendar on this page was designed and coded in-house by uiCookies — our own pack, not a roundup of CodePen embeds. Each design is a single self-contained HTML file; the CSS is inlined, and where a design needs a grid it generates the current month or year with a short, readable script rather than hard-coded cells.
The ten designs cover what calendars actually get used for in real projects: full month grids with events, compact date pickers, dark dashboard calendars, week schedules, agenda lists, year overviews, booking calendars with range selection, glass widgets, printable planners, and a grid-plus-sidebar combo.
Download all 10 (free) Browse live demos
The designs
1. Month Grid Calendar
The full month view: a 7-column grid with event chips, a ringed “today”, greyed adjacent-month days, and previous/next navigation. The grid is generated by a short script, so it always shows the current month.
2. Mini Picker Calendar
A compact date-picker widget with selectable days, a highlighted today, and month navigation — the calendar you embed in sidebars and forms.
3. Dark Events Calendar
A dark month view with color-coded event dots and a legend in the header. Made for dashboards that track releases, meetings, and deadlines.
4. Week Schedule
A time-grid week view with color-coded events, including one spanning two hours. Pure CSS grid — the layout every booking and team page borrows from calendar apps.
5. Agenda List
The list alternative to a grid: date tiles on the left, grouped event cards on the right, with today’s tile highlighted. Better than a grid when density is low.
6. Year Overview
Twelve mini-months in a responsive grid with today marked — generated for the current year by a loop, not hand-written cells.
7. Booking Range Calendar
A hotel-style calendar with check-in/check-out range selection, highlighted nights in between, blocked unavailable dates, and a live nights count.
8. Glass Widget Calendar
A frosted-glass calendar card with marked event days and a “next up” footer that names the next event date. Backdrop-filter does all the work.
9. Printable Planner
A monthly planner sheet with a bold masthead, notes lines, and a top-3 box — plus print styles, so the Print button produces a clean A4 page.
10. Calendar + Events Sidebar
A combo panel: month grid on the left, dark events sidebar on the right, with the sidebar dates generated from the same event list as the grid dots.
Using the calendars
Copy a design’s markup, its CSS block, and (for the dynamic ones) the short script at the bottom of the file. Event data lives in plain arrays — an EVENTS map for the month grids, a BOOKED list for the booking calendar — so wiring a design to your backend means replacing one array with a fetch call. Full notes ship in the pack download.
Frequently asked questions
Are these HTML calendars free?
Yes. The whole pack downloads free from the uiCookies pack page — no signup, no email gate. See the uiCookies license page for attribution details.
How do I make a calendar in HTML and CSS?
The core is a 7-column CSS grid: day-of-week headers, then 42 cells generated from the month’s first weekday and day count. Every dynamic design in this pack does it in roughly fifteen lines of vanilla JavaScript you can read and adapt.
Do the calendars show the current month automatically?
Yes — the month grids, mini picker, year overview, and widgets all compute the current date at load, mark today, and (where navigation exists) let users move between months.
Can I use these with React, Vue, or WordPress?
Yes. They are plain HTML, CSS, and vanilla JavaScript with scoped class names. In a framework, move the generation loop into your component and render the same markup from state.
Building out an interface? Pair these with our table templates, card templates, and header templates — or start from a full free HTML website template.
