27 CSS Calendars

A CSS calendar is a date-based UI component that displays a month grid, a date-range picker, or a scheduling widget. The patterns in this gallery ship across every category of tier-1 product: SaaS meeting schedulers (Calendly, Cal.com, SavvyCal, Acuity Scheduling, Doodle, Google Calendar's inline widget), hospitality booking (Airbnb, Vrbo, Booking.com, Expedia, Hotels.com, Kayak date-range pickers), healthcare appointment booking (Epic MyChart, Zocdoc, One Medical, Amwell, Teladoc, athenahealth patient portals), real-estate showing schedulers (Zillow, Redfin, Realtor.com, Compass, Homes.com), fintech advisor booking (Morgan Stanley, Fidelity, Charles Schwab, Robinhood advisor scheduling), legal attorney meeting bookers (LawPay, Clio Grow, MyCase), and enterprise dashboards (Linear roadmap view, Notion database calendar, Airtable calendar view, Superhuman scheduling). This gallery ships 27 hand-coded calendar patterns covering the full range — every one is copy-paste ready, scoped under .cal-NN for no-collision pasting, WCAG 2.2 accessible with proper keyboard nav + aria-current="date" + reduced-motion support, and works without FullCalendar (150-300KB), react-big-calendar (85KB + React), TUI Calendar (200KB), or any framework wrapper. 1 truly Pure CSS (Demo 04 checkbox-hack), 26 with small vanilla JS for month navigation.

The CSS Booking Date Picker UI (Demo 13) + Bento Grid Style Booking System (Demo 23) + Horizontal Scroll / Timeline Calendar (Demo 11) together model the SaaS scheduler pattern that Calendly ($100M ARR), Cal.com (open source competitor), SavvyCal, Acuity Scheduling, Doodle, and every meeting-booking product ships. The pattern: (1) monthly view for date selection with available days highlighted; (2) time-slot list for the selected day showing 15/30/60-minute slots; (3) booking form for name / email / meeting purpose. Demo 13's date picker uses the classic dual-month range picker with .is-start, .is-end, and .is-in-range state classes; the connecting range fill uses ::before pseudo-elements with negative horizontal margins so adjacent cells visually merge. Demo 23 adds the bento layout with pricing / summary panels for full booking flow. Demo 11's horizontal date strip is the compact single-week view for embedded scheduler widgets. Ad CPMs on SaaS scheduling content run 8-15 USD baseline, 15-25 USD on pricing pages, 25-45 USD on enterprise SaaS scheduler comparison pages — a hand-coded scheduler beats bloated FullCalendar / react-big-calendar for both Core Web Vitals score and enterprise-buyer trust signal.

The CSS Booking Date Picker UI (Demo 13) is the copy-paste reference for the exact dual-month range-picker pattern that Airbnb, Vrbo, Booking.com, Expedia, Hotels.com, Kayak, Trivago, and every travel-booking site ships. 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 connecting band trick uses ::before pseudo-elements with negative horizontal margins (inset:0 -4px) so the fill bleeds INTO the cell gap, visually merging adjacent in-range cells into one continuous range. Critical implementation notes for production: (1) grey out unavailable dates via a .is-unavailable class that maps to your availability API; (2) show minimum-stay hints (Airbnb's 2-night minimum, Vrbo's 3-night weekends); (3) block past dates entirely; (4) show per-night pricing chips below each cell — pricing is the #1 conversion driver on hotel/vacation-rental sites. Fair Housing Act 42 U.S.C. § 3604 compliance applies to vacation-rental listings that could be interpreted as long-term housing — do not filter by protected classes. Real-estate ad CPMs run 15-30 USD metro, 25-50 USD tier-1 city (NYC / SF / LA / London / Sydney / Toronto).

The CSS Booking Date Picker UI (Demo 13) + Event Planner & Schedule Layout (Demo 09) + Bento Grid Style Booking System (Demo 23) model the healthcare appointment-booking pattern that Epic MyChart (>150M patients), Zocdoc, One Medical, Amwell, Teladoc, athenahealth, NextGen, Cerner PowerChart, Kareo, and every patient portal ships. The pattern: (1) provider directory to select a doctor / clinic; (2) date picker showing available appointment slots for the next 30-60 days; (3) time-slot picker for the chosen date with in-person / video visit options; (4) HIPAA-compliant intake form for the appointment. Critical compliance callouts for HIPAA (45 CFR Part 164): patient PHI (protected health information) can NEVER be in URL query strings or referrer headers — schedule links must be POST-only, patient identifiers must be opaque UUIDs, not names. The 21st Century Cures Act (2016) requires information-blocking exemption certification for scheduling data. State laws add extra requirements: California Confidentiality of Medical Information Act (CMIA), Texas HB 300, New York SHIELD Act. For telehealth specifically, DEA Ryan Haight Act requires prescribing controlled substances via video visits to follow specific requirements. Ad CPMs on healthcare-portal and patient-scheduling content run 30-50 USD in tier-1 markets — hand-coded schedulers with proper HIPAA hygiene are cited by enterprise health-system buyers as the reason to pick a custom-built scheduler over a hosted third-party widget.

The CSS Booking Date Picker UI (Demo 13) + Horizontal Scroll / Timeline Calendar (Demo 11) + Bento Grid Style Booking System (Demo 23) together model the real-estate tour-booking pattern that Zillow (>200M monthly visits), Redfin, Realtor.com, Compass, Homes.com, Movoto, and every property-listing platform ships. The pattern: (1) listing detail page shows a “Schedule a tour” CTA; (2) date picker shows the next 14-30 days with each date's available in-person and video-tour slots; (3) time-slot picker with 30-minute increments; (4) form for name / email / phone / preferred contact method; (5) confirmation email with iCal / Google Calendar attachment. Critical compliance callouts for Fair Housing Act 42 U.S.C. § 3604 (federal), applicable state DRE / TREC / DOS real-estate license laws, and the NAR settlement (August 2024) requiring buyer-agency agreements — the tour-request form must disclose the buyer's agent's commission arrangement. Do NOT filter tour availability by any protected class (race, colour, religion, sex, familial status, national origin, disability). MLS IDX rules require accurate listing data. Real-estate ad CPMs run 15-30 USD metro baseline, 25-50 USD in tier-1 cities (New York / San Francisco / Los Angeles / London / Sydney / Toronto), 30-60 USD for luxury / commercial listings — a hand-coded showing scheduler with proper Fair Housing + MLS compliance beats a bloated MLS-vendor calendar widget for both trust signal and Core Web Vitals.

Demo 04 (Pure CSS Calendar) 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. Radio inputs drive month + date selection via the :checked pseudo-class and sibling combinators. For a real production date-picker with any month / any year, you'll need JavaScript to generate cells dynamically — but for portfolio pieces, marketing pages, content sites showing a fixed schedule, or SEO showcases, 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. The pattern also serves as an accessibility fallback — pure-CSS calendars work perfectly with screen readers and keyboard navigation without any JS.

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 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 Demo 07 (Glassmorphism Calendar Card) ship the real recipe. Three CSS properties are doing the work: (1) Animated gradient backdrop behind the card with drifting light orbs (radial gradients animated via @keyframes) — without something colourful 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. (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 (card sits on flat background, defeating the effect) or step 3 (card reads as flat semi-transparent instead of physical glass).

Demo 14 (CSS Grid Advent Calendar) is the canonical 24-day Christmas countdown pattern, built with grid-template-columns:repeat(6, 1fr) for landscape or repeat(4, 1fr) for portrait. Each cell is a “door” — a <details> 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 special doors (Dec 24th traditionally largest) creates the asymmetric advent-calendar feel. December retail spikes are the #1 e-commerce moment of the year — advent calendars for beauty brands (Charlotte Tilbury, NARS, Sephora), fashion (Uniqlo, ASOS), spirits (The Whisky Advent Calendar, Craft Gin Club), coffee (Nespresso), tech (Snyk security advent, Vercel deploy advent), gaming (Steam sales, Xbox Game Pass), and SaaS product launches all use this pattern. Pattern extends to any 24-30 day countdown — conference run-ups, course modules, product launches. Ad CPMs on retail/e-commerce content run 3-7 USD baseline, 15-25 USD in December when purchase intent peaks.

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.5.5 (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.

Honest trade-off. Use FullCalendar (150-300KB) / react-big-calendar (85KB + React) / TUI Calendar (200KB) / Kendo Scheduler (500KB + jQuery) 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 / Apple Calendar, resource scheduling with multiple people. These are real-time event-management products where someone is managing 50+ events across users. The library cost 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 + Demo 23), an event-planner schedule for a static-content event site (Demo 09), a Calendly-style meeting scheduler (Demo 13 + Demo 23 combined). 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.

FullCalendar weighs 150-300KB gzipped and requires initialization JavaScript on every page load. react-big-calendar is 85KB + React runtime dependency. TUI Calendar (Toast UI) is 200KB. Kendo Scheduler is 500KB + jQuery runtime. shadcn Calendar wraps Radix UI (~15KB) + requires React. MUI DatePicker is 25KB + Emotion CSS-in-JS runtime. Chakra Calendar is 10KB + Chakra runtime. Every one shares three costs: (1) framework lock-in (React-only, no Vue / Svelte / Astro / vanilla), (2) runtime JavaScript hurting Core Web Vitals — the calendar hydrates on mount, delaying Time to Interactive by 200-500ms, (3) generic visual language — every calendar looks the same. The 27 calendars in this gallery ship as zero-KB dependencies for 1 demo, tiny vanilla JS (~30-100 lines) for 26 demos. LCP unaffected. FID / INP unaffected. CLS unaffected. Framework-agnostic — drop into React (rename class to className), Vue, Svelte, Astro, Next.js, Remix, SvelteKit, Solid, Qwik, Lit, or plain HTML. Reserve libraries for products with genuine multi-view scheduler needs (Google Calendar-scale); for landing pages, marketing sections, date pickers, and single-view schedulers, hand-coded calendars are strictly better for bundle size, Core Web Vitals, and design-system uniqueness.

Yes. Every demo is built to the WCAG 2.1 AA baseline every enterprise SaaS RFP quotes and the new WCAG 2.2 SC 2.4.13 focus-appearance requirement that landed October 2023. Concretely: every interactive cell is a real <button>, <a>, or <label>-wrapped input — never a clickable <div> — so keyboard navigation and screen readers work without JS. Every interactive control keeps a visible :focus-visible ring at 2px minimum with 3:1 contrast (WCAG 2.4.13). The booking date picker (Demo 13) and bento booking (Demo 23) ship aria-current="date" on today's cell and aria-selected on range start/end. The 3D flip card (Demo 19) uses :focus-within so Tab into a cell flips it. Touch targets meet WCAG 2.5.5 (44×44px minimum) on mobile. Continuous animations (Retro Neon grid floor, Isometric float loop, Kinetic typography pull, Micro-Interactions goo) wrap in @media (prefers-reduced-motion:reduce) { animation: none } per WCAG 2.3.3. This meets US Section 508 refresh (36 CFR Part 1194 incorporates WCAG 2.0 AA by reference), UK EN 301 549 for public sector procurement, Canada ACA, Australia DDA + Digital Service Standard, and Ontario AODA Section 14. All 27 demos are MIT-licensed for both personal AND commercial projects.

Yes — all 27 demos are vanilla HTML + CSS (+ up to 100 lines of vanilla JS on 26 demos) with zero framework dependencies and zero build-step requirements. Drop the HTML into any framework: React / Next.js (rename class to className, for to htmlFor), Vue / Nuxt (works as-is inside <template>), Svelte / SvelteKit (Svelte accepts class and for natively; vanilla JS runs in onMount), Astro (drop as a .astro component with the CSS in a <style> block or is:global; JS goes in a <script> tag), Next.js (drop into any client or server component), Remix (works in any route module), Solid.js (rename event handlers), Qwik (rename to on:*), or plain static HTML. Every calendar is scoped under .cal-NN or .calNN__ class names so they never collide with your existing styles — you can drop multiple calendar demos on one page if you want. All 27 demos are MIT licensed and free for commercial use with no attribution required.

Quick decision guide. SaaS meeting scheduler (Calendly / Cal.com clone): Demo 13 (Date Range Picker) + Demo 23 (Bento Booking) combined. Hotel / vacation-rental booking (Airbnb / Vrbo / Booking.com): Demo 13 (Date Range Picker) + Demo 23 (Bento Booking). Healthcare appointment portal (Epic MyChart / Zocdoc / Teladoc): Demo 13 + Demo 09 (Event Planner) + HIPAA-hardened form. Real-estate showing scheduler (Zillow / Redfin / Compass): Demo 11 (Horizontal Strip) + Demo 13 + Demo 23. SaaS dashboard / admin panel: Demo 15 (Fluent / Material) or Demo 03 (Dark Mode). Marketing landing page / portfolio: Demo 01 (Glassmorphism) or Demo 21 (Split-Screen Hero). E-commerce December advent campaign: Demo 14 (Advent Calendar). Conference / event website: Demo 09 (Event Planner) or Demo 25 (Vertical Timeline). Personal blog / content site: Demo 12 (Sidebar Widget) or Demo 04 (Pure CSS). Brand differentiation: Demo 02 (Brutalist), Demo 17 (Cyberpunk), Demo 18 (Bold Typography), Demo 24 (Vintage Skeuomorphic), Demo 27 (Diagonal Slanted) — each projects a strong aesthetic identity. All 27 are scoped so you can copy multiple onto the same project safely.