Lightweight JavaScript components for calendars, schedules, and timelines. Works with React, Vue, Angular, or vanilla JS.
| 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 |
npm install @calendarjs/ceOr 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" />import { Calendar } from '@calendarjs/ce';
Calendar(document.getElementById('calendar'), {
type: 'inline',
value: '2025-01-15',
onchange: (self, value) => console.log(value)
});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' }
]
});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' }
]
});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" />;
}<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>| 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 |
| 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 |
{
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
}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();| Option | Type | Description |
|---|---|---|
data |
Item[] |
Array of timeline items |
type |
'default' | 'monthly' |
Display mode |
align |
'left' | 'right' |
Bullet alignment |
order |
'asc' | 'desc' |
Sort order |
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'); // trueType definitions included. Import types:
import type { Calendar, Schedule, Timeline } from '@calendarjs/ce';MIT