JavaScript Schedule

4.2KB gzipped

The Schedule component is an event scheduling interface for web applications. It supports day, week, and weekdays views with drag-and-drop event management. Built for appointment systems, team calendars, and resource scheduling.

Day, week, and weekdays views
Drag and drop events
Create, edit, delete events
Resource/calendar scheduling
Keyboard navigation

Documentation

Installation

npm install @calendarjs/ce

Settings

Property	Description
`type?: 'week' \| 'day' \| 'weekdays'`	Schedule view type. Default: `'week'`.
`weekly?: boolean`	Weekly schedule mode. No date associated to columns, just day of week. Default: `false`.
`value?: string`	Initial date in ISO format (`YYYY-MM-DD`).
`data?: Event[]`	Array of event objects to display.
`grid?: number`	Grid time interval in minutes. Default: `15`.
`overlap?: boolean`	Accept time overlap between events. Default: `false`.
`validRange?: string[]`	Valid time range `[startTime, endTime]` in `HH:MM` format.
`readOnlyRange?: string[] \| string[][]`	Read-only time range. Single: `['08:00', '18:00']` or multiple: `[['00:00', '08:00'], ['18:00', '23:59']]`.

Event Object

Property	Description
`guid: string`	Unique identifier for the event.
`title: string`	Event title displayed on the schedule.
`start: string`	Start time in `HH:MM` format.
`end?: string`	End time in `HH:MM` format.
`color: string`	Event background color (hex).
`type?: string \| null`	Event type/category.
`date?: string`	Event date in `YYYY-MM-DD` format. Used when `weekly` is `false`.
`weekday?: number`	Day of the week (`0-6`, Sunday is `0`). Used when `weekly` is `true`.
`guests?: string`	Guests list.
`location?: string`	Event location.
`description?: string`	Event description.
`readonly?: boolean`	Event is read-only (cannot be edited).
`visible?: boolean`	Event visibility.
`warning?: boolean`	Show warning border on event.

Events

Event	Description
`onbeforecreate`	Before events are created. Return `false` to cancel. `(self: Schedule, events: Event \| Event[], e?: MouseEvent) => boolean \| void`
`oncreate`	Called when events are created. `(self: Schedule, events: Event \| Event[], e?: MouseEvent) => void`
`onbeforeinsert`	Before inserting a new event on the board. Return `false` to cancel. `(self: Schedule, event: Event) => boolean \| void`
`ondblclick`	Called on double-click of an event. `(self: Schedule, event: Event) => void`
`onedition`	Triggered when an event is being edited (double click or after creation). `(self: Schedule, event: Event) => void`
`onbeforechangeevent`	Before an event is modified. Return `false` to cancel. `(self: Schedule, state: object) => boolean \| void`
`onchangeevent`	Called when an event is modified. `(self: Schedule, newValue: Partial<Event>, oldValue: Partial<Event>) => void`
`ondelete`	Called when an event is deleted. `(self: Schedule, event: Event) => void`
`onchange`	Called when any change occurs. `(self: Schedule) => void`
`onerror`	Called on error. `(self: Schedule, message: string) => void`

Methods

Method	Description
`addEvents(events: Event \| Event[], e?: MouseEvent): Event[] \| false`	Add one or more events to the schedule.
`updateEvent(guidOrEvent: string \| Event, newValue: Partial<Event>): void \| false`	Update an event by guid or reference.
`deleteEvents(events: Event \| Event[] \| string \| string[]): void`	Delete one or more events.
`getData(): Event[]`	Get all events data.
`setData(data: Event[]): void`	Set events data.
`getEvent(guid: string): HTMLElement`	Get event DOM element by guid.
`setRange(range: string[]): void`	Set valid time range.
`setReadOnly(range: string[] \| string[][]): void`	Set read-only time range.
`resetSelection(e?: MouseEvent): void`	Reset current selection.
`render(): void`	Render the schedule.
`undo(): void`	Undo last change.
`redo(): void`	Redo last undone change.

Properties

Property	Description
`type: 'week' \| 'day' \| 'weekdays'`	Current schedule view type.
`weekly: boolean`	Weekly schedule mode.
`value: string`	Current date value in ISO format.
`data: Event[]`	Array of events.
`grid: number`	Grid time interval in minutes.
`overlap: boolean`	Accept time overlap between events.
`validRange?: string[]`	Valid time range.
`readOnlyRange?: string[] \| string[][]`	Read-only time range.
`el: HTMLElement`	The root element.

Examples

Basic Schedule

<html>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@calendarjs/ce/dist/style.min.css" />
<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>

<div id="root" style="height: 500px;"></div>

<script>
const { Schedule } = calendarjs;

