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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Responsive Calendar
Flexbox responsive calendar. Made by Gabi.
See the Pen
Flexbox responsive calendar by Gabi (@enxaneta)
on CodePen.
Calendar Mockup
Very quick mockup of calendar.Made by Dan Couper.
See the Pen
Calendar Mockup by Dan Couper (@DanielCouper)
on CodePen.
Calendar
Calendar with HTML, CSS and JS. Made by Dali.
See the Pen
Calendar – Daily UI #038 by Dali (@daliannyvieira)
on CodePen.
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.
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.
Calendar In ReactJs
Calendar using ReactJs (beginner level). Made by Ricardo Barbosa.
See the Pen
Calendar in ReactJs by Ricardo Barbosa (@RicardoBarbosa)
on CodePen.
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.
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.
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.
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.
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.
Calendar
Calendar with HTML, CSS and JavaScript. Made by Mark.
See the Pen
Calendar by Mark (@xmark)
on CodePen.
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.
Haml Calendar
HTML and CSS calendar. Made by Katy DeCorah.
See the Pen
Haml Calendar by Katy DeCorah (@katydecorah)
on CodePen.
Calendario
A flexible calendar plugin. Made by Romswell Roswell Parian Paucar.
See the Pen
Calendario by Romswell Roswell Parian Paucar (@romswellparian)
on CodePen.
Bootstrap Compatable Calendar
Bootstrap calendar. Made by Bill Barry.
See the Pen
bootstrap compatable calendar by Bill Barry (@bbarry)
on CodePen.
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.
Calendar
Calendar with HTML, CSS and JavaScript. Made by B8bop.
