40+ Awesome CSS Calendar Effects Collection (Projects and Codes) in 2025

CSS Winter Animation Calendar

A calendar with beautiful subtle animation made in CSS featuring a beautiful night in the mountains with moon and twinkling stars in the clear sky.

datera

Datera.js is a versatile library for date input and selection, providing flexible configuration options like initial selected dates, year ranges, disabled/enabled dates, start day of the week, and themes for styling.

CSS Grid Advent Calendar

Flat CSS Calendar

Minimal Vanilla JavaScript Calendar Component

vanilla-js-calendar

:calendar: A vanilla JavaScript calendar.

jquery-bs-calendar

The event calendar was created with JQuery and Boostrap 5. It does not need any additional CSS file. The calendar can be included in all Boostrap elements (.card, .navbar, .offcanvas, .dropdowns, ...).

iCalendar

Simple iPhone styled Vanilla JavaScript Calendar Library

timetable.js

Vanilla javascript plugin for building nice responsive timetables

salsa-calendar

Pure Javascript Calendar

pureJSCalendar

Simple and clean JS Calendar solution for those who need to get rid of third-party libraries like JQuery. Easily localizable calendar with allowed date spread and with the first day of the week selection.

dropdown-calender

A minimal vanilla JavaScript date picker library which enables the user to select a date from separate “day”, “month” and “year” dropdowns. Perfect for birthday (DOB) picker.

jsCalendar

Just a simple javascript calendar

niceDatePicker

Nice DatePicker with support for date ranges and no jquery dependency, easy styling and more.

tiny-picker

Lightweight, vanilla-js, dependency free date range picker

datepickk

Simple, beautiful and powerful datepicker!

md-date-time-picker

A vanilla JavaScript library which uses moment.js to create beautiful, Material Design styled pickers for easy date and time selection.

pure-javascript-calendar-component

A basic calendar component written in ES6/LESS that displays a pretty clean calendar UI on your web application.

rolyart-calendar

ES6 - Simple pure JavaScript calendar

js-calendar

Calendar UI Design with Dark Mode and Animation Using HTML CSS JavaScript

js-datepicker

A lightweight and pure javascript and css datepicker

caleandar

Caleandar.js is a simple JavaScript library used for generating a themeable inline calendar on the webpage that supports custom events defined in the JavaScript.