CSS calendars code and Demo
In this post, we will give you information about the CSS calendar code and Demo. Here we will give you details about the CSS calendars code and Demo And how to use it also give you a demo for it if it is necessary. CSS calendars code and Demo we could find on the web. Also, This is a Codepen example.
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 – CSS Calendars
Author: BrainUP (jpag82)
Links: Source Code / Demo
Created on: October 11, 2017
Made with: HTML, Less, JS
9. Duotone Calendar – CSS Calendars
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 – CSS Calendars
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 – CSS Calendars
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) – CSS Calendars
Author: Jamie (jamiemggs)
Links: Source Code / Demo
Created on: May 31, 2017
Made with: HTML, CSS
13. Windows Fluent Design Calendar – CSS Calendars
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 – CSS Calendars
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 – CSS Calendars
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 – CSS Calendars
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 – CSS Calendars
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 – CSS Calendars
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 – CSS Calendars
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 – CSS Calendars
A liquid & ‘light-weight’ calendar. There’s no libraries in this exercise, it’s really hand-crafted. Check out our ‘body-cut’ effectHope 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 – CSS Calendars
Author: Gabi (enxaneta)
Links: Source Code / Demo
Created on: January 26, 2016
Made with: HTML, CSS, JS
Tags: flexbox, calendar, responsive
22. Calendar Mockup – CSS Calendars
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 – CSS Calendars
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 – CSS Calendars
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 – CSS Calendars
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 – CSS Calendars
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 – CSS Calendars
David Khourshid and Stephen Shaw create a click & drag date picker to answer a viewer question about event tracking.
Author: @keyframers (keyframers)
Links: Source Code / Demo
Created on: January 13, 2020
Made with: HTML, SCSS, JS
Tags: keyframers, calendar, date-picker, input, drag
Conclusion for CSS calendars code and Demo
Hope this code and post will help you implement the CSS calendars code and Demo. if you need any help or any feedback give it in the comment section or if you have a good idea about this post you can give it in the comment section. Your comment will help us to help you more and improve us.