Form Integration

Integrate custom forms for creating and editing schedule events.

Example

Handle event creation and editing with a modal form:

<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: [],
    ondblclick: function(self, event) {
        const title = prompt('Edit title:', event.title);
        if (title) {
            self.updateEvent(event, { title: title });
        }
    },
    oncreate: function(self, events) {
        const title = prompt('Event title:', 'New Event');
        if (title) {
            self.updateEvent(events[0], { title: title });
        }
    }
});
</script>
</html>

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

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

    const onDblClick = (el, event) => {
        const title = prompt('Edit title:', event.title);
        if (title) {
            el.updateEvent(event, { title: title });
        }
    };

    const onCreate = (el, events) => {
        const title = prompt('Event title:', 'New Event');
        if (title) {
            el.updateEvent(events[0], { title: title });
        }
    };

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

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

export default function App() {
    const scheduleRef = useRef();
    const [data, setData] = useState([]);

    const handleDblClick = (self, event) => {
        const title = prompt('Edit title:', event.title);
        if (title) {
            self.updateEvent(event, { title: title });
        }
    };

    const handleCreate = (self, events) => {
        const title = prompt('Event title:', 'New Event');
        if (title) {
            self.updateEvent(events[0], { title: title });
        }
    };

    return (
        <Schedule
            ref={scheduleRef}
            type="week"
            value="2025-01-15"
            data={data}
            style={{ height: '500px' }}
            ondblclick={handleDblClick}
            oncreate={handleCreate}
        />
    );
}

<template>
    <Schedule
        ref="scheduleRef"
        type="week"
        value="2025-01-15"
        :data="data"
        style="height: 500px"
        @ondblclick="handleDblClick"
        @oncreate="handleCreate"
    />
</template>

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

export default {
    components: { Schedule },
    data() {
        return { data: [] };
    },
    methods: {
        handleDblClick(self, event) {
            const title = prompt('Edit title:', event.title);
            if (title) {
                self.updateEvent(event, { title: title });
            }
        },
        handleCreate(self, events) {
            const title = prompt('Event title:', 'New Event');
            if (title) {
                self.updateEvent(events[0], { title: title });
            }
        }
    }
}
</script>

Edit this page on GitHub

Form Integration

Example

Related