Home Original page

GitHub - componade/calendarjs: Lightweight date picker, event scheduler, and timeline components for JavaScript. Works with React, Vue, and Angular. Free and open source.

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