In this article, we listed the hand-picked awesome css calendars developed using css, html, JavaScript, jQuery, etc. Listed tutorials well played with colors, gradients, dynamic, event pick, event selection or responsive. some of the calendars are have beautiful animation effects using transitions. Demo and download available on each tutorial. calendars can be used directly without any changes and could be small changes based on your needs.
Article will be helpful for designers and non-coders.
Comment your favorite calendar or comment the calendar which you admired from external resource.
Collection of diffrent types of calendars. Below Hand-picked calendars are covered flat, gradient, colorful, jQuery, etc.
1) Clocks and Calendars
Demo Image: Clocks and Calendars
Clocks and Calendars
Author: Justin Created: APRIL 17, 2015 Made with: HTML, CSS and JavaScript
2) Tear off calendar
Demo Image: Tear off calendar Tear off calendar made with Vanilla Javascript.
Author: Nikita Hlopov Created: JANUARY 19, 2019 Made with: HTML, CSS and JavaScript
3) Full calendar based reservation system
Demo Image: Full calendar based reservation system Full calendar based Interactive reservation system
Author: Brook Yang Created: MAY 20, 2016 Made with: HTML, CSS and JavaScript
4) Interactive Calendar App
Demo Image: Interactive Calendar App Calendar generates itself upon user’s entry of requested year and month. Scales to viewport using vw / vh —[ table is generated w/JS ]
Author: Tiffany Rayside Created: JUNE 17, 2015 Made with: HTML, CSS and JavaScript
5) CSS grid calendar
Demo Image: CSS grid calendar CSS grid calendar
Author: Mert Nerukuc Created: SEPTEMBER 06, 2018 Made with: HTML, CSS
6) It’s A Calendar Sort Of Thing
Demo Image: It’s A Calendar Sort Of Thing It’s A Calendar Sort Of Thing
Author: Jack Thomson Created: JULY 16, 2018 Made with: HTML, CSS and JavaScript
7) Simple vanilla js calendar
Demo Image: Simple vanilla js calendar simple dynamic, js calendar. main function accepts 3 params: target selector String date String (optional) data Array (optional)
Author: Brett Rogerson Created: APRIL 08, 2017 Made with: HTML, CSS and JavaScript
8) Flexbox responsive calendar
Demo Image: Flexbox responsive calendar Flexbox responsive calendar
Author: Gabi Created: Updated JUNE 17, 2018 Made with: HTML, CSS and JavaScript
9) Windows Fluent Design Calendar
Demo Image: 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.
Author: Tom Created: MAY 15, 2017 Made with: HTML, CSS
10) React date range picker
Demo Image: React date range picker Date picker in React, you can select a range of dates.
Author: Rob Vermeer Created: AUGUST 29, 2016 Made with: HTML, CSS and JavaScript
11) Calendar Mockup
Demo Image: Calendar Mockup Very quick mockup of calendar.
Author: Dan Couper Created: JULY 05, 2018 Made with: HTML, CSS
12) Material Calendar
Demo Image: Material Calendar (click the days!) Another Dribbble shot recreation of the calendar.
Author: Short Created: OCTOBER 06, 2016 Made with: HTML, CSS and JavaScript
13) Simple Calendar build with ReactJs and Flexbox
Demo Image: ReactJs simple Calendar Calendar widget built with React and Flexbox
Author: Nick VanMeter Created: OCTOBER 21, 2016 Made with: HTML, CSS and JavaScript
14) Responsive Google Calendar Embed
Demo Image: Responsive Google Calendar Embed This demo shows how to embed a Google Calendar so that it is responsive. The basic technique is to wrap the iframe embed code you get from Google with a div. We give that div the class name googleCalendar. Then we set the Google Map iFrame inside of that to cover the width and height of the googleCalendar div. You can change the width and height of the googleCalendar div and the calendar till change along with it.
Author: Christopher Stein Created: NOVEMBER 13, 2017 Made with: HTML, CSS
15) Semantic HTML/CSS calendar-style date display
Demo Image: Semantic HTML/CSS calendar-style date display Markup uses HTML5 element. CSS makes the date look like a calendar page. The position: absolute implementation works on all browsers. The inline-flex implementation requires a fairly recent browser: Ok in IE11, Chrome 29, Firefox 22; Broken in IE10, Chrome 28, Firefox 21, Safari 6.1, and most mobile browsers.
Author: Denilson Figueiredo de Sá Created: date Made with: HTML, CSS
16) Calendar with dynamic data
Demo Image: Calendar with dynamic data.
Author: Nikita Dubko Created: MARCH 24, 2017 Made with: HTML, CSS and JavaScript
17) VueJS Calendar Component
Demo Image: VueJS Calendar Component A responsive calendar component written with the awesome VueJS. Should meet accessibility requirements and very easily adapt to different screen sizes. Can easily be adapted to pull event data from an external source.
Author: Altitude Created: JANUARY 28, 2016 Made with: HTML, CSS and JavaScript
18) Calendar in ReactJs
Demo Image: Calendar in ReactJs Calendar using ReactJs (beginner level)
Author: Ricardo Barbosa Created: AUGUST 16, 2016 Made with: HTML, CSS and JavaScript
19) Daily CSS Images Calendar design
Demo Image: Daily CSS Images Calendar design Daily CSS Images Day 09 Calendar
Author: Alex Johnson Created: JUNE 08, 2017 Made with: HTML, CSS
20) CSS-only Calendar App Concept
Demo Image: CSS-only Calendar App Concept Another Dribbble rework of an original shot by Sergey Valiukh. Chrome and Safari only, for now.
Author: David Khourshid Created: AUGUST 03, 2015 Made with: HTML, CSS
21) Wim Crouwel’s Calendar (CSS Grid)
Demo Image: Wim Crouwel’s Calendar (CSS Grid) Wim Crouwel’s famous calendar — made with CSS Grid.
Author: Chris Droom Created: MAY 11, 2017 Made with: HTML, CSS and JavaScript
22) Calendar Flip Animation
Demo Image: Calendar Flip Animation Calendar Flip Animation
Author: Gabriel Colombo Created: FEBRUARY 10, 2017 Made with: HTML, CSS and JavaScript
23) Iconifying Content - Calendar
Demo Image: Monthly calendar icons that expand to show more details when clicked.
Author: Will Boyd Created: MAY 19, 2015 Made with: HTML, CSS and JavaScript
24) Calendar Javascript Library
Demo Image: Calendar Javascript Library Calendar Javascript Library with event capture
Author: Nizar Created: DECEMBER 15, 2018 Made with: HTML, CSS and JavaScript
25) Google Calendar - Animated Icon
Demo Image: Google Calendar - Animated Icon The brand new Google Calendar icon design
Author: Bhakti Al Akbar Created: MARCH 04, 2016 Made with: HTML, CSS and JavaScript
26) Flexible Flat Calendar
Demo Image: Flexible Calendar Flexible Calendar
Author: MaCeLMp4 Created: NOVEMBER 13, 2013 Made with: HTML, CSS and JavaScript
27) Circular Calendar Display
Demo Image: Circular Calendar Display A circular calendar and clock display, with and added weather and daily activity widget mock-ups.
Author: Matthew Juggins Created: SEPTEMBER 25, 2016 Made with: HTML, CSS and JavaScript
28) Semantic Tableless Calendar
Demo Image: Semantic Tableless Calendar A proof of concept for a semantic tableless calendar.
Author: Altitude Created: JULY 15, 2013 Made with: HTML, CSS and JavaScript
29) Pure CSS Calendar Icon
Demo Image: Pure CSS Calendar Icon Pure CSS Calendar Icon can be used in article.
Author: Pankaj Parashar Created: FEBRUARY 24, 2013 Made with: HTML, CSS
30) Bootstrap Year Calendar
Demo Image: Bootstrap Year Calendar Bootstrap Year Calendar.
Author: MAHESH AMBURE Created: MARCH 19, 2016 Made with: HTML, CSS and JavaScript
31) Simple calendar with notes panel
Demo Image: Simple calendar with notes panel Simple calendar with notes panel.
Author: Alex Oliver Created: SEPTEMBER 08, 2013 Made with: CSS, HTML
32) Flexible Calendar
Demo Image: Flexible Calendar Flexible and responsive Calendar
Author: MaCeLMp4 Created: NOVEMBER 13, 2013 Made with: CSS, HTML and JavaScript
33) FullCalendar drag & drop events between multiple calendars
Demo Image: FullCalendar drag & drop events between multiple calendars Drag and drop events between calendars and to draggable events.
Author: Subodh Ghulaxe Created: FEBRUARY 17, 2015 Made with: CSS, HTML and JavaScript
34) Flat and Simple Calendar
Demo Image: Flat and Simple Calendar Nice work - but if you would use this in a real project there would be some codestyling issues, also you could improve your code by not writing td.xyz instead do nesting like td { &.xyz }.
In your JS you could improve the code by more valuable variablenames
Author: Mark Created: NOVEMBER 08, 2015 Made with: CSS, HTML and JavaScript
35) CSS Colorful Calendar Concept
Demo Image: CSS-only Colorful Calendar Concept CSS 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.
Author: David Khourshid Created: NOVEMBER 09, 2015 Made with: CSS, HTML
36) Bootstrap compatable calendar
Demo Image: Bootstrap compatable calendar bootstrap calendar
Author: Bill Barry Created: SEPTEMBER 25, 2014 Made with: CSS, HTML and JavaScript
37) Simple calendar
Demo Image: Simple calendar Calendar for a little project. The calendar is dynamically built using JS, using the current day as the reference. Something you can do is to store all the current week’s events using an hidden field in you favourite format (eg : JSON). Then when you build your calendar, you can add a specific style (eg : “hover-event”) for each day of the current week referenced in event’s week list stored in your hidden field. In the same time, you can attach an hover event to “.hover-event” elements to show the corresponding event.
Author: B8bop Created: SEPTEMBER 05, 2013 Made with: HTML, CSS and JavaScript
38) Event Calendar Widget
Demo Image: Event Calendar Widget demo Event Calendar Widget A nice looking calendar with nice transistions.
Author: Paul Navasard Created: FEBRUARY 16, 2014 Made with: HTML, CSS and JavaScript
