Welcome to our collection of CSS Calendars! This curated compilation features a wide range of free HTML and CSS calendar code examples sourced from popular platforms like CodePen, GitHub, and other valuable resources. With the July 2023 update, we are excited to present six new additions to our ever-growing collection.
Whether you're looking for simple, responsive, event-based, or other types of calendars, this collection has it all. Explore our handpicked selection and enhance your web design projects with these CSS calendars!
Related Articles
Links
Made with
- HTML (Pug) / CSS (SCSS)
About a code
CSS Winter Animation Calendar
A calendar with beautiful subtle animation made in CSS featuring a beautiful night in the mountains with moon and twinkling stars in the clear sky.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Calendar
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Days
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Calendar
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
CSS-Only Calendar Layout
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Datepicker
Recreation of Jakub Antalik's Date Picker from Dribbble.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Calendar UI
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Calendar
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About the code
CSS Calendar UI Design
HTML calendar UI design with CSS Grid.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About the code
Calendar Mobile App UI
Calendar mobile app UI in HTML and CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: ionicons.css
Links
Made with
- HTML / CSS (SCSS)
About the code
Calendar Plan - Tasks Events App
Based on and inspired from Dribbble shot.
Links
Made with
- HTML / CSS (SCSS)
About the code
Light & Dark Calendar
Here is a light and dark version of a calendar planner page.
Links
Made with
- HTML
- CSS/LESS
- JavaScript (jQuery.js)
About the code
Simple Calendar
Clean and modern simple calendar.
Links
Made with
- HTML
- CSS/Stylus
- JavaScript (jQuery.js)
About the code
Duotone Calendar
Duotone image with SVG filter.
Links
Made with
- HTML (Pug) / CSS (SCSS) / JavaScript
About the code
Fluent Design: Calendar
Based on the depth video concept from Microsoft's Fluent Design.
Links
Made with
- HTML
- CSS
About the code
Calendar UI
Calendar with events in HTML and CSS.
Links
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.
Links
Made with
- HTML/Pug
- CSS/SCSS
About the code
Calendar UI
Monthly calendar UI in HTML and CSS.
Links
Made with
- HTML
- CSS/SCSS
- JavaScript
About the code
Calendar
Simple calendar cards.
Links
Made with
- HTML
- CSS
- JavaScript (jQuery.js)
About the code
Parallax Flipping Calendar
Flipping calendar with HTML, CSS and little JS.
Calendar
A calendar that tells you how many events happened on a particular date.
Made by Benjamin
March 31, 2017
It's A Calendar Sort Of Thing
Calendar with nice animations & interactions.
Made by Jack Thomson
March 19, 2017
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
Calendar
Calendar with HTML, CSS and JS.
Made by Dali
October 18, 2016
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
React Date Range Picker
Date picker in React, you can select a range of dates.
Made by Rob Vermeer
August 29, 2016
Calendar In ReactJs
Calendar using ReactJs (beginner level).
Made by Ricardo Barbosa
August 16, 2016
Date And Time Picker
Date and time picker directive.
Made by Jarom Vogel
June 10, 2016
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
jQuery Datepicker Summer Vibe
Simple styling of the jQuery UI datepicker.
Made by Håvard Brynjulfsen
May 13, 2016
Calendar And Clock
Calendar and clock with HTML, CSS and JavaScript.
Made by mselmany
February 17, 2016
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
Calendar
Calendar with HTML, CSS and JavaScript.
Made by Mark
November 8, 2015
Haml Calendar
HTML and CSS calendar.
Made by Katy DeCorah
August 6, 2015
Calendario
A flexible calendar plugin.
Made by Romswell Roswell Parian Paucar
May 22, 2015
Links
Made with
- HTML / CSS (SCSS)
About a code
Flat CSS Calendar
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Bootstrap Compatable Calendar
Bootstrap calendar.
Made by Bill Barry
September 25, 2014
Event Calendar Widget
A nice looking calendar with nice transistions.
Made by Paul Navasard
February 16, 2014
Datepicker();
Datepicker in HTML, CSS and JavaScript.
Made by White Wolf Wizard
September 8, 2013
Calendar
Calendar with HTML, CSS and JavaScript.
Made by B8bop
September 5, 2013