w3 tweaks
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Web Tools
    • Beautifiers
    • Minifiers
    • Encoders & Decoders
w3 tweaks
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Web Tools
    • Beautifiers
    • Minifiers
    • Encoders & Decoders
w3 tweaks
No Result
View All Result

38 CSS Calendars

by CV
September 25, 2019
in Media

In this article, we listed the hand-picked awesome css calendars developed using css, html, JavaScript, jQuery, etc. Listed tutorials well played with colors, gradients, dynamic, event pick, event selection or responsive. some of the calendars are have beautiful animation effects using transitions. Demo and download available on each tutorial. calendars can be used directly without any changes and could be small changes based on your needs.

RelatedPosts

Animated Fullscreen and grid view Slider

Unicycle Range Slider

15 CSS Sliders

10 CSS Logo Designs

CSS Advent Calendar

HTML Audio Player

Article will be helpful for designers and non-coders.

Comment your favorite calendar or comment the calendar which you admired from external resource.

Collection of diffrent types of calendars. Below Hand-picked calendars are covered flat, gradient, colorful, jQuery, etc.

1) Clocks and Calendars

Clocks and Calendars
Demo Image: Clocks and Calendars

Clocks and Calendars

Tutorial/codes – Demo

Author:
Justin
Created:
APRIL 17, 2015
Made with:
HTML, CSS and JavaScript

2) Tear off calendar

Tear off calendar
Demo Image: Tear off calendar

Tear off calendar made with Vanilla Javascript.

Tutorial/codes – Demo

Author:
Nikita Hlopov
Created:
JANUARY 19, 2019
Made with:
HTML, CSS and JavaScript

3) Full calendar based reservation system

Full calendar based reservation system
Demo Image: Full calendar based reservation system

Full calendar based Interactive reservation system

Tutorial/codes – Demo

Author:
Brook Yang
Created:
MAY 20, 2016
Made with:
HTML, CSS and JavaScript

4) Interactive Calendar App

Interactive Calendar App
Demo Image: Interactive Calendar App

Calendar generates itself upon user’s entry of requested year and month. Scales to viewport using vw / vh –[ table is generated w/JS ]

Tutorial/codes – Demo

Author:
Tiffany Rayside
Created:
JUNE 17, 2015
Made with:
HTML, CSS and JavaScript

5) CSS grid calendar

CSS grid calendar
Demo Image: CSS grid calendar

CSS grid calendar

Tutorial/codes – Demo

Author:
Mert Nerukuc
Created:
SEPTEMBER 06, 2018
Made with:
HTML, CSS

6) It’s A Calendar Sort Of Thing

It's A Calendar Sort Of Thing
Demo Image: It’s A Calendar Sort Of Thing

It’s A Calendar Sort Of Thing

Tutorial/codes – Demo

Author:
Jack Thomson
Created:
JULY 16, 2018
Made with:
HTML, CSS and JavaScript

7) Simple vanilla js calendar

Simple vanilla js calendar
Demo Image: Simple vanilla js calendar

simple dynamic, js calendar. main function accepts 3 params: target selector String date String (optional) data Array (optional)

Tutorial/codes – Demo

Author:
Brett Rogerson
Created:
APRIL 08, 2017
Made with:
HTML, CSS and JavaScript

8) Flexbox responsive calendar

Flexbox responsive calendar
Demo Image: Flexbox responsive calendar

Flexbox responsive calendar

Tutorial/codes – Demo

Author:
Gabi
Created:
Updated JUNE 17, 2018
Made with:
HTML, CSS and JavaScript

9) Windows Fluent Design Calendar

Windows Fluent Design Calendar
Demo Image: 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.

Tutorial/codes – Demo

Author:
Tom
Created:
MAY 15, 2017
Made with:
HTML, CSS

10) React date range picker

React date range picker
Demo Image: React date range picker

Date picker in React, you can select a range of dates.

Tutorial/codes – Demo

Author:
Rob Vermeer
Created:
AUGUST 29, 2016
Made with:
HTML, CSS and JavaScript

