CSS Calendars

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.

Full calendar based reservation system

Full calendar based Interactive reservation system

Author:
Brook Yang
Created:
MAY 20, 2016
Made with:
HTML, CSS and JavaScript
Demo Image: Full calendar based reservation system
Calendar, css calendar, calendars, css calendars, reservation

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
Demo Image: Interactive Calendar App
Interactive, Calendar, css calendar, calendars, css calendars

CSS grid calendar

CSS grid calendar

Author:
Mert Nerukuc
Created:
SEPTEMBER 06, 2018
Made with:
HTML, CSS
Demo Image: CSS grid calendar
grid, Calendar, css calendar, calendars, css calendars

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
Demo Image: It's A Calendar Sort Of Thing
Animation, click animation, Calendar, css calendar, calendars, css calendars, chat

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
Demo Image: Simple vanilla js calendar
Calendar, css calendar, simple calendar, calendars, css calendars, vanilla

Flexbox responsive calendar

Flexbox responsive calendar

Author:
Gabi
Created:
Updated JUNE 17, 2018
Made with:
HTML, CSS and JavaScript
Demo Image: Flexbox responsive calendar
flexbox, responsive, Calendar, css calendar, calendars, css calendars

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
Demo Image: Windows Fluent Design Calendar
responsive, Calendar, css calendar, calendars, css calendars, Fluent

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
Demo Image: React date range picker
ReactJS, Calendar, css calendar, calendars, css calendars

Calendar Mockup

Very quick mockup of calendar.

Author:
Dan Couper
Created:
JULY 05, 2018
Made with:
HTML, CSS
Demo Image: Calendar Mockup
Calendar, css calendar, simple calendar, calendars, css calendars

Material Calendar

Another Dribbble shot recreation of the calendar.

Author:
Short
Created:
OCTOBER 06, 2016
Made with:
HTML, CSS and JavaScript
Demo Image: Material Calendar (click the days!)
Calendar, css calendar, simple calendar, calendars, css calendars, Material

Simple Calendar build with ReactJs and Flexbox

Calendar widget built with React and Flexbox

Author:
Nick VanMeter
Created:
OCTOBER 21, 2016
Made with:
HTML, CSS and JavaScript
Demo Image: ReactJs simple Calendar
ReactJS, flexbox, Calendar, css calendar, calendars, css calendars

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
Demo Image: Responsive Google Calendar Embed
Calendar, css calendar, calendars, css calendars, google calendar

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
Demo Image: Semantic HTML/CSS calendar-style date display
Calendar, css calendar, simple calendar, calendars, css calendars

Calendar with dynamic data

Calendar with dynamic data.

Author:
Nikita Dubko
Created:
MARCH 24, 2017
Made with:
HTML, CSS and JavaScript
Demo Image:
dynamic, Calendar, css calendar, calendars, css calendars

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
Demo Image: VueJS Calendar Component
VueJS, Calendar, Event, css calendar, calendars, css calendars, events

Calendar in ReactJs

Calendar using ReactJs (beginner level)

Author:
Ricardo Barbosa
Created:
AUGUST 16, 2016
Made with:
HTML, CSS and JavaScript
Demo Image: Calendar in ReactJs
ReactJS, Calendar, css calendar, calendars, css calendars

Daily CSS Images Calendar design

Daily CSS Images Day 09 Calendar

Author:
Alex Johnson
Created:
JUNE 08, 2017
Made with:
HTML, CSS
Demo Image: Daily CSS Images Calendar design
Calendar, css calendar, simple calendar, calendars, css calendars

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
Demo Image: CSS-only Calendar App Concept
app, Calendar, css calendar, Colorful calendar, calendars, css calendars

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
Demo Image: Wim Crouwel's Calendar (CSS Grid)
grid, Calendar, css calendar, calendars, css calendars

Calendar Flip Animation

Calendar Flip Animation

Author:
Gabriel Colombo
Created:
FEBRUARY 10, 2017
Made with:
HTML, CSS and JavaScript
Demo Image: Calendar Flip Animation
Animation, click animation, flip animation, Calendar, css calendar, calendars, css calendars

