Collection of free HTML and CSS calendar grid code examples from Codepen and other resources.

Author

  • Johnny Fekete

Links

Made with

  • HTML (Pug) / CSS (PostCSS)

About a code

CSS Christmas Calendar

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: CSS Grid: Calendar

Author

  • Olivia Ng

Links

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

CSS Grid: Calendar

Compatible browsers: Chrome, Edge (partial), Firefox, Opera, Safari

Responsive: no

Dependencies: simple-line-icons.css

Demo image: CSS Grid Calendar

Author

  • Mert Cukuren

Links

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

CSS Grid Calendar

HTML calendar with CSS Grid.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: CSS Grid Calendar

Author

  • Adrià

Links

Made with

  • HTML
  • CSS

About the code

CSS Grid Calendar

HTML and CSS grid calendar.

Demo image: Dynamic Data Calendar

Author

  • Nikita Dubko

Links

Made with

  • HTML/Pug
  • CSS/SCSS
  • JavaScript (jQuery.js)

About the code

Dynamic Data Calendar

Calendar with dynamic data.

Demo image: Responsive Flexbox Calendar

Author

  • Dudley Storey

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

Responsive Flexbox Calendar

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Calendar Mockup

Author

  • Dan Couper

Links

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Calendar Mockup

Very quick mockup of calendar.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Flexbox Responsive Calendar

Author

  • Gabi

Links

Made with

  • HTML / CSS / JS

About a code

Flexbox Responsive Calendar

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -