CalendarJS
Lightweight JavaScript components for calendars, schedules, and timelines. Works with React, Vue, Angular, or vanilla JS.
Components
| Component | Size | Description |
|---|---|---|
| Calendar | 3.2KB | Date picker with range and time selection |
| Schedule | 4.2KB | Day/week event scheduler with drag-and-drop |
| Timeline | 2.1KB | Chronological event display |
| Helpers | 1KB | Date utilities and formatting |
Installation
npm install @calendarjs/ce
Or via CDN:
<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@calendarjs/ce/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@calendarjs/ce/dist/style.min.css" />
Quick Start
Calendar
import { Calendar } from '@calendarjs/ce';
Calendar(document.getElementById('calendar'), {
type: 'inline',
value: '2025-01-15',
onchange: (self, value) => console.log(value)
});
Schedule
import { Schedule } from '@calendarjs/ce';
Schedule(document.getElementById('schedule'), {
type: 'week',
value: '2025-01-15',
data: [
{ guid: '1', title: 'Meeting', date: '2025-01-15', start: '09:00', end: '10:00', color: '#3498db' }
]
});
Timeline
import { Timeline } from '@calendarjs/ce';
Timeline(document.getElementById('timeline'), {
data: [
{ title: 'Project Start', date: '2025-01-01', borderColor: '#3498db' },
{ title: 'Launch', date: '2025-03-01', borderColor: '#27ae60' }
]
});
React
import { Calendar, Schedule, Timeline } from '@calendarjs/ce/dist/react';
import '@calendarjs/ce/dist/style.css';
function App() {
return <Calendar type="inline" value="2025-01-15" />;
}
Vue
<template>
<Calendar type="inline" value="2025-01-15" />
</template>
<script>
import { Calendar } from '@calendarjs/ce/dist/vue';
import '@calendarjs/ce/dist/style.css';
export default {
components: { Calendar }
}
</script>
Calendar Options
| Option | Type | Description |
|---|---|---|
type | 'default' | 'inline' | 'picker' | Display mode |
value | string | Date | Selected date |
range | boolean | Enable range selection |
time | boolean | Show time picker |
format | string | Date format (e.g., 'DD/MM/YYYY') |
validRange | string[] | Restrict selectable dates |
onchange | function | Callback on date change |
Schedule Options
| Option | Type | Description |
|---|---|---|
type | 'day' | 'week' | 'weekdays' | View type |
value | string | Current date (YYYY-MM-DD) |
data | Event[] | Array of events |
grid | number | Time interval in minutes (default: 15) |
validRange | string[] | Visible time range (e.g., ['08:00', '18:00']) |
weekly | boolean | Recurring weekly mode |
Event Object
{
guid: string; // Unique identifier
title: string; // Event title
date: string; // YYYY-MM-DD (or weekday 0-6 if weekly: true)
start: string; // HH:MM
end?: string; // HH:MM
color: string; // Hex color
}
Schedule Methods
const schedule = Schedule(element, options);
schedule.addEvents({ guid: '2', title: 'New', date: '2025-01-15', start: '14:00', color: '#e74c3c' });
schedule.updateEvent('2', { title: 'Updated' });
schedule.deleteEvents('2');
schedule.getData();
schedule.undo();
schedule.redo();
Timeline Options
| Option | Type | Description |
|---|---|---|
data | Item[] | Array of timeline items |
type | 'default' | 'monthly' | Display mode |
align | 'left' | 'right' | Bullet alignment |
order | 'asc' | 'desc' | Sort order |
Helpers
import { Helpers } from '@calendarjs/ce';
Helpers.now(); // "2025-01-15 14:30:00"
Helpers.dateToNum(new Date()); // 45678 (Excel serial)
Helpers.numToDate(45678); // "2025-01-15"
Helpers.prettify('2025-01-15 12:00'); // "2h ago"
Helpers.isValidDate(new Date()); // true
Helpers.isValidDateFormat('2025-01-15'); // true
TypeScript
Type definitions included. Import types:
import type { Calendar, Schedule, Timeline } from '@calendarjs/ce';
Documentation
License
MIT