27 CSS Calendar Designs

Demo #04 ships the canonical pattern. The trick: hardcode the 42 grid cells (6 weeks × 7 days) for a specific month, give each cell a static day number, and use CSS Grid with grid-template-columns: repeat(7, 1fr) to lay them out. Modifier classes on individual cells (.other-month, .today, .weekend, .has-event) handle visual state. For a real production calendar you'll likely want JavaScript to generate the cells dynamically for any month — but for portfolio pieces, marketing pages, or as a starting point that visitors edit, the pure-CSS approach ships in zero kilobytes of JS and works without runtime cost. Most "CSS calendar" tutorials online jump straight to JavaScript for cell generation; the static-grid approach is a real competitor gap.

CSS Grid wins for calendars, period. A calendar is a true 2D layout — 7 columns × 5-6 rows — and that's exactly what Grid was designed for. With grid-template-columns: repeat(7, 1fr) and grid-auto-rows: 1fr, you get equal-width days, equal-height rows, and the entire month fits in 6 lines of CSS. Flexbox can fake it with flex-basis: calc(100% / 7) + wrap, but you lose the row-alignment guarantee — long event labels in one cell will push that row taller, leaving uneven grids. Use Flexbox for the header row (logo / month-name / nav buttons) and the day-label row above the grid — those are 1D layouts. Use Grid for the date cells. Demo #05 (CSS Grid Calendar Layout) is the textbook reference; Demos #07 / #15 / #16 all use Grid for the cells with Flexbox for the chrome above. Most "calendar tutorial" articles teach Flexbox-only patterns that work for static demos but break under real content.

Demo #01 (Glassmorphism CSS Calendar Widget) and #07 (Glassmorphism Calendar Card) ship the real recipe. Three CSS properties are doing the work: (1) Animated gradient backdrop behind the card with two drifting light orbs (radial gradients animated via @keyframes) — without something colorful behind the glass, there's nothing for the blur to blur. (2) Card background: background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); — both the standard and -webkit- prefix for Safari which still requires it. (3) Inner highlight via box-shadow: inset 0 1px 0 rgba(255,255,255,0.4) for the soft top edge that makes it read as physical glass. Most "glassmorphism calendar" tutorials skip step 1 (and the card sits on a flat background, defeating the entire effect) or step 3 (and the card reads as flat semi-transparent instead of physical glass).

Demo #13 (CSS Booking Date Picker UI) ships the production-ready pattern. The trick is in the cell state machine: each date cell has three possible states beyond default — .is-start, .is-end, and .is-in-range. CSS handles all three visually: start + end get a filled rounded background, in-range gets a softer fill connecting them. The crucial detail most tutorials miss: the connecting fill needs to extend through the cell padding so adjacent in-range cells visually merge into one continuous range. We use ::before pseudo-elements with negative horizontal margins (::before { content: ''; position: absolute; inset: 0 -4px; }) so the fill bleeds INTO the cell gap. Demo #23 (Bento Grid Style Booking System) extends this with a complete multi-panel booking interface — calendar + room cards + total pricing + reservation summary.

Demo #14 (CSS Grid Advent Calendar) is the canonical 24-day Christmas count-down pattern, built with grid-template-columns: repeat(6, 1fr) (or repeat(4, 1fr) for a portrait variant). Each cell is a "door" — a `