Schedule(document.getElementById('root'), {
    type: 'week',
    value: '2025-12-01',
    data: [
        { guid: 'evt-1', title: 'Team Meeting', date: '2025-12-03', start: '10:00', end: '11:00', color: '#3498db' },
        { guid: 'evt-2', title: 'Project Review', date: '2025-12-04', start: '14:00', end: '15:30', color: '#e74c3c' }
    ]
});
</script>
</html>

import { Schedule } from '@calendarjs/ce';
import '@calendarjs/ce/dist/style.css';

export default function App() {
    const self = this;
    self.events = [
        { guid: 'evt-1', title: 'Team Meeting', date: '2025-12-03', start: '10:00', end: '11:00', color: '#3498db' },
        { guid: 'evt-2', title: 'Project Review', date: '2025-12-04', start: '14:00', end: '15:30', color: '#e74c3c' }
    ];

    return render => render`<div style="height: 500px;">
        <Schedule type="week" value="2025-12-01" data="${self.events}" />
    </div>`;
}

import { useState } from 'react';
import { Schedule } from '@calendarjs/ce/dist/react';
import '@calendarjs/ce/dist/style.css';

export default function App() {
    const [events] = useState([
        { guid: 'evt-1', title: 'Team Meeting', date: '2025-12-03', start: '10:00', end: '11:00', color: '#3498db' },
        { guid: 'evt-2', title: 'Project Review', date: '2025-12-04', start: '14:00', end: '15:30', color: '#e74c3c' }
    ]);

    return <Schedule type="week" value="2025-12-01" data={events} style={{ height: '500px' }} />;
}

<template>
    <Schedule type="week" value="2025-12-01" :data="events" style="height: 500px" />
</template>

<script>
import { Schedule } from '@calendarjs/ce/dist/vue';
import '@calendarjs/ce/dist/style.css';

export default {
    components: { Schedule },
    data() {
        return {
            events: [
                { guid: 'evt-1', title: 'Team Meeting', date: '2025-12-03', start: '10:00', end: '11:00', color: '#3498db' },
                { guid: 'evt-2', title: 'Project Review', date: '2025-12-04', start: '14:00', end: '15:30', color: '#e74c3c' }
            ]
        };
    }
}
</script>

With Event Handlers

<html>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@calendarjs/ce/dist/style.min.css" />
<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>

<div id="root" style="height: 500px;"></div>

<script>
const { Schedule } = calendarjs;

Schedule(document.getElementById('root'), {
    type: 'week',
    value: '2025-12-01',
    data: [],
    oncreate: function(self, events) {
        const event = Array.isArray(events) ? events[0] : events;
        console.log('Created:', event.title);
    },
    onchangeevent: function(self, newValue, oldValue) {
        console.log('Updated:', newValue.title);
    },
    ondelete: function(self, event) {
        console.log('Deleted:', event.title);
    }
});
</script>
</html>

import { Schedule } from '@calendarjs/ce';
import '@calendarjs/ce/dist/style.css';

export default function App() {
    const self = this;
    self.events = [];

    const onCreate = (el, events) => {
        const event = Array.isArray(events) ? events[0] : events;
        console.log('Created:', event.title);
    };

    const onUpdate = (el, newValue, oldValue) => {
        console.log('Updated:', newValue.title);
    };

    const onDelete = (el, event) => {
        console.log('Deleted:', event.title);
    };

    return render => render`<div style="height: 500px;">
        <Schedule type="week" value="2025-12-01" data="${self.events}" :oncreate="${onCreate}" :onchangeevent="${onUpdate}" :ondelete="${onDelete}" />
    </div>`;
}

import { useState } from 'react';
import { Schedule } from '@calendarjs/ce/dist/react';
import '@calendarjs/ce/dist/style.css';

export default function App() {
    const [events, setEvents] = useState([]);

    return (
        <Schedule
            type="week"
            value="2025-12-01"
            data={events}
            style={{ height: '500px' }}
            oncreate={(self, events) => {
                const event = Array.isArray(events) ? events[0] : events;
                console.log('Created:', event.title);
            }}
            onchangeevent={(self, newValue) => console.log('Updated:', newValue.title)}
            ondelete={(self, event) => console.log('Deleted:', event.title)}
        />
    );
}

<template>
    <Schedule
        type="week"
        value="2025-12-01"
        :data="events"
        style="height: 500px"
        @oncreate="onCreate"
        @onchangeevent="onUpdate"
        @ondelete="onDelete"
    />
</template>

<script>
import { Schedule } from '@calendarjs/ce/dist/vue';
import '@calendarjs/ce/dist/style.css';

export default {
    components: { Schedule },
    data() {
        return { events: [] };
    },
    methods: {
        onCreate(self, events) {
            const event = Array.isArray(events) ? events[0] : events;
            console.log('Created:', event.title);
        },
        onUpdate(self, newValue) {
            console.log('Updated:', newValue.title);
        },
        onDelete(self, event) {
            console.log('Deleted:', event.title);
        }
    }
}
</script>

Edit this page on GitHub