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.

Clocks and Calendars

Tear off calendar made with Vanilla Javascript.

Full calendar based Interactive reservation system

Calendar generates itself upon user's entry of requested year and month. Scales to viewport using vw / vh --[ table is generated w/JS ]

CSS grid calendar

It's A Calendar Sort Of Thing

simple dynamic, js calendar. main function accepts 3 params: target selector String date String (optional) data Array (optional)

Flexbox responsive 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.

Date picker in React, you can select a range of dates.

Very quick mockup of calendar.

Another Dribbble shot recreation of the calendar.

Calendar widget built with React and Flexbox

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.

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.

Calendar with dynamic data.

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.

Calendar using ReactJs (beginner level)

Daily CSS Images Day 09 Calendar