Post thumbnail: 35 CSS Calendars

35 CSS Calendars

Collection of free HTML and CSS calendar code examples: simple, responsive, event, etc. Update of January 2018 collection. 3 new items.

Demo image: Light & Dark Calendar

Author

  • BradleyPJ

Made with

  • HTML / CSS (SCSS)

About the code

Light & Dark Calendar

Here is a light and dark version of a calendar planner page.

Demo image: CSS Grid Calendar

Author

  • Adrià

Made with

  • HTML
  • CSS

About the code

CSS Grid Calendar

HTML and CSS grid calendar.

Demo image: Simple Calendar

Author

  • jpag

Made with

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

About the code

Simple Calendar

Clean and modern simple calendar.

Demo image: Duotone Calendar

Author

  • yumeeeei

Made with

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

About the code

Duotone Calendar

Duotone image with SVG filter.

Demo image: Fluent Design: Calendar

Author

  • Antoinette Janus

Made with

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

About the code

Fluent Design: Calendar

Based on the depth video concept from Microsoft's Fluent Design.

Demo image: Calendar UI

Author

  • Alex Cramer

Made with

  • HTML
  • CSS

About the code

Calendar UI

Calendar with events in HTML and CSS.

Demo image: Calendar Mockup

Author

  • Jamie

Made with

  • HTML
  • CSS
  • JavaScript

About the code

Calendar Mockup

CSS only calendar mockup.

Demo image: Windows Fluent Design Calendar

Author

  • Tom

Made with

  • HTML
  • CSS

About the code

Windows Fluent Design Calendar

Inspired by the preview of the Microsoft Fluent Design System calendar. I thought it looked really pretty so I made it for the web.

Demo image: Calendar UI

Author

  • Davide Francesco Merico

Made with

  • HTML/Pug
  • CSS/SCSS

About the code

Calendar UI

Monthly calendar UI in HTML and CSS.

Demo image: Calendar

Author

  • Jocelyn

Made with

  • HTML
  • CSS/SCSS
  • JavaScript

About the code

Calendar

Simple calendar cards.

Demo image: Dynamic Data Calendar

Author

  • Nikita Dubko

Made with

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

About the code

Dynamic Data Calendar

Calendar with dynamic data.

Demo image: Parallax Flipping Calendar

Author

  • Andreas Pihl Jrgensen

Made with

  • HTML
  • CSS
  • JavaScript (jQuery.js)

About the code

Parallax Flipping Calendar

Flipping calendar with HTML, CSS and little JS.

Demo Image: Calendar
Demo Image: Calendar

Calendar

A calendar that tells you how many events happened on a particular date.
Made by Benjamin
March 31, 2017

Demo Image: It's A Calendar Sort Of Thing
Demo Image: It’s A Calendar Sort Of Thing

It’s A Calendar Sort Of Thing

Calendar with nice animations & interactions.
Made by Jack Thomson
March 19, 2017

Demo Image: Infinite Calendar
Demo Image: Infinite Calendar

Infinite Calendar

A liquid & ‘light-weight’ calendar. There’s no libraries in this exercise, it’s really hand-crafted.
Made by Tadaima
January 31, 2017

Demo Image: Responsive Calendar
Demo Image: Responsive Calendar

Responsive Calendar

Flexbox responsive calendar.
Made by Gabi
January 3, 2017

Demo Image: Calendar Mockup
Demo Image: Calendar Mockup

Calendar Mockup

Very quick mockup of calendar.
Made by Dan Couper
October 29, 2016

Demo Image: Calendar
Demo Image: Calendar

Calendar

Calendar with HTML, CSS and JS.
Made by Dali
October 18, 2016

Demo Image: Circular Calendar Display
Demo Image: Circular Calendar Display

Circular Calendar Display

A circular calendar and clock display, with and added weather and daily activity widget mock-ups.
Made by Matthew Juggins
September 25, 2016

Demo Image: React Date Range Picker
Demo Image: React Date Range Picker

React Date Range Picker

Date picker in React, you can select a range of dates.
Made by Rob Vermeer
August 29, 2016

Demo Image: Calendar In ReactJs
Demo Image: Calendar In ReactJs

Calendar In ReactJs

Calendar using ReactJs (beginner level).
Made by Ricardo Barbosa
August 16, 2016

Demo Image: Date And Time Picker
Demo Image: Date And Time Picker

Date And Time Picker

Date and time picker directive.
Made by Jarom Vogel
June 10, 2016

Demo Image: Calendar App
Demo Image: Calendar App

Calendar App

This is a calendar application. It allows for browsing dates and selecting individual dates. You can schedule events on future days.
Made by Joey Lea
May 31, 2016

Demo Image: jQuery Datepicker Summer Vibe
Demo Image: jQuery Datepicker Summer Vibe

jQuery Datepicker Summer Vibe

Simple styling of the jQuery UI datepicker.
Made by Håvard Brynjulfsen
May 13, 2016

Demo Image: Calendar And Clock
Demo Image: Calendar And Clock

Calendar And Clock

Calendar and clock with HTML, CSS and JavaScript.
Made by mselmany
February 17, 2016

Demo Image: CSS-only Colorful Calendar Concept
Demo Image: CSS-only Colorful Calendar Concept

CSS-only Colorful Calendar Concept

Click on the arrows (when enabled) and the highlighted date to see the effect. You can also go back in your browser to navigate between scenes, or click the left arrow in the schedule view. Works in all modern browsers.
Made by David Khourshid
November 9, 2015

Demo Image: Calendar
Demo Image: Calendar

Calendar

Calendar with HTML, CSS and JavaScript.
Made by Mark
November 8, 2015

Demo Image: Flexbox Calendar
Demo Image: Flexbox Calendar

Flexbox Calendar

Responsive flexbox calendar with retina images.
Made by Dudley Storey
August 30, 2015

Demo Image: Haml Calendar
Demo Image: Haml Calendar

Haml Calendar

HTML and CSS calendar.
Made by Katy DeCorah
August 6, 2015

Demo Image: Calendario
Demo Image: Calendario

Calendario

A flexible calendar plugin.
Made by Romswell Roswell Parian Paucar
May 22, 2015

Demo Image: Bootstrap Compatable Calendar
Demo Image: Bootstrap Compatable Calendar

Bootstrap Compatable Calendar

Bootstrap calendar.
Made by Bill Barry
September 25, 2014

Demo Image: Event Calendar Widget
Demo Image: Event Calendar Widget

Event Calendar Widget

A nice looking calendar with nice transistions.
Made by Paul Navasard
February 16, 2014

Demo Image: datepicker();
Demo Image: Datepicker();

Datepicker();

Datepicker in HTML, CSS and JavaScript.
Made by White Wolf Wizard
September 8, 2013

Demo Image: Calendar
Demo Image: Calendar

Calendar

Calendar with HTML, CSS and JavaScript.
Made by B8bop
September 5, 2013

back to top