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 – 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 – 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 – – 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 :–Freebie-Calendar-Window?list=users – By SamMarkiewicz

Google Calendar – Animated Icon DEMO

  Google Calendar - Animated Icon

Based on Dribbble shot : – 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 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 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 – By BradleyPJ

#DailyCssImages – Day 9. Calendar DEMO

  #DailyCssImages – Day 9. Calendar

Calendar with dynamic data. – By dark_mefody

Calendar DEMO


Forked from – 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: – 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.