Documentation keyboard_arrow_right Schedule keyboard_arrow_right Event management

Event Management

Create, update, and delete events using JavaScript methods or the Event form component.

Methods

Method Description
addEvents(event | events[]) Add one or more events
updateEvent(guid | event, props) Update event properties
deleteEvents(guid | guids[]) Delete one or more events
getData() Get all events
setData(events[]) Replace all events
undo() Undo last change
redo() Redo last undone change

Programmatic CRUD

<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>

<button onclick="addEvent()">Add</button>
<button onclick="updateEvent()">Update</button>
<button onclick="deleteEvent()">Delete</button>
<button onclick="schedule.undo()">Undo</button>
<div id="root" style="height: 500px;"></div>

<script>
const { Schedule } = calendarjs;

const schedule = Schedule(document.getElementById('root'), {
    type: 'week',
    value: '2025-01-15',
    data: []
});

function addEvent() {
    schedule.addEvents({
        guid: crypto.randomUUID(),
        title: 'New Meeting',
        date: '2025-01-15',
        start: '10:00',
        end: '11:00',
        color: '#3498db'
    });
}

function updateEvent() {
    const events = schedule.getData();
    if (events.length > 0) {
        schedule.updateEvent(events[0], { title: 'Updated', color: '#e74c3c' });
    }
}

function deleteEvent() {
    const events = schedule.getData();
    if (events.length > 0) {
        schedule.deleteEvents(events[0].guid);
    }
}
</script>
</html>

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

export default function App() {
    const self = this;
    self.schedule = null;

    const addEvent = () => {
        self.schedule.addEvents({
            guid: crypto.randomUUID(),
            title: 'New Meeting',
            date: '2025-01-15',
            start: '10:00',
            end: '11:00',
            color: '#3498db'
        });
    };

    const updateEvent = () => {
        const events = self.schedule.getData();
        if (events.length > 0) {
            self.schedule.updateEvent(events[0], { title: 'Updated' });
        }
    };

    const deleteEvent = () => {
        const events = self.schedule.getData();
        if (events.length > 0) {
            self.schedule.deleteEvents(events[0].guid);
        }
    };

    return render => render`<div>
        <button onclick="${addEvent}">Add</button>
        <button onclick="${updateEvent}">Update</button>
        <button onclick="${deleteEvent}">Delete</button>
        <div style="height: 500px;">
            <Schedule type="week" value="2025-01-15" :ref="self.schedule" />
        </div>
    </div>`;
}

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

export default function App() {
    const scheduleRef = useRef();

    const addEvent = () => {
        scheduleRef.current.addEvents({
            guid: crypto.randomUUID(),
            title: 'New Meeting',
            date: '2025-01-15',
            start: '10:00',
            end: '11:00',
            color: '#3498db'
        });
    };

    const updateEvent = () => {
        const events = scheduleRef.current.getData();
        if (events.length > 0) {
            scheduleRef.current.updateEvent(events[0], { title: 'Updated' });
        }
    };

    const deleteEvent = () => {
        const events = scheduleRef.current.getData();
        if (events.length > 0) {
            scheduleRef.current.deleteEvents(events[0].guid);
        }
    };

    return (
        <div>
            <button onClick={addEvent}>Add</button>
            <button onClick={updateEvent}>Update</button>
            <button onClick={deleteEvent}>Delete</button>
            <Schedule ref={scheduleRef} type="week" value="2025-01-15" style={{ height: '500px' }} />
        </div>
    );
}

<template>
    <div>
        <button @click="addEvent">Add</button>
        <button @click="updateEvent">Update</button>
        <button @click="deleteEvent">Delete</button>
        <Schedule ref="scheduleRef" type="week" value="2025-01-15" style="height: 500px" />
    </div>
</template>

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

export default {
    components: { Schedule },
    methods: {
        addEvent() {
            this.$refs.scheduleRef.current.addEvents({
                guid: crypto.randomUUID(),
                title: 'New Meeting',
                date: '2025-01-15',
                start: '10:00',
                end: '11:00',
                color: '#3498db'
            });
        },
        updateEvent() {
            const events = this.$refs.scheduleRef.current.getData();
            if (events.length > 0) {
                this.$refs.scheduleRef.current.updateEvent(events[0], { title: 'Updated' });
            }
        },
        deleteEvent() {
            const events = this.$refs.scheduleRef.current.getData();
            if (events.length > 0) {
                this.$refs.scheduleRef.current.deleteEvents(events[0].guid);
            }
        }
    }
}
</script>

Edit with Event Form

