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

Calendar I made for a little project. – By B8bop


Calendar DEMO

 Calendar

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

 Calendar

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

 Calendar

Simple calendar. – By miroot



Calendar DEMO

 Calendar

– 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

 Calendar

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

 FlexCalendar

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

 Calendar

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

 Calendar

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

 Calendario

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

 .datepicker();

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