Schedule Events

Handle user interactions and integrate the schedule with your application logic.

Available Events

Event	Description
`oncreate`	Fired when events are created `oncreate?: (self: Schedule, events: Event[]) => void`
`onchangeevent`	Fired when an event is modified `onchangeevent?: (self: Schedule, newVal, oldVal) => void`
`ondelete`	Fired when an event is deleted `ondelete?: (self: Schedule, guid: string) => void`
`ondblclick`	Fired on event double-click `ondblclick?: (self: Schedule, event: Event) => void`
`onerror`	Fired on validation errors `onerror?: (self: Schedule, message: string) => void`

Event Handlers

Handle schedule events with callbacks:

<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-01-15',
    data: [],
    oncreate: function(self, events) {
        console.log('Created:', events);
    },
    onchangeevent: function(self, newValue, oldValue) {
        console.log('Changed:', newValue);
    },
    ondelete: function(self, guid) {
        console.log('Deleted:', guid);
    },
    ondblclick: function(self, event) {
        console.log('Double-clicked:', event.title);
    }
});
</script>
</html>

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

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

    const onCreate = (el, events) => {
        console.log('Created:', events);
    };

    const onChange = (el, newValue, oldValue) => {
        console.log('Changed:', newValue);
    };

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

    return render => render`<div style="height: 500px;">
        <Schedule type="week" value="2025-01-15" data="${self.data}" :oncreate="${onCreate}" :onchangeevent="${onChange}" :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 [data, setData] = useState([]);

    return (
        <Schedule
            type="week"
            value="2025-01-15"
            data={data}
            style={{ height: '500px' }}
            oncreate={(self, events) => console.log('Created:', events)}
            onchangeevent={(self, newVal) => console.log('Changed:', newVal)}
            ondelete={(self, guid) => console.log('Deleted:', guid)}
            ondblclick={(self, event) => console.log('Clicked:', event.title)}
        />
    );
}

<template>
    <Schedule
        type="week"
        value="2025-01-15"
        :data="data"
        style="height: 500px"
        @oncreate="onCreate"
        @onchangeevent="onChange"
        @ondelete="onDelete"
        @ondblclick="onDblClick"
    />
</template>

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

export default {
    components: { Schedule },
    data() {
        return { data: [] };
    },
    methods: {
        onCreate(self, events) {
            console.log('Created:', events);
        },
        onChange(self, newValue) {
            console.log('Changed:', newValue);
        },
        onDelete(self, guid) {
            console.log('Deleted:', guid);
        },
        onDblClick(self, event) {
            console.log('Clicked:', event.title);
        }
    }
}
</script>

Edit this page on GitHub

Schedule Events

Available Events

Event Handlers

Related