Top 39 CSS Calendars - Gpkumar.com

Table of Contents

Collection of free HTML and CSS calendar code examples: simple, responsive, event, etc.

CSS GRID: CALENDAR

Made with HTML (Pug) / CSS (SCSS) by Olivia Ng.

See the Pen
CSS Grid: Calendar by Olivia Ng (@oliviale)
on CodePen.

CSS CALENDAR UI DESIGN

HTML calendar UI design with CSS Grid. Made with HTML / CSS (SCSS) by mrnobody.

See the Pen
Online Tutorials / Calendar UI Design With CSS Grid | Pure Html CSS UI Design by mrnobody (@corvus-007)
on CodePen.

Demo and Code

CALENDAR MOBILE APP UI

Calendar mobile app UI in HTML and CSS. Made with HTML / CSS (SCSS) by Eliza Rajbhandari.

See the Pen
Calendar mobile app UI by Eliza Rajbhandari (@eliza-rjb)
on CodePen.

Demo and Code

CSS GRID CALENDAR

HTML calendar with CSS Grid. Made with HTML (Pug) / CSS (SCSS) by Mert Cukuren.

See the Pen
CSS grid calendar by Mert Cukuren (@knyttneve)
on CodePen.

Demo and Code

CALENDAR PLAN – TASKS EVENTS APP

Made with HTML / CSS (SCSS) by Ahmed Nasr.

See the Pen
Calendar Plan – Tasks Events App #DailyPractice by Ahmed Nasr (@ahmedhosna95)
on CodePen.

Demo and Code

LIGHT & DARK CALENDAR

Here is a light and dark version of a calendar planner page. Made with HTML / CSS (SCSS) by BradleyPJ.

See the Pen
Light & Dark Calendar by BradleyPJ (@BradleyPJ)
on CodePen.

Demo and Code

CSS GRID CALENDAR

HTML and CSS grid calendar. Made with HTML / CSS by Adrià.

See the Pen
CSS Grid calendar by Adrià (@afontcu)
on CodePen.

Demo and Code

SIMPLE CALENDAR

Clean and modern simple calendar. Made with HTML / CSS/LESS / JavaScript (jQuery.js) by jpag.

See the Pen
Simple Calendar by BrainUP (@jpag82)
on CodePen.

Demo and Code

DUOTONE CALENDAR

Duotone image with SVG filter. Made with HTML / CSS/Stylus / JavaScript (jQuery.js) by yumeeeei.

See the Pen
Duotone calendar by yumeeeei (@yumeeeei)
on CodePen.

Demo and Code

FLUENT DESIGN: CALENDAR

Based on the depth video concept from Microsoft’s Fluent Design. Made with HTML (Pug) / CSS (SCSS) / JavaScript by Antoinette Janus.

See the Pen
Fluent Design: Calendar by Antoinette Janus (@internette)
on CodePen.

Demo and Code

CALENDAR UI

Calendar with events in HTML and CSS. Made with HTML / CSS by Alex Cramer.

See the Pen
Daily CSS Images | 09 | Calendar by Alex Johnson (@IAmAlexJohnson)
on CodePen.

Demo and Code

CALENDAR MOCKUP

CSS only calendar mockup. Made with HTML / CSS / JavaScript by Jamie.

See the Pen
Calendar Mock (CSS Only) by Jamie (@jamiemggs)
on CodePen.

Demo and Code

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. Made with HTML / CSS by Tom.

See the Pen
Windows Fluent Design Calendar by Tom (@tomcwatts)
on CodePen.

Demo and Code

CALENDAR UI

Monthly calendar UI in HTML and CSS. Made with HTML / CSS by Davide Francesco Merico.

See the Pen
#DailyCSSImages 9 – Calendar by Davide Francesco Merico (@NeckersBOX)
on CodePen.

Demo and Code

CALENDAR

Simple calendar cards. Made with HTML / CSS/SCSS / JavaScript by Jocelyn.

