Simple Calendar for Modern Web

Zero dependencies. Full internationalization. Framework wrappers for React, Vue & Angular. Everything you need in just 22KB.

Loading calendar...

Features

Zero Dependencies

Pure vanilla JavaScript. No external libraries required. Just 22KB minified.

Internationalization

Native Intl.DateTimeFormat API support for any locale. RTL languages included.

Framework Ready

Official React, Vue 3, and Angular components included in the package.

Async Events

Fetch events dynamically with async/await. Perfect for API integrations.

Fully Customizable

CSS custom properties for easy theming. Dark mode ready out of the box.

Responsive

Works perfectly on desktop, tablet, and mobile. Touch-friendly interface.

And Much More

4 View ModesMonth, Week, Day & List
Drag & DropMove events between dates
Event ResizingAdjust event duration
TooltipsRich hover information
34+ LocalesNative Intl API support
RTL LanguagesArabic, Hebrew & more
Dark ModeCSS variables theming
Year PickerQuick year navigation
View SwitcherToggle between views
Grid ControlsShow/hide borders
12/24 HourFlexible time formats
Weekday FormatsNarrow, short or long
Timed EventsList or block style
Async EventsAPI integration ready
Timezone SupportDisplay in any timezone
Customizable ToolbarShow/hide elements
Touch FriendlyMobile optimized
No DependenciesPure vanilla JS

Quick Start

Get started in seconds with your favorite framework

Terminal
npm install simple-calendar-js

Example Code

import 'simple-calendar-js/dist/simple-calendar-js.min.css';

const calendar = new SimpleCalendarJs('#calendar', {
  defaultView: 'month',
  locale: 'en-US',
  fetchEvents: async (startDate, endDate) => {
    const res = await fetch('/api/events');
    return await res.json();
  },
  onEventClick: (event) => {
    console.log('Event clicked:', event);
  }
});