Follow
Follow

39+ CSS Calendars | CSS Calendar Templates

CSS GRID: CALENDAR

Demo image: CSS Grid: Calendar

Author

  • Olivia Ng

Made with

  • HTML (Pug) / CSS (SCSS)

CSS CALENDAR UI DESIGN

HTML calendar UI design with CSS Grid.

Demo image: CSS Calendar UI Design

Author

  • mrnobody

Made with

  • HTML / CSS (SCSS)

CALENDAR MOBILE APP UI

Calendar mobile app UI in HTML and CSS.

Demo image: Calendar Mobile App UI

Author

  • Eliza Rajbhandari

Made with

  • HTML / CSS (SCSS)

CSS GRID CALENDAR

HTML calendar with CSS Grid.

Demo image: CSS Grid Calendar

Author

  • Mert Cukuren

Made with

  • HTML (Pug) / CSS (SCSS)

CALENDAR PLAN – TASKS EVENTS APP

 

Demo image: Calendar Plan - Tasks Events App

Author

  • Ahmed Nasr

Made with

  • HTML / CSS (SCSS)

LIGHT & DARK CALENDAR

 

Demo image: Light & Dark Calendar

Author

  • BradleyPJ

Made with

  • HTML / CSS (SCSS)

CSS GRID CALENDAR

HTML and CSS grid calendar.

Demo image: CSS Grid Calendar

Author

  • Adrià

Made with

  • HTML
  • CSS

SIMPLE CALENDAR

Clean and modern simple calendar.

Demo image: Simple Calendar

Author

  • jpag

Made with

  • HTML
  • CSS/LESS
  • JavaScript (jQuery.js)

DUOTONE CALENDAR

Duotone image with SVG filter.

Demo image: Duotone Calendar

Author

  • yumeeeei

Made with

  • HTML
  • CSS/Stylus
  • JavaScript (jQuery.js)

FLUENT DESIGN: CALENDAR

Microsoft’s Fluent Design with depth video cocept.

Demo image: Fluent Design: Calendar

Author

  • Antoinette Janus

Made with

  • HTML (Pug) / CSS (SCSS) / JavaScript

CALENDAR UI

Calendar with events in HTML and CSS.

Demo image: Calendar UI

Author

  • Alex Cramer

Made with

  • HTML
  • CSS

CALENDAR MOCKUP

CSS only calendar mockup.

Demo image: Calendar Mockup

Author

  • Jamie

Made with

  • HTML
  • CSS
  • JavaScript

WINDOWS FLUENT DESIGN CALENDAR

Demo image: Windows Fluent Design Calendar

Author

  • Tom

Made with

  • HTML
  • CSS

CALENDAR UI

Monthly calendar UI in HTML and CSS.

Demo image: Calendar UI

Author

  • Davide Francesco Merico

Made with

  • HTML/Pug
  • CSS/SCSS

CALENDAR

Simple calendar cards.

Demo image: Calendar

Author

  • Jocelyn

Made with

  • HTML
  • CSS/SCSS
  • JavaScript

DYNAMIC DATA CALENDAR

Calendar with dynamic data.

Demo image: Dynamic Data Calendar

Author

  • Nikita Dubko

Made with

  • HTML/Pug
  • CSS/SCSS
  • JavaScript (jQuery.js)

PARALLAX FLIPPING CALENDAR

Flipping calendar with HTML, CSS and little JS.

Demo image: Parallax Flipping Calendar

Author

  • Andreas Pihl Jrgensen

Made with

  • HTML
  • CSS
  • JavaScript (jQuery.js)

Calendar

 

Demo Image: Calendar

Author

  • Benjamin

Made with

  • Html / CSS
Demo and Download Demo and Download

It’s A Calendar Sort Of Thing

Calendar with nice animations & interactions.

Demo Image: It's A Calendar Sort Of Thing

Author

  • Jack Thomson

Made with

  • Html / CSS
Demo and Download Demo and Download

Infinite Calendar

A liquid & ‘light-weight’ calendar. There’s no libraries in this exercise, it’s really hand-crafted.

Demo Image: Infinite Calendar