See the Pen
Daily CSS Image 09: Calendar by Jocelyn (@jocegonz)
on CodePen.

Demo and Code

DYNAMIC DATA CALENDAR

Calendar with dynamic data. Made with HTML/Pug / CSS/SCSS / JavaScript (jQuery.js) by Nikita Dubko.

See the Pen
#DailyCssImages – Day 9. Calendar by Nikita Dubko (@dark_mefody)
on CodePen.

Demo and Code

PARALLAX FLIPPING CALENDAR

Flipping calendar with HTML, CSS and little JS. Made with HTML / CSS / JavaScript (jQuery.js) by Andreas Pihl Jrgensen.

See the Pen
Parallax flipping calendar by Andreas Pihl Jrgensen (@Antreas)
on CodePen.

Demo and Code

Calendar

A calendar that tells you how many events happened on a particular date. Made by Benjamin.

See the Pen
Calendar by Benjamin (@maggiben)
on CodePen.

Demo and Code

It’s A Calendar Sort Of Thing

Calendar with nice animations & interactions. Made by Jack Thomson.

See the Pen
It’s A Calendar Sort Of Thing by Jack Thomson (@Jackthomsonn)
on CodePen.

Demo and Code

Infinite Calendar

A liquid & ‘light-weight’ calendar. There’s no libraries in this exercise, it’s really hand-crafted. Made by Tadaima.

See the Pen
Infinite Calendar by Tadaima (@tadaima)
on CodePen.

Demo and Code

Responsive Calendar

Flexbox responsive calendar. Made by Gabi.

See the Pen
Flexbox responsive calendar by Gabi (@enxaneta)
on CodePen.

Demo and Code

Calendar Mockup

Very quick mockup of calendar.Made by Dan Couper.

See the Pen
Calendar Mockup by Dan Couper (@DanielCouper)
on CodePen.

Demo and Code

Calendar

Calendar with HTML, CSS and JS. Made by Dali.

See the Pen
Calendar – Daily UI #038 by Dali (@daliannyvieira)
on CodePen.

Demo and Code

Circular Calendar Display

A circular calendar and clock display, with and added weather and daily activity widget mock-ups. Made by Matthew Juggins.

See the Pen
Circular Calendar Display by Matthew Juggins (@mattjuggins)
on CodePen.

Demo and Code

React Date Range Picker

Date picker in React, you can select a range of dates. Made by Rob Vermeer.

See the Pen
React date range picker by Rob Vermeer (@RobVermeer)
on CodePen.

Demo and Code

Calendar In ReactJs

Calendar using ReactJs (beginner level). Made by Ricardo Barbosa.

See the Pen
Calendar in ReactJs by Ricardo Barbosa (@RicardoBarbosa)
on CodePen.

Demo and Code

Date And Time Picker

Date and time picker directive. Made by Jarom Vogel.

See the Pen
Date and Time Picker by Jarom Vogel (@jaromvogel)
on CodePen.

Demo and Code

Calendar App

This is a calendar application. It allows for browsing dates and selecting individual dates. You can schedule events on future days. Made by Joey Lea.

See the Pen
Calendar App by Joey Lea (@ovdojoey)
on CodePen.

Demo and Code

jQuery Datepicker Summer Vibe

Simple styling of the jQuery UI datepicker. Made by Håvard Brynjulfsen.

See the Pen
Daily UI #13 | jQuery Datepicker summer vibe by Håvard Brynjulfsen (@havardob)
on CodePen.

Demo and Code

Calendar And Clock

Calendar and clock with HTML, CSS and JavaScript. Made by mselmany.

See the Pen
Calendar and Clock by mselmany (@mselmany)
on CodePen.

Demo and Code

CSS-only 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. Works in all modern browsers. Made by David Khourshid.

See the Pen
CSS-only Colorful Calendar Concept by David Khourshid (@davidkpiano)
on CodePen.

Demo and Code