50+ Best CSS Calendars - For Your Website (Free)
These are the 50+ best free CSS Calendars we could find on the web. This list includes HTML and CSS Calendar code examples. Some are simple CSS calendars, responsive, and event driven.
1. CSS Grid Calendar
The calendar Jake Peralta will never have. Testing z-index with CSS Grid. This experiment is technically a fail as it's 8/10 UI, 3/10 UX, 0/10 Scalability, 0/10 it-makes-sense-to-do-it-this-way. thank u, next!
Author: Olivia Ng (oliviale)
Links: Source Code / Demo
Created on: February 5, 2019
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: calendar, event, css-grid
2. CSS Calendar UI Design Tutorial With CSS Grid | Pure HTML + CSS UI Design
Author: mrnobody (corvus-007)
Links: Source Code / Demo, Youtube Video
Created on: November 18, 2018
Made with: HTML, SCSS
3. Calendar Mobile App UI
This is an implementation of the calendar app mock up tha I made. (Dribbble link: https://dribbble.com/shots/5465486-Calendar-UI)
Author: Eliza Rajbhandari (eliza-rjb)
Created on: December 10, 2018
Made with: HTML, SCSS
Tags: calendar, html, css, mobile, app
4. CSS Grid Calendar
Author: Mert Cukuren (knyttneve)
Links: Source Code / Demo
Created on: September 6, 2018
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: Babel
HTML Pre-processor: Pug
5. Calendar Plan - Tasks Events App
Author: Ahmed Nasr (ahmedhosna95)
Links: Source Code / Demo
Created on: May 25, 2018
Made with: HTML, SCSS, JS
6. Light & Dark Calendar
Light & Dark Calendar https://dribbble.com/shots/4189522-Calendar-Light-Dark
Author: BradleyPJ (BradleyPJ)
Links: Source Code / Demo, Dribbble.com
Created on: April 22, 2018
Made with: HTML, SCSS
Tags: calendar, light calendar, dark calendar, css, bradleypj
7. CSS Grid Calendar
Author: Adrià (afontcu)
Links: Source Code / Demo
Created on: December 19, 2017
Made with: HTML, CSS
8. Simple Calendar
Author: BrainUP (jpag82)
Links: Source Code / Demo
Created on: October 11, 2017
Made with: HTML, Less, JS
9. Duotone Calendar
Duotone image with SVG filter.
Author: yumeeeei (yumeeeei)
Links: Source Code / Demo
Created on: June 29, 2017
Made with: HTML, Stylus, JS
10. 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. https://www.engadget.com/2017/05/11/microsofts-design-rules-push-windows-beyond-mere-rectangles/
Author: Tom (tomcwatts)
Links: Source Code / Demo
Created on: May 15, 2017
Made with: HTML, SCSS
Tags: responsive flexbox calendar windows 10 fluent design system, fluent design, calendar, microsoft, css-layout
11. CSS Images Calendar
Author: Alex Johnson (AlxCrmr)
Links: Source Code / Demo
Created on: April 27, 2017
Made with: HTML, CSS
Tags: daily css images, daily css, day 09, calendar
12. Calendar Mock (CSS Only)
Author: Jamie (jamiemggs)
Links: Source Code / Demo
Created on: May 31, 2017
Made with: HTML, CSS
13. 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. https://www.engadget.com/2017/05/11/microsofts-design-rules-push-windows-beyond-mere-rectangles/
Author: Tom (tomcwatts)
Links: Source Code / Demo, Www.engadget.com
Created on: May 15, 2017
Made with: HTML, SCSS
Tags: responsive flexbox calendar windows 10 fluent design system, fluent design, calendar, microsoft, css-layout
14. CSS Flipping Calendar
Author: Davide Francesco Merico (NeckersBOX)
Links: Source Code / Demo
Created on: May 11, 2017
Made with: Pug, Sass, JS
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
15. Minimal CSS 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. https://www.engadget.com/2017/05/11/microsofts-design-rules-push-windows-beyond-mere-rectangles/
Author: Tom (tomcwatts)
Links: Source Code / Demo
Created on: May 15, 2017
Made with: HTML, SCSS
Tags: responsive flexbox calendar windows 10 fluent design system, fluent design, calendar, microsoft, css-layout
16. Blue, Orange, Yellow, And Red Calendar
Calendar with dynamic data.
Author: Nikita Dubko (dark_mefody)
Links: Source Code / Demo
Created on: March 24, 2017
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: cssimage
17. Parallax Flipping Calendar
Author: Andreas Pihl Jrgensen (Antreas)
Links: Source Code / Demo
Created on: March 19, 2017
Made with: HTML, CSS, JS
Tags: javascript, ui, parallax, flip, calendar
18. Flexbox Responsive Calendar
Author: Gabi (enxaneta)
Links: Source Code / Demo
Created on: January 26, 2016
Made with: HTML, CSS, JS
Tags: flexbox, calendar, responsive
19. It's A Calendar Sort Of Thing
Hey guys! Been a while since I last did a pen! Been super busy with work & working on a personal home automated project ;)! I hope you guys like this!
Author: Jack Thomson (Jackthomsonn)
Links: Source Code / Demo
Created on: March 6, 2016
Made with: Haml, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Haml
Tags: angularjs, javascript, ui, scss, animation
20. Infinite Calendar
A liquid & 'light-weight' calendar. There's no libraries in this exercise, it's really hand-crafted. Check out our 'body-cut' effect :D Hope enjoy!
Author: Tadaima (tadaima)
Links: Source Code / Demo
Created on: September 22, 2016
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: ui, calendar, js, design, tadaimastudio
21. Flexbox Responsive Calendar
Author: Gabi (enxaneta)
Links: Source Code / Demo
Created on: January 26, 2016
Made with: HTML, CSS, JS
Tags: flexbox, calendar, responsive
22. Calendar Mockup
Very quick mockup of calendar.
Author: Dan Couper (DanielCouper)
Links: Source Code / Demo
Created on: June 3, 2015
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: Babel
HTML Pre-processor: Pug
23. Calendar
Author: Dali (daliannyvieira)
Links: Source Code / Demo
Created on: September 29, 2016
Made with: Pug, CSS, JS
CSS Pre-processor: None
JS Pre-processor: None
HTML Pre-processor: Pug
24. Circular Calendar Display
A circular calendar and clock display, with and added weather and daily activity widget mock-ups.
Author: Matthew Juggins (mattjuggins)
Links: Source Code / Demo
Created on: September 22, 2016
Made with: Haml, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Haml
Tags: calendar, circular, clock, ui, display
25. React Date Range Picker
Date picker in React, you can select a range of dates.
Author: Rob Vermeer (RobVermeer)
Links: Source Code / Demo
Created on: August 27, 2016
Made with: Pug, SCSS, Babel
CSS Pre-processor: SCSS
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: datepicker, react, daterange, calendar, date
26. Calendar In ReactJs
Calendar using ReactJs (beginner level), idea from @AJALACOMFORT modified by me
Author: Ricardo Barbosa (RicardoBarbosa)
Links: Source Code / Demo
Created on: August 11, 2016
Made with: HTML, CSS, Babel
Tags: reactjs calendar
27. Date And Time Picker
Date and time picker directive
Author: Jarom Vogel (jaromvogel)
Links: Source Code / Demo
Created on: May 5, 2016
Made with: HTML, SCSS, JS
Tags: timepicker, datepicker, date, time, calendar
28. Calendar App
This is a calendar application. It allows for browsing dates and selecting individual dates. You can schedule events on future days.
Author: Joey Lea (ovdojoey)
Links: Source Code / Demo
Created on: May 29, 2016
Made with: HTML, CSS, JS
Tags: calendar, web-app, dates
29. JQuery Datepicker Summer Vibe
Simple styling of the jQuery UI Datepicker. Image credit to: https://dribbble.com/PatrykW
Author: Håvard Brynjulfsen (havardob)
Links: Source Code / Demo
Created on: May 13, 2016
Made with: HTML, SCSS, JS
Tags: calendar, datepicker, ui
30. Calendar And Clock
Author: mselmany (mselmany)
Links: Source Code / Demo
Created on: February 17, 2014
Made with: HTML, CSS, JS
Tags: clock, animation, calendar, dribbble
31. CSS-only Colorful Calendar Concept
Author: David Khourshid (davidkpiano)
Links: Source Code / Demo
Created on: November 6, 2015
Made with: HTML, SCSS
Tags: animated, calendar, transforms, mobile
32. Calendar
Author: Mark (xmark)
Links: Source Code / Demo
Created on: November 8, 2015
Made with: HTML, Less, JS
Tags: calendar, javascript, dates
33. Responsive Flexbox Calendar W/ Retina Images
One month from the dynamic calendar for my site. Uses flexbox to arrange calendar dates and HiDPI images (with w descriptor) for article images; also uses a vanilla JavaScript version of my sequential image fade-in script. Complete explanatory article
Author: Dudley Storey (dudleystorey)
Links: Source Code / Demo
Created on: August 30, 2015
Made with: HTML, SCSS, JS
Tags: calendar dates flexbox retina
34. Calendario
A Flexible Calendar Plugin
Author: Romswell Roswell Parian Paucar (romswellparian)
Links: Source Code / Demo
Created on: March 23, 2015
Made with: HTML, CSS, JS
Tags: calendar, jquery
35. Bootstrap Compatable Calendar
incomplete; bootstrap calendar
Author: Bill Barry (bbarry)
Links: Source Code / Demo
Created on: September 16, 2014
Made with: HTML, Less, JS
36. Event Calendar Widget
A nice looking calendar with nice transistions.
Author: Paul Navasard (peanav)
Links: Source Code / Demo
Created on: February 1, 2014
Made with: HTML, CSS, JS
Tags: calendar, events, helvetica
37. Calendar
Calendar I made for a little project.
Author: B8bop (B8bop)
Links: Source Code / Demo
Created on: September 5, 2013
Made with: HTML, CSS, JS
Tags: calendar, flat
38. Tear Off Calendar
Tear off calendar made with Vanilla Javascript.
Author: Nikita Hlopov (nikitahl)
Links: Source Code / Demo
Created on: January 19, 2019
Made with: HTML, Less, Babel
Tags: css, javascript, tear, off, calendar
39. CSS-only Calendar App Concept
Another Dribbble rework of an original shot by Sergey Valiukh. Chrome and Safari only, for now.
Author: David Khourshid (davidkpiano)
Links: Source Code / Demo
Created on: December 13, 2014
Made with: HTML, SCSS, Babel
40. Calendar
Simple calendar.
Author: Miro Karilahti (miroot)
Links: Source Code / Demo
Created on: October 8, 2013
Made with: HTML, CSS
Tags: css3, hover, flat, pure-css, calendar
41. CSS 3D Calendar
Here is a CSS 3D Calendar. The calendar works great on Firefox, Chrome and Safari. This downgrades gracefully for older browsers and IE.
Author: Jahirul Islam Razu (Jir)
Links: Source Code / Demo
Created on: July 15, 2018
Made with: HTML, CSS, JS
Tags: css-3d-calendar
42. Calendar Widget
Inspired from "Calendar Widget ll Freebie" by Hanna Jung http://hannajun.com Dribble here: https://dribbble.com/shots/2209385-Calendar-Widget-ll-Freebie Thanks for the great design work.
Author: Ciprian Ionescu (ciprianionescu)
Links: Source Code / Demo
Created on: August 29, 2015
Made with: Haml, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Haml
Tags: calendar, dribble, widget, material
43. Calendar
A coded up version of the calendar from this shot: https://dribbble.com/shots/11648900-Vuesax-Components-Vuejs-Framework
Author: Mark Eriksson (Markshall)
Links: Source Code / Demo
Created on: June 3, 2020
Made with: HTML, SCSS
Tags: css, html, calendar, widget, codepen
44. Interactive Calendar Prototype (HTML + CSS)
Credits to Jorge Mendes
Author: Kyle McCurley (kmccurley)
Links: Source Code / Demo
Created on: May 21, 2020
Made with: HTML, CSS
Tags: calendar
45. CSS-only Colorful Calendar Concept
Based on a Dribbble by Kirill and Ludmila Shevchenko. Made for #CodeVember.
Author: David Khourshid (davidkpiano)
Links: Source Code / Demo
Created on: November 6, 2015
Made with: HTML, SCSS
Tags: animated, calendar, transforms, mobile
46. Calendar Days DaysCSS
Author: Ron Pelt (Peltos)
Links: Source Code / Demo
Created on: April 23, 2020
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: 70, calendar, 100dayscss, css, agenda
47. Calendar
Author: Xavi (Xavi1312)
Links: Source Code / Demo
Created on: April 17, 2020
Made with: HTML, SCSS
Tags: calendar, bemm, sass
48. Date Picker With Click & Drag
David Khourshid and Stephen Shaw create a click & drag date picker to answer a viewer question about event tracking. Did David insist on a state machine? You'll have to watch & see 👀 ⏰ Streamed live on 2019 at https://twitch.tv/keyframers ❓Viewer Question: https://twitter.com/ScheuerCha...Read More
Author: @keyframers (keyframers)
Links: Source Code / Demo
Created on: January 13, 2020
Made with: HTML, SCSS, JS
Tags: keyframers, calendar, date-picker, input, drag
More Awesome Lists:
Share: