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

calendarjs.com/docs

License

MIT