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