11) Calendar Mockup

Calendar Mockup
Demo Image: Calendar Mockup

Very quick mockup of calendar.

Tutorial/codes – Demo

Author:
Dan Couper
Created:
JULY 05, 2018
Made with:
HTML, CSS

12) Material Calendar

Material Calendar (click the days!)
Demo Image: Material Calendar (click the days!)

Another Dribbble shot recreation of the calendar.

Tutorial/codes – Demo

Author:
Short
Created:
OCTOBER 06, 2016
Made with:
HTML, CSS and JavaScript

13) Simple Calendar build with ReactJs and Flexbox

ReactJs simple Calendar
Demo Image: ReactJs simple Calendar

Calendar widget built with React and Flexbox

Tutorial/codes – Demo

Author:
Nick VanMeter
Created:
OCTOBER 21, 2016
Made with:
HTML, CSS and JavaScript

14) Responsive Google Calendar Embed

Responsive Google Calendar Embed
Demo Image: Responsive Google Calendar Embed

This demo shows how to embed a Google Calendar so that it is responsive. The basic technique is to wrap the iframe embed code you get from Google with a div. We give that div the class name googleCalendar. Then we set the Google Map iFrame inside of that to cover the width and height of the googleCalendar div. You can change the width and height of the googleCalendar div and the calendar till change along with it.

Tutorial/codes – Demo

Author:
Christopher Stein
Created:
NOVEMBER 13, 2017
Made with:
HTML, CSS

15) Semantic HTML/CSS calendar-style date display

Semantic HTML/CSS calendar-style date display
Demo Image: Semantic HTML/CSS calendar-style date display

Markup uses HTML5 element. CSS makes the date look like a calendar page. The position: absolute implementation works on all browsers. The inline-flex implementation requires a fairly recent browser: Ok in IE11, Chrome 29, Firefox 22; Broken in IE10, Chrome 28, Firefox 21, Safari 6.1, and most mobile browsers.

Tutorial/codes – Demo

Author:
Denilson Figueiredo de Sá
Created:
date
Made with:
HTML, CSS

16) Calendar with dynamic data

38 CSS Calendars 1
Demo Image:

Calendar with dynamic data.

Tutorial/codes – Demo

Author:
Nikita Dubko
Created:
MARCH 24, 2017
Made with:
HTML, CSS and JavaScript

17) VueJS Calendar Component

VueJS Calendar Component
Demo Image: VueJS Calendar Component

A responsive calendar component written with the awesome VueJS. Should meet accessibility requirements and very easily adapt to different screen sizes. Can easily be adapted to pull event data from an external source.

Tutorial/codes – Demo

Author:
Altitude
Created:
JANUARY 28, 2016
Made with:
HTML, CSS and JavaScript

18) Calendar in ReactJs

Calendar in ReactJs
Demo Image: Calendar in ReactJs

Calendar using ReactJs (beginner level)

Tutorial/codes – Demo

Author:
Ricardo Barbosa
Created:
AUGUST 16, 2016
Made with:
HTML, CSS and JavaScript

19) Daily CSS Images Calendar design

Daily CSS Images Calendar design
Demo Image: Daily CSS Images Calendar design

Daily CSS Images Day 09 Calendar

Tutorial/codes – Demo

Author:
Alex Johnson
Created:
JUNE 08, 2017
Made with:
HTML, CSS

20) CSS-only Calendar App Concept

CSS-only Calendar App Concept
Demo Image: CSS-only Calendar App Concept

Another Dribbble rework of an original shot by Sergey Valiukh. Chrome and Safari only, for now.

Tutorial/codes – Demo

Author:
David Khourshid
Created:
AUGUST 03, 2015
Made with:
HTML, CSS

21) Wim Crouwel’s Calendar (CSS Grid)

Wim Crouwel's Calendar (CSS Grid)
Demo Image: Wim Crouwel’s Calendar (CSS Grid)

