Collection of free HTML and CSS calendar code examplessimple, 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.

 Demo and Code

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

Calendar

Calendar with HTML, CSS and JavaScript. Made by Mark.

See the Pen
Calendar
by Mark (@xmark)
on CodePen.

 Demo and Code

Flexbox Calendar

Responsive flexbox calendar with retina images. Made by Dudley Storey.

See the Pen
Responsive Flexbox Calendar w/ Retina Images
by Dudley Storey (@dudleystorey)
on CodePen.

 Demo and Code

Haml Calendar

HTML and CSS calendar. Made by Katy DeCorah.

See the Pen
Haml Calendar
by Katy DeCorah (@katydecorah)
on CodePen.

 Demo and Code

Calendario

A flexible calendar plugin. Made by Romswell Roswell Parian Paucar.

See the Pen
Calendario
by Romswell Roswell Parian Paucar (@romswellparian)
on CodePen.

 Demo and Code

Bootstrap Compatable Calendar

Bootstrap calendar. Made by Bill Barry.

See the Pen
bootstrap compatable calendar
by Bill Barry (@bbarry)
on CodePen.

 Demo and Code

Event Calendar Widget

A nice looking calendar with nice transistions. Made by Paul Navasard.

See the Pen
Event Calendar Widget
by Paul Navasard (@peanav)
on CodePen.

 Demo and Code

Calendar

Calendar with HTML, CSS and JavaScript. Made by B8bop.

See the Pen
Calendar
by B8bop (@B8bop)
on CodePen.

 Demo and Code