50+ jQuery CSS Free Calendar Scripts

Free Calendar Scripts – Are you looking for Free Calendar Scripts, If yes then in this post I’ve hand picked the 30+ Free Calendar Scripts that offer datetime functionality. Some are more developed than others and each plugin has its own set of benefits. The best part about using open source code is that it’s easy to customize for your own purpose.

Free Calendar Scripts

Following are the list of Free Calendar Scripts.

Event Calendar Widget DEMO

 Event Calendar Widget

A nice looking calendar with nice transistions. – By peanav

Calendar DEMO


Calendar I made for a little project. – By B8bop

Calendar DEMO


A calendar that tells you how many events happened on a particular date – By maggiben

bootstrap compatable calendar DEMO

 bootstrap compatable calendar

incomplete; bootstrap calendar – By bbarry

Calendar DEMO


View it at dribbble or Behance – By marcobiedermann

CSS-only Colorful Calendar Concept DEMO

 CSS-only Colorful Calendar Concept

Based on a Dribbble by Kirill and Ludmila Shevchenko. – By davidkpiano

Bootstrap responsive Calendar? DEMO

 Bootstrap responsive Calendar?

– By centerlinescores

Calendar DEMO


Simple calendar. – By miroot

Calendar DEMO


– By xmark

Responsive Calendar Pattern DEMO

 Responsive Calendar Pattern

Calendar Pattern thanks to the https://github.com/robertguss/CSS-Responsive-Calendar – By justincavery

FullCalendar drag & drop events between multiple calendars DEMO

 FullCalendar drag & drop events between multiple calendars

Drag and drop events between calendars and to draggable events. – By subodhghulaxe

Simple Calendar with json events DEMO

 Simple Calendar with json events

Simple Calendar Experiment. – By nakome

Calendar DEMO


A simple calendar with notes panel Based on this Dribbble entry http://dribbble.com/shots/995762-Calendar-Widget – By alexoliverwd

Flexible Calendar DEMO

 Flexible Calendar

Flexible Calendar – By MaCeLMp4

Round Calendar DEMO

 Round Calendar

View it at dribbble or Behance – By marcobiedermann

Calendar App DEMO

 Calendar App

This is a calendar application. It allows for browsing dates and selecting individual dates. You can schedule events on future days. – By ovdojoey

FlexCalendar DEMO


An Elegant Calendar Built With Angular.js – By Russian60

Infinite Calendar DEMO

 Infinite Calendar

A liquid & ‘light-weight’ calendar. There’s no libraries in this exercise, it’s really hand-crafted. Check out our ‘body-cut’ effect πŸ˜€ – By tadaima

Bootstrap Year Calendar DEMO

 Bootstrap Year Calendar

– By maheshambure21

Daily CSS Images | 09 | Calendar DEMO

 Daily CSS Images | 09 | Calendar

Daily CSS Images Day 09 Calendar – By IAmAlexJohnson

Flexible Calendar V1 DEMO

 Flexible Calendar V1

Flexible Calendar V1 – By MaCeLMp4

Simple JavaScript calendar DEMO

 Simple JavaScript calendar

Note: This is not a datepicker. Just a simple calendar that renders month, days, year. It’s made entirely with vanilla JavaScript. – By nikitahl

Pure CSS Calendar Icon DEMO

 Pure CSS Calendar Icon

Link – http://cssglobe.com/drawing-calendar-icon-with-css3/ – By pankajparashar

Semantic Tableless Calendar DEMO

 Semantic Tableless Calendar

A proof of concept for a semantic tableless calendar. – By altitudems

Circular Calendar Display DEMO

 Circular Calendar Display

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

Calendar DEMO


Just a dribbble thing that I liked, and I wanted to see live πŸ™‚ Source here : http://dribbble.com/shots/1054042–Freebie-Calendar-Window?list=users – By SamMarkiewicz

Google Calendar – Animated Icon DEMO

 Google Calendar - Animated Icon

Based on Dribbble shot : https://dribbble.com/shots/1792443-Google-Calendar-Animated-Icon – By balapa

responsive calendar DEMO

 responsive calendar

css only for a server-side generated calendar using an unordered list instead of a table. – By mgrsskls

CSS-only Calendar App Concept DEMO

 CSS-only Calendar App Concept

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

Dribbble Recreation: Calendar Widget II DEMO

 Dribbble Recreation: Calendar Widget II

Based off of https://dribbble.com/shots/2209385-Calendar-Widget-ll-Freebie by Hanna Jung. Only dependency is GSAP because hand coding that exponential curve was starting to turn into a nightmare :(. The next step would be to push all the calendar dates & months into an array of objects on load, then push each new event to said date. Then, potentially leverage local storage. Eventually, add a name slot (for your name) and a location slot for your address. Finally, include a weather API to depict that actual weather, if that data is available (since most weather forecasts only go up to 16 days). – By internette