Use the onedition event to open the Event form when users double-click an event:

<html>
<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'></div>

<script>
const { Schedule, Event } = calendarjs;

lemonade.render(function() {
    const self = this;

    const edition = (s, event) => {
        self.eventForm.open(event, (newValue) => {
            self.schedule.updateEvent(event, newValue);
        });
    };

    self.data = [
        {
            guid: '1',
            title: 'Team Meeting',
            date: '2024-03-15',
            start: '10:00',
            end: '11:00',
            color: '#3498db'
        }
    ];

    return render => render`<div>
        <Schedule type="week" :data="self.data" :ref="self.schedule" :onedition="${edition}" />
        <Event :ref="self.eventForm" />
    </div>`;
}, document.getElementById('root'));
</script>
</html>

import lemonade from 'lemonadejs';
import { Schedule, Event } from '@calendarjs/ce';
import '@calendarjs/ce/dist/style.css';

export default function App() {
    const self = this;

    const edition = (s, event) => {
        self.eventForm.open(event, (newValue) => {
            self.schedule.updateEvent(event, newValue);
        });
    };

    self.data = [
        {
            guid: '1',
            title: 'Team Meeting',
            date: '2024-03-15',
            start: '10:00',
            end: '11:00',
            color: '#3498db'
        }
    ];

    return render => render`<div>
        <Schedule type="week" :data="self.data" :ref="self.schedule" :onedition="${edition}" />
        <Event :ref="self.eventForm" />
    </div>`;
}

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

export default function App() {
    const scheduleRef = useRef();
    const eventFormRef = useRef();
    const [events] = useState([
        {
            guid: '1',
            title: 'Team Meeting',
            date: '2024-03-15',
            start: '10:00',
            end: '11:00',
            color: '#3498db'
        }
    ]);

    const handleEdition = (s, event) => {
        eventFormRef.current.open(event, (newValue) => {
            scheduleRef.current.updateEvent(event, newValue);
        });
    };

    return (
        <div>
            <Schedule
                ref={scheduleRef}
                type="week"
                data={events}
                onedition={handleEdition}
                style={{ height: '500px' }}
            />
            <Event ref={eventFormRef} />
        </div>
    );
}

<template>
    <div>
        <Schedule
            ref="scheduleRef"
            type="week"
            :data="events"
            @onedition="handleEdition"
            style="height: 500px"
        />
        <Event ref="eventFormRef" />
    </div>
</template>

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

export default {
    components: { Schedule, Event },
    data() {
        return {
            events: [
                {
                    guid: '1',
                    title: 'Team Meeting',
                    date: '2024-03-15',
                    start: '10:00',
                    end: '11:00',
                    color: '#3498db'
                }
            ]
        };
    },
    methods: {
        handleEdition(s, event) {
            this.$refs.eventFormRef.open(event, (newValue) => {
                this.$refs.scheduleRef.updateEvent(event, newValue);
            });
        }
    }
}
</script>

Create with Event Form

Use the Event form to create new events with a modal dialog:

<html>
<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>

<button onclick="createEvent()">Create Event</button>
<div id='root'></div>

<script>
const { Schedule, Event } = calendarjs;

lemonade.render(function() {
    const self = this;

    const edition = (s, event) => {
        self.eventForm.open(event, (newValue) => {
            self.schedule.updateEvent(event, newValue);
        });
    };

    window.createEvent = () => {
        const newEvent = {
            date: new Date().toISOString().split('T')[0],
            start: '10:00',
            end: '11:00'
        };
        self.eventForm.open(newEvent, (newValue) => {
            self.schedule.addEvents(newValue);
        });
    };

    self.data = [];

    return render => render`<div>
        <Schedule type="week" :data="self.data" :ref="self.schedule" :onedition="${edition}" />
        <Event :ref="self.eventForm" />
    </div>`;
}, document.getElementById('root'));
</script>
</html>

import lemonade from 'lemonadejs';
import { Schedule, Event } from '@calendarjs/ce';
import '@calendarjs/ce/dist/style.css';

