15+ CSS Calendar Grids

A mesmerising collection of 15+ HTML and CSS calendar grid code examples. Each item is designed to scan an entire month or week at a single glance.

1. Responsive Flexbox Calendar w/ Retina Images

See the Pen <a href="https://codepen.io/dudleystorey/pen/MagNaY"> Responsive Flexbox Calendar w/ Retina Images</a> by Dudley Storey (<a href="https://codepen.io/dudleystorey">@dudleystorey</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Dudley Storey
Source: Code / Demo
Created on: AUGUST 30, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

2. Calendar Mockup

See the Pen <a href="https://codepen.io/DanielCouper/pen/eNveXy"> Calendar Mockup</a> by Dan Couper (<a href="https://codepen.io/DanielCouper">@DanielCouper</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Dan Couper
Source: Code / Demo
Created on: JUNE 3, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

3. CSS grid calendar week view

See the Pen <a href="https://codepen.io/kjellmf/pen/qgxyVJ"> CSS grid calendar week view</a> by Kjell Magne Fauske (<a href="https://codepen.io/kjellmf">@kjellmf</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Kjell Magne Fauske
Source: Code / Demo
Created on: FEBRUARY 9, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

4. CSS Grid calendar

See the Pen <a href="https://codepen.io/afontcu/pen/bapBxv"> CSS Grid calendar</a> by Adrià (<a href="https://codepen.io/afontcu">@afontcu</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Adrià
Source: Code / Demo
Created on: DECEMBER 19, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

5. CSS Grid calendar

See the Pen <a href="https://codepen.io/webdevwill/pen/Xvxaxd"> CSS Grid calendar</a> by Will (<a href="https://codepen.io/webdevwill">@webdevwill</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Will
Source: Code / Demo
Created on: AUGUST 11, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

6. CSS Grid: Calendar

See the Pen <a href="https://codepen.io/oliviale/pen/QYqybo"> CSS Grid: Calendar</a> by Olivia Ng (<a href="https://codepen.io/oliviale">@oliviale</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Olivia Ng
Source: Code / Demo
Created on: FEBRUARY 6, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

7. CSS Grid – Calendar

See the Pen <a href="https://codepen.io/andreas-litis/pen/MNYvKb"> CSS Grid – Calendar</a> by Andreas Litis (<a href="https://codepen.io/andreas-litis">@andreas-litis</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Andreas Litis
Source: Code / Demo
Created on: JULY 19, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

8. CSS Grid: Advent Calendar

See the Pen <a href="https://codepen.io/oliviale/pen/QWKNvex"> CSS Grid: Advent Calendar</a> by Olivia Ng (<a href="https://codepen.io/oliviale">@oliviale</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Olivia Ng
Source: Code / Demo
Created on: DECEMBER 6, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

9. Flexbox responsive calendar

See the Pen <a href="https://codepen.io/enxaneta/pen/gPeZdP"> Flexbox responsive calendar</a> by Gabi (<a href="https://codepen.io/enxaneta">@enxaneta</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Gabi
Source: Code / Demo
Created on: JANUARY 27, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

10. CSS Grid Calendar

See the Pen <a href="https://codepen.io/nickpiesco/pen/pRWzEv"> CSS Grid Calendar</a> by Nick Piesco (<a href="https://codepen.io/nickpiesco">@nickpiesco</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Nick Piesco
Source: Code / Demo
Created on: JANUARY 26, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS(SCSS), JavaScript

11. Calendar

See the Pen <a href="https://codepen.io/dark_mefody/pen/VpdrGG"> #DailyCssImages – Day 9. Calendar</a> by Nikita Dubko (<a href="https://codepen.io/dark_mefody">@dark_mefody</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Nikita Dubko
Source: Code / Demo
Created on: MARCH 24, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS), JavaScript

12. CSS Grid Calendar

See the Pen <a href="https://codepen.io/arthurra/pen/ddzozK"> CSS Grid Calendar</a> by Ryan Arthur (<a href="https://codepen.io/arthurra">@arthurra</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ryan Arthur
Source: Code / Demo
Created on: FEBRUARY 13, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

13. CSS Grid advent calendar

See the Pen <a href="https://codepen.io/Dtap/pen/oNzeJrO"> CSS Grid advent calendar</a> by David Tappenden (<a href="https://codepen.io/Dtap">@Dtap</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: David Tappenden
Source: Code / Demo
Created on: DECEMBER 22, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

14. CSS Grid Calendar with Moment and Vue

See the Pen <a href="https://codepen.io/leemartin/pen/KJqPgQ"> CSS Grid Calendar with Moment and Vue</a> by Lee Martin (<a href="https://codepen.io/leemartin">@leemartin</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Lee Martin
Source: Code / Demo
Created on: FEBRUARY 3, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

15. CSS Grid: Calendar

See the Pen <a href="https://codepen.io/geoffgraham/pen/vWXBea"> CSS Grid: Calendar</a> by Geoff Graham (<a href="https://codepen.io/geoffgraham">@geoffgraham</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Geoff Graham
Source: Code / Demo
Created on: NOVEMBER 7, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

16. CSS grid calendar

See the Pen <a href="https://codepen.io/knyttneve/pen/QVqyNg"> CSS grid calendar</a> by Mert Cukuren (<a href="https://codepen.io/knyttneve">@knyttneve</a>) on <a href="https://codepen.io">CodePen</a>. Author: Mert Cukuren
Source: Code / Demo
Created on: SEPTEMBER 6, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)