Wim Crouwel’s famous calendar — made with CSS Grid.

Tutorial/codes – Demo

Author:
Chris Droom
Created:
MAY 11, 2017
Made with:
HTML, CSS and JavaScript

22) Calendar Flip Animation

Calendar Flip Animation
Demo Image: Calendar Flip Animation

Calendar Flip Animation

Tutorial/codes – Demo

Author:
Gabriel Colombo
Created:
FEBRUARY 10, 2017
Made with:
HTML, CSS and JavaScript

23) Iconifying Content – Calendar

38 CSS Calendars 2
Demo Image:

Monthly calendar icons that expand to show more details when clicked.

Tutorial/codes – Demo

Author:
Will Boyd
Created:
MAY 19, 2015
Made with:
HTML, CSS and JavaScript

24) Calendar Javascript Library

Calendar Javascript Library
Demo Image: Calendar Javascript Library

Calendar Javascript Library with event capture

Tutorial/codes – Demo

Author:
Nizar
Created:
DECEMBER 15, 2018
Made with:
HTML, CSS and JavaScript

25) Google Calendar – Animated Icon

Google Calendar - Animated Icon
Demo Image: Google Calendar – Animated Icon

The brand new Google Calendar icon design

Tutorial/codes – Demo

Author:
Bhakti Al Akbar
Created:
MARCH 04, 2016
Made with:
HTML, CSS and JavaScript

26) Flexible Flat Calendar

Flexible Calendar
Demo Image: Flexible Calendar

Flexible Calendar

Tutorial/codes – Demo

Author:
MaCeLMp4
Created:
NOVEMBER 13, 2013
Made with:
HTML, CSS and JavaScript

27) Circular Calendar Display

Circular Calendar Display
Demo Image: Circular Calendar Display

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

Tutorial/codes – Demo

Author:
Matthew Juggins
Created:
SEPTEMBER 25, 2016
Made with:
HTML, CSS and JavaScript

28) Semantic Tableless Calendar

Semantic Tableless Calendar
Demo Image: Semantic Tableless Calendar

A proof of concept for a semantic tableless calendar.

Tutorial/codes – Demo

Author:
Altitude
Created:
JULY 15, 2013
Made with:
HTML, CSS and JavaScript

29) Pure CSS Calendar Icon

Pure CSS Calendar Icon
Demo Image: Pure CSS Calendar Icon

Pure CSS Calendar Icon can be used in article.

Tutorial/codes – Demo

Author:
Pankaj Parashar
Created:
FEBRUARY 24, 2013
Made with:
HTML, CSS

30) Bootstrap Year Calendar

Bootstrap Year Calendar
Demo Image: Bootstrap Year Calendar

Bootstrap Year Calendar.

Tutorial/codes – Demo

Author:
MAHESH AMBURE
Created:
MARCH 19, 2016
Made with:
HTML, CSS and JavaScript

31) Simple calendar with notes panel

Simple calendar with notes panel
Demo Image: Simple calendar with notes panel

Simple calendar with notes panel.

Tutorial/codes – Demo

Author:
Alex Oliver
Created:
SEPTEMBER 08, 2013
Made with:
CSS, HTML

32) Flexible Calendar

Flexible Calendar
Demo Image: Flexible Calendar

Flexible and responsive Calendar

Tutorial/codes – Demo

Author:
MaCeLMp4
Created:
NOVEMBER 13, 2013
Made with:
CSS, HTML and JavaScript

33) FullCalendar drag & drop events between multiple calendars

FullCalendar drag & drop events between multiple calendars
Demo Image: FullCalendar drag & drop events between multiple calendars

Drag and drop events between calendars and to draggable events.

Tutorial/codes – Demo

Author:
Subodh Ghulaxe
Created:
FEBRUARY 17, 2015
Made with:
CSS, HTML and JavaScript

34) Flat and Simple Calendar

Flat and Simple Calendar
Demo Image: Flat and Simple Calendar