Calendar Javascript Library DEMO

 Calendar Javascript Library

https://github.com/nizarmah/calendar-javascript-lib I needed a calendar with an organizer to display schedules for an academy for students to get better at school or learn some skills. So I thought of making them such a calendar and a schedule by it. – By nizarmah

React Calendar DEMO

 React Calendar

Calendar widget built with React and Flexbox – By nickjvm

calendar loader DEMO

 calendar loader

Calendar Loader – By Muthu

Calendar Window DEMO

 Calendar Window

Calendar Window is based on a dribbble shot that has been reworked with material design. Credits: – By khadkamhn

Calendar in ReactJs DEMO

 Calendar in ReactJs

Calendar using ReactJs (beginner level), idea from @AJALACOMFORT modified by me – By RicardoBarbosa

small calendar DEMO

 small calendar

just a small calendar with bootstrap formatting – By tbbooher

Iconifying Content – Calendar DEMO

 Iconifying Content - Calendar

Monthly calendar icons that expand to show more details when clicked. Blog post: Iconifying Content – By lonekorean

Calendar Flip Animation DEMO

 Calendar Flip Animation

– By gabrielcolombo

Wim Crouwel’s Calendar (CSS Grid) DEMO

 Wim Crouwel's Calendar (CSS Grid)

Wim CrouwelÒ€ℒs famous calendar Ò€” made with CSS Grid. – By droom

Light & Dark Calendar DEMO

 Light & Dark Calendar

Light & Dark Calendar https://dribbble.com/shots/4189522-Calendar-Light-Dark – By BradleyPJ

#DailyCssImages Γ’β‚¬β€œ Day 9. Calendar DEMO

 #DailyCssImages Γ’β‚¬β€œ Day 9. Calendar

Calendar with dynamic data. – By dark_mefody

Calendar DEMO


Forked from http://codepen.io/peanav/pen/ulkof – By iraycd

Simple Calendar DEMO

 Simple Calendar

– By jpag82

Simple vanilla js calendar DEMO

 Simple vanilla js calendar

simple dynamic, js calendar. main function accepts 3 params: target selector String date String (optional) – By snypelife

Haml Calendar DEMO

 Haml Calendar

Just cuz. – By katydecorah

Responsive Google Calendar Embed DEMO

 Responsive Google Calendar Embed

This pen shows how to embed a Google Calendar so that it is responsive. – By profstein

Calendario DEMO


A Flexible Calendar Plugin – By romswellparian

VueJS Calendar Component DEMO

 VueJS Calendar Component

A responsive calendar component written with the awesome VueJS. Should meet accessibility requirements and very easily adapt to different screen sizes. – By altitudems

Bootstrap Compatible Calendar Widget DEMO

 Bootstrap Compatible Calendar Widget

Calendar Widget using FontAwesome. Compatible with Bootstrap. – By jenniferperrin

Simple jQuery Calendar DEMO

 Simple jQuery Calendar

A simple jQuery calendar with nice way of selecting dates, can be modified to switch months and what not – By kqlambert

.datepicker(); DEMO


– By WhiteWolfWizard

Semantic HTML/CSS calendar-style date display DEMO

 Semantic HTML/CSS calendar-style date display

Markup uses HTML5 <time> element. CSS makes the date look like a calendar page. The position: absolute implementation works on all browsers. – By denilsonsa

Duotone calendar DEMO

 Duotone calendar

Duotone image with SVG filter. – By yumeeeei

Responsive Calendar DEMO

 Responsive Calendar

– By alenabdula

Material Calendar (click the days!) DEMO

 Material Calendar (click the days!)

Another Dribbble shot recreation. I really enjoyed this one! Source: https://dribbble.com/shots/2772446-Material-calendar – By short

A Coder’s Advent Calendar DEMO

 A Coder's Advent Calendar

So saw another of these on Codepen, and it seemed like a really fun idea. Here is my take. – By designcouch

CSS grid calendar DEMO

 CSS grid calendar

– By knyttneve

#dailycssimages 9: Single Div Calendar DEMO

 #dailycssimages 9: Single Div Calendar

Daily CSS Images: Single Div Calendar – By sashatran

Tear off calendar DEMO

 Tear off calendar

Tear off calendar made with Vanilla Javascript. – By nikitahl

React date range picker DEMO

 React date range picker

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

I Hope you liked Hand-picked list of jQuery CSS FREE Calendar Script, Don’t forget to Subscribe My Public Notebook for more useful Hand-picked HTML and CSS code examples, tutorials and articles.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.