` element with a numbered front and hidden content inside. CSS does all the work: the doors are visually 3D via inset/outset box-shadows, hover and `[open]` states animate the door swinging open, and the content reveals beneath. grid-auto-flow: dense + variable grid-row: span 2 on a few special doors creates the asymmetric advent-calendar feel where some doors are bigger (Dec 24th is traditionally larger). High-commercial-intent search keyword: December advent calendars are a major retail / branding moment. Pattern works for any 24-30 day countdown — product launches, conference run-ups, course modules.

Demo #15 covers both because they share enough DNA that one demo can demonstrate the differences. Fluent Design (Microsoft) emphasizes acrylic surfaces (gaussian blur with noise overlay), reveal highlights on hover, and 4px-rounded corners — the calendar reads as part of a Windows 11 app. Material Design (Google) emphasizes elevated surfaces (drop shadows at z-depth 1-8), ripple effects on tap (concentric circles expanding from click point), and 12-16px rounded corners — the calendar reads as part of an Android Material You app. Both systems agree on the underlying calendar mechanics (7-column grid, today indicator, prev/next nav). The differences are pure surface treatment: shadow profile, corner radius, hover/active feedback. Demo #15 shows the cell state transitions side-by-side so you can compare the elevation system against the reveal-highlight system without switching demos.

Demo #06 (Responsive Mobile-Friendly Calendar UI) ships the canonical reference. Three transformations happen as the viewport shrinks below ~720px: (1) Day-label abbreviation — "Sunday" / "Monday" become "S" / "M" via ::first-letter or hidden span text, freeing column width. (2) Cell sizing — switch from fixed aspect-ratio: 1 to min-height: 36px so cells can be shorter on narrow screens. (3) Touch targets — interactive cells need min-height: 44px per Apple HIG / WCAG 2.1 (Target Size criterion). Below 480px, consider dropping to a single-week strip instead of the full month — the calendar becomes a "this week" widget with a button to expand. Demo #11 (Horizontal Scroll / Timeline Calendar) ships exactly this pattern. Most "responsive calendar" tutorials show only step 1 (shorten labels); the touch-target compliance and single-week-strip fallback are real competitor gaps.

"Bento grid" — modular asymmetric panel layouts inspired by Japanese lunch boxes — became the dominant marketing-site / dashboard pattern in 2024-2026 (Linear, Stripe, Apple's website). For calendars specifically (Demo #23: Bento Grid Style Booking System), the bento approach groups the calendar with adjacent panels: nights / guests count, room cards, pricing breakdown, summary block — each in its own rectangular cell of varying size, all tiled into one cohesive interface. CSS Grid is the only viable layout tool — use grid-template-areas with named regions, OR grid-column: span N; grid-row: span M per panel. The bento pattern's win: each panel has a single job, the eye reads them as a coordinated set, and visitors can scan to the action they want (book vs. browse vs. compare) without the all-in-one-screen complexity of older booking UIs. High-conversion pattern for hotels, vacation rentals, event tickets.

Demo #19 (Interactive 3D Flip Card Calendar) uses the classic two-face pattern. The cell wrapper has perspective: 1000px on its parent and transform-style: preserve-3d on itself. Inside, two children — .face-front and .face-back — are absolutely positioned to fill the wrapper. The back is rotated 180deg out of view via transform: rotateY(180deg); backface-visibility: hidden; the front shows by default. On hover (or `:focus-within` for keyboard accessibility), the wrapper itself gets transform: rotateY(180deg), flipping which face is visible. Both faces need backface-visibility: hidden or you'll see the mirror-text-through-the-card bug. Apply this per cell and the whole month's worth of dates flip independently — perfect for event details that need to stay tucked behind the date until interaction.

Honest trade-off. Use FullCalendar / react-big-calendar / TUI Calendar if you genuinely need: recurring events, drag-to-create, multi-view (month / week / day / agenda) switching, timezone math, ICS feed import, integration with Google / Outlook calendars. These are real-time event-management products where someone is managing 50+ events. The library cost (~150-300 KB minified + gzipped) is justified. Roll your own with the CSS in this collection if you need: a date picker for a form, a marketing-page month preview, a content calendar showing publish dates, an availability calendar for bookings (Demo #13 + #23), an event-planner schedule for a static-content event site (Demo #09). For 80% of "calendar UI on a website" use cases, you don't need a library — you need ~100 lines of CSS + ~30 lines of JS for prev/next navigation. The libraries solve problems you might not have.

Yes on both. Every demo respects @media (prefers-reduced-motion: reduce) and disables continuous animations for visitors with that OS preference. Every interactive cell is a real <button> or <a> (or <label>-wrapped checkbox) — no clickable <div>s — so keyboard navigation and screen readers work without JS. The booking date picker (#13) and bento booking (#23) ship aria-current="date" on today's cell and aria-selected on range start/end. The 3D flip card (#19) uses :focus-within so Tab into a cell flips it. Touch targets meet WCAG 2.1 minimum (44×44 px) on mobile. All 27 demos are MIT-licensed for both personal AND commercial projects.

Quick decision guide. SaaS dashboard / admin panel: Demo #15 (Fluent / Material) for app-system consistency, or Demo #03 (Dark Mode) for IDE-style products. Marketing landing page / portfolio: Demo #01 (Glassmorphism) or Demo #21 (Split-Screen Hero) for visual impact. Hotel / vacation rental / booking: Demo #13 (Date Range Picker) + Demo #23 (Bento Booking) — both built specifically for this conversion path. E-commerce / retail event: Demo #14 (Advent Calendar) for seasonal campaigns. Conference / event website: Demo #09 (Event Planner) or Demo #25 (Vertical Timeline) for schedule layouts. Personal blog / content site: Demo #12 (Sidebar Widget) or Demo #04 (Pure CSS) for low-overhead inline displays. Brand differentiation: Demo #02 (Brutalist), Demo #17 (Cyberpunk), Demo #18 (Bold Typography), Demo #24 (Vintage Skeuomorphic) — each projects a strong aesthetic identity. All 27 are scoped with non-colliding class names so you can copy multiple onto the same project safely.