Nice work – but if you would use this in a real project there would be some codestyling issues, also you could improve your code by not writing td.xyz instead do nesting like td { &.xyz }.

In your JS you could improve the code by more valuable variablenames

Tutorial/codes – Demo

Author:
Mark
Created:
NOVEMBER 08, 2015
Made with:
CSS, HTML and JavaScript

35) CSS Colorful Calendar Concept

CSS-only Colorful Calendar Concept
Demo Image: CSS-only Colorful Calendar Concept

CSS 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.

Tutorial/codes – Demo

Author:
David Khourshid
Created:
NOVEMBER 09, 2015
Made with:
CSS, HTML

36) Bootstrap compatable calendar

Bootstrap compatable calendar
Demo Image: Bootstrap compatable calendar

bootstrap calendar

Tutorial/codes – Demo

Author:
Bill Barry
Created:
SEPTEMBER 25, 2014
Made with:
CSS, HTML and JavaScript

37) Simple calendar

Simple calendar
Demo Image: Simple calendar

Calendar for a little project. The calendar is dynamically built using JS, using the current day as the reference. Something you can do is to store all the current week’s events using an hidden field in you favourite format (eg : JSON). Then when you build your calendar, you can add a specific style (eg : “hover-event”) for each day of the current week referenced in event’s week list stored in your hidden field. In the same time, you can attach an hover event to “.hover-event” elements to show the corresponding event.

Tutorial/codes – Demo

Author:
B8bop
Created:
SEPTEMBER 05, 2013
Made with:
HTML, CSS and JavaScript

38) Event Calendar Widget

Event Calendar Widget demo
Demo Image: Event Calendar Widget demo

Event Calendar Widget A nice looking calendar with nice transistions.

Tutorial/codes – Demo

Author:
Paul Navasard
Created:
FEBRUARY 16, 2014
Made with:
HTML, CSS and JavaScript
Tags: animationCalendarcalendarsCSScss calendarshtmlJavascriptjqueryresponsive
Previous Post

Simple calendar with notes panel

Next Post

Bootstrap Year Calendar

Related Posts

Animated Fullscreen and grid view Slider
Media

Animated Fullscreen and grid view Slider

July 8, 2020
Unicycle Range Slider
Media

Unicycle Range Slider

July 7, 2020
CSS Sliders
Media

15 CSS Sliders

June 27, 2020
10 CSS Logo Designs 3
Media

10 CSS Logo Designs

May 11, 2020
CSS Advent Calendar 4
Media

CSS Advent Calendar

December 24, 2019
HTML Audio Player 5
Media

HTML Audio Player

December 10, 2019
Next Post
Bootstrap Year Calendar 6

Bootstrap Year Calendar

Leave Comment

Popular Posts

41 Multi step HTML forms

92 CSS Text styling and Effects

99 Hand-picked CSS Card Collections

20 HTML & CSS pricing tables

11 CSS Shopping Cart UI/UX

76 Hand Picked CSS Music Players

14 CSS Divider Collections

38 CSS Calendars

Tags

Angularjs (20) AngularJS Tutorials (16) animation (70) animation examples (14) beautiful (12) Button (24) button hover effect (15) Buttons (24) Calendar (38) calendars (38) cards (24) click animation (12) click buttons (19) CSS (129) css3 (20) css buttons (54) css calendar (36) css calendars (37) css effects (22) css hover effects (31) demo (18) effect (33) effects (41) essentials (48) Free Tool (13) hover (23) hover animation (31) Hover effects (40) html (86) inputs (14) Javascript (68) jquery (26) js (18) loaders (14) menu (13) mouse hover effects (36) navigation (14) pure (13) simple (13) text effects (24) Toggle Switches (13) tool (12) tutorial (32) tutorials (14) YouTube (13)
No Result
View All Result
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Web Tools
    • Beautifiers
    • Minifiers
    • Encoders & Decoders

© 2021 w3tweaks

Welcome Back!

Login to your account below

Forgotten Password?

Create New Account!

Fill the forms below to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In

Add New Playlist