Iconifying Content - Calendar

Monthly calendar icons that expand to show more details when clicked.

Author:
Will Boyd
Created:
MAY 19, 2015
Made with:
HTML, CSS and JavaScript
Demo Image:
Calendar, css calendar, calendars, css calendars, Iconifying, Content

Calendar Javascript Library

Calendar Javascript Library with event capture

Author:
Nizar
Created:
DECEMBER 15, 2018
Made with:
HTML, CSS and JavaScript
Demo Image: Calendar Javascript Library
Calendar, css calendar, flat calendar, simple calendar, calendars, css calendars

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
Demo Image: Google Calendar - Animated Icon
Calendar, css calendar, calendars, css calendars, google calendar

Flexible Flat Calendar

Flexible Calendar

Author:
MaCeLMp4
Created:
NOVEMBER 13, 2013
Made with:
HTML, CSS and JavaScript
Demo Image: Flexible Calendar
Calendar, css calendar, flat calendar, simple calendar, calendars, css calendars

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
Demo Image: Circular Calendar Display
Calendar, Widget, css calendar, calendars, css calendars, Circular, Display, clock, weather

Semantic Tableless Calendar

A proof of concept for a semantic tableless calendar.

Author:
Altitude
Created:
JULY 15, 2013
Made with:
HTML, CSS and JavaScript
Demo Image: Semantic Tableless Calendar
Calendar, css calendar, calendars, css calendars, Semantic, Tableless

Pure CSS Calendar Icon

Pure CSS Calendar Icon can be used in article.

Author:
Pankaj Parashar
Created:
FEBRUARY 24, 2013
Made with:
HTML, CSS
Demo Image: Pure CSS Calendar Icon
Calendar, css calendar, simple calendar, calendars, css calendars

Bootstrap Year Calendar

Bootstrap Year Calendar.

Author:
MAHESH AMBURE
Created:
MARCH 19, 2016
Made with:
HTML, CSS and JavaScript
Demo Image: Bootstrap Year Calendar
bootstrap, Calendar, css calendar, simple calendar, calendars, css calendars, year

Simple calendar with notes panel

Simple calendar with notes panel.

Author:
Alex Oliver
Created:
SEPTEMBER 08, 2013
Made with:
CSS, HTML
Demo Image: Simple calendar with notes panel
Calendar, css calendar, flat calendar, simple calendar, calendars, css calendars

Flexible Calendar

Flexible and responsive Calendar

Author:
MaCeLMp4
Created:
NOVEMBER 13, 2013
Made with:
CSS, HTML and JavaScript
Demo Image: Flexible Calendar
Javascript, responsive, Calendar, css calendar, dates, calendars, css calendars, Flexible

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
Demo Image: FullCalendar drag & drop events between multiple calendars
draggable, Calendar, css calendar, calendars, css calendars, Drag and drop

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
Demo Image: Flat and Simple Calendar
Javascript, Calendar, css calendar, flat calendar, simple calendar, dates, calendars, css calendars

CSS 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
Demo Image: CSS-only Colorful Calendar Concept
Javascript, Calendar, css calendar, Colorful, Colorful calendar, dates, calendars, css calendars

Bootstrap compatable calendar

bootstrap calendar

Author:
Bill Barry
Created:
SEPTEMBER 25, 2014
Made with:
CSS, HTML and JavaScript
Demo Image: Bootstrap compatable calendar
Javascript, bootstrap, Calendar, css calendar, dates, calendars, css calendars

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
Demo Image: Simple calendar
Javascript, Calendar, css calendar, flat calendar, dates, calendars, css calendars

Event Calendar Widget

Event Calendar Widget A nice looking calendar with nice transistions.

Author:
Paul Navasard
Created:
FEBRUARY 16, 2014
Made with:
HTML, CSS and JavaScript
Demo Image: Event Calendar Widget demo
Javascript, Calendar, Widget, Event, css calendar, dates, calendars, css calendars

Advertisement

Google Matched Content...