⚡ Lightweight & Fast

Build Beautiful Calendars in Minutes

A fully customizable, lightweight JavaScript calendar component with zero dependencies. Build beautiful date pickers and schedulers in minutes.

Pure JS
Zero dependencies
TypeScript ready
Loading calendar...

See It In Action

A calendar that adapts to your needs

Try Interactive Sandbox

Month View

Small and treat events as full day

Loading calendar...

Week View

Navigation arrows only

Loading calendar...

Day View

Minimal UI - no navigation

Loading calendar...

Powerful Features

Everything you need for modern date selection

Pure JavaScript

Zero dependencies. Built with vanilla JS for maximum compatibility.

Customizable

Complete control over styles, themes, and behavior.

Multiple Views

Switch between month, week, and day views seamlessly.

Responsive

Works perfectly on desktop, tablet, and mobile devices.

Quick Installation

Get started in seconds

Terminal
npm install simple-calendar-js
or
yarn add simple-calendar-js

Basic Usage

// Include SimpleCalendarJs (Zero Dependencies)
<link rel="stylesheet" href="simple-calendar-js/css/simple-calendar-js.css">
<script src="simple-calendar-js/js/simple-calendar-js.js"></script>
// HTML container for the calendar
<div id="calendar"></div>
// Initialize the calendar
const calendar = new SimpleCalendarJs('#calendar', {
view: 'month',
date: new Date(),
events: [{
id: 1,
title: 'Conference',
startDate: new Date('2024-12-15'),
endDate: new Date('2024-12-17'),
color: '#3b82f6',
colorIsGradient: true
}],
showNavigation: true,
fulldayMode: false,
dayClick: function(clickInfo, originalEvent) {
console.log('Day clicked:', clickInfo.date);
},
eventClick: function(event, clickInfo, originalEvent) {
console.log('Event clicked:', event.title);
},
changeState: function(state) {
console.log('View changed:', state.view);
}
});