Author

  • Tadaima

Made with

  • Html / CSS
Demo and Download Demo and Download

Responsive Calendar

Flexbox responsive calendar.

Demo Image: Responsive Calendar

Author

  • Gabi

Made with

  • Html / CSS
Demo and Download Demo and Download

Calendar Mockup

Very quick mockup of calendar.

Demo Image: Calendar Mockup

Author

  • Dan Couper

Made with

  • Html / CSS
Demo and Download Demo and Download

Calendar

Calendar with HTML, CSS and JS.

Demo Image: Calendar

Author

  • Dali

Made with

  • Html / CSS / JS
Demo and Download Demo and Download

Circular Calendar Display

 

Demo Image: Circular Calendar Display

Author

  • Matthew Juggins

Made with

  • Html / CSS
Demo and Download Demo and Download

React Date Range Picker

Date picker using React with select a range of dates.

Demo Image: React Date Range Picker

Author

  • Rob Vermeer

Made with

  • Html / CSS
Demo and Download Demo and Download

Calendar In ReactJs

Calendar using ReactJs (beginner level).

Demo Image: Calendar In ReactJs

Author

  • Ricardo Barbosa

Made with

  • Html / CSS
Demo and Download Demo and Download

Date And Time Picker

Date and time picker directive.

Demo Image: Date And Time Picker

Author

  • Jarom Vogel

Made with

  • Html / CSS
Demo and Download Demo and Download

Calendar App

This is a calendar application. you can browse dates and selecting single dates. You can schedule events on future days.

Demo Image: Calendar App

Author

  • Joey Lea

Made with

  • Html / CSS
Demo and Download Demo and Download

jQuery Datepicker Summer Vibe

Simple styling of the jQuery UI datepicker.

Demo Image: jQuery Datepicker Summer Vibe

Author

  • Håvard Brynjulfsen

Made with

  • Html / CSS
Demo and Download Demo and Download

Calendar And Clock

Calendar and clock with HTML, CSS and JavaScript.

Demo Image: Calendar And Clock

Author

  • mselmany

Made with

  • Html / CSS / JS
Demo and Download Demo and Download

CSS-only Colorful Calendar Concept

 

Demo Image: CSS-only Colorful Calendar Concept

Author

  • David Khourshid

Made with

  • Html / CSS
Demo and Download Demo and Download

Calendar

Calendar with HTML, CSS and JavaScript.

Demo Image: Calendar

Author

  • Mark

Made with

  • Html / CSS / JS
Demo and Download Demo and Download

Flexbox Calendar

Responsive flexbox calendar with retina images.

Demo Image: Flexbox Calendar

Author

  • Dudley Storey

Made with

  • Html / CSS
Demo and Download Demo and Download

Haml Calendar

HTML and CSS calendar.

Demo Image: Haml Calendar

Author

  • Katy DeCorah

Made with

  • Html / CSS
Demo and Download Demo and Download

Calendario

A flexible calendar plugin.

Demo Image: Calendario

Author

  • Romswell Roswell Parian Paucar

Made with

  • Html / CSS
Demo and Download Demo and Download

Bootstrap Compatable Calendar

Bootstrap calendar.

Demo Image: Bootstrap Compatable Calendar

Author

  • Bill Barry

Made with

  • Html / CSS
Demo and Download Demo and Download

Event Calendar Widget

A nice looking calendar with nice transistions.

Demo Image: Event Calendar Widget

Author

  • Paul Navasard

Made with

  • Html / CSS
Demo and Download Demo and Download

Datepicker();

Datepicker in HTML, CSS and JavaScript.

Demo Image: datepicker();

Author

  • White Wolf Wizard

Made with

  • Html / CSS / JavaScript
Demo and Download Demo and Download

Calendar

Calendar with HTML, CSS and JavaScript.

Demo Image: Calendar

Author

  • B8bop

Made with

  • Html / CSS / JavaScript
Demo and Download Demo and Download
Newsletter
Join Design Community
Get the latest updates, creative tips, and exclusive resources straight to your inbox. Let’s explore the future of design and innovation together.