export default function App() {
    const self = this;

    const edition = (s, event) => {
        self.eventForm.open(event, (newValue) => {
            self.schedule.updateEvent(event, newValue);
        });
    };

    const create = () => {
        const newEvent = {
            date: new Date().toISOString().split('T')[0],
            start: '10:00',
            end: '11:00'
        };
        self.eventForm.open(newEvent, (newValue) => {
            self.schedule.addEvents(newValue);
        });
    };

    self.data = [];

    return render => render`<div>
        <button onclick="${create}">Create Event</button>
        <Schedule type="week" :data="self.data" :ref="self.schedule" :onedition="${edition}" />
        <Event :ref="self.eventForm" />
    </div>`;
}

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

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

    const handleEdition = (s, event) => {
        eventFormRef.current.open(event, (newValue) => {
            scheduleRef.current.updateEvent(event, newValue);
        });
    };

    const createEvent = () => {
        const newEvent = {
            date: new Date().toISOString().split('T')[0],
            start: '10:00',
            end: '11:00'
        };
        eventFormRef.current.open(newEvent, (newValue) => {
            scheduleRef.current.addEvents(newValue);
        });
    };

    return (
        <div>
            <button onClick={createEvent}>Create Event</button>
            <Schedule
                ref={scheduleRef}
                type="week"
                data={events}
                onedition={handleEdition}
                style={{ height: '500px' }}
            />
            <Event ref={eventFormRef} />
        </div>
    );
}

<template>
    <div>
        <button @click="createEvent">Create Event</button>
        <Schedule
            ref="scheduleRef"
            type="week"
            :data="events"
            @onedition="handleEdition"
            style="height: 500px"
        />
        <Event ref="eventFormRef" />
    </div>
</template>

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

export default {
    components: { Schedule, Event },
    data() {
        return {
            events: []
        };
    },
    methods: {
        handleEdition(s, event) {
            this.$refs.eventFormRef.open(event, (newValue) => {
                this.$refs.scheduleRef.updateEvent(event, newValue);
            });
        },
        createEvent() {
            const newEvent = {
                date: new Date().toISOString().split('T')[0],
                start: '10:00',
                end: '11:00'
            };
            this.$refs.eventFormRef.open(newEvent, (newValue) => {
                this.$refs.scheduleRef.addEvents(newValue);
            });
        }
    }
}
</script>

Time Range Validation

Configure valid time range for the Event form:

<html>
<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'></div>

<script>
const { Schedule, Event } = calendarjs;

lemonade.render(function() {
    const self = this;

    const edition = (s, event) => {
        self.eventForm.open(event, (newValue) => {
            self.schedule.updateEvent(event, newValue);
        });
    };

    self.data = [];
    // Only allow events between 8 AM and 6 PM
    self.validRange = ['08:00', '18:00'];

    return render => render`<div>
        <Schedule type="week" :data="self.data" :ref="self.schedule" :onedition="${edition}" />
        <Event :ref="self.eventForm" :validRange="${self.validRange}" />
    </div>`;
}, document.getElementById('root'));
</script>
</html>

import lemonade from 'lemonadejs';
import { Schedule, Event } from '@calendarjs/ce';
import '@calendarjs/ce/dist/style.css';

export default function App() {
    const self = this;

    const edition = (s, event) => {
        self.eventForm.open(event, (newValue) => {
            self.schedule.updateEvent(event, newValue);
        });
    };

    self.data = [];
    self.validRange = ['08:00', '18:00'];

    return render => render`<div>
        <Schedule type="week" :data="self.data" :ref="self.schedule" :onedition="${edition}" />
        <Event :ref="self.eventForm" :validRange="${self.validRange}" />
    </div>`;
}

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

export default function App() {
    const scheduleRef = useRef();
    const eventFormRef = useRef();
    const [events] = useState([]);
    const validRange = ['08:00', '18:00'];

    const handleEdition = (s, event) => {
        eventFormRef.current.open(event, (newValue) => {
            scheduleRef.current.updateEvent(event, newValue);
        });
    };

    return (
        <div>
            <Schedule
                ref={scheduleRef}
                type="week"
                data={events}
                onedition={handleEdition}
                style={{ height: '500px' }}
            />
            <Event ref={eventFormRef} validRange={validRange} />
        </div>
    );
}

<template>
    <div>
        <Schedule
            ref="scheduleRef"
            type="week"
            :data="events"
            @onedition="handleEdition"
            style="height: 500px"
        />
        <Event ref="eventFormRef" :validRange="validRange" />
    </div>
</template>

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

export default {
    components: { Schedule, Event },
    data() {
        return {
            events: [],
            validRange: ['08:00', '18:00']
        };
    },
    methods: {
        handleEdition(s, event) {
            this.$refs.eventFormRef.open(event, (newValue) => {
                this.$refs.scheduleRef.updateEvent(event, newValue);
            });
        }
    }
}
</script>

Event Form API

Method Parameters Description
open() (event, callback) Open form with event data. Callback receives updated values.
close() - Close the form.

Related

Edit this page on GitHub