Documentation keyboard_arrow_right Calendar keyboard_arrow_right Events

Calendar Events

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

Available Events

Event Description
onchange Fired when date value changes
onchange?: (self: Calendar, value: string | number) => void
onupdate Fired when calendar view updates
onupdate?: (self: Calendar, value: string | number) => void
onopen Fired when calendar opens
onopen?: (self: Calendar) => void
onclose Fired when calendar closes
onclose?: (self: Calendar, origin: HTMLElement | null) => void

Date Selection

Handle date changes with the onchange 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='calendar'></div>
<div id='output'></div>

<script>
const { Calendar } = calendarjs;

Calendar(document.getElementById('calendar'), {
    type: 'inline',
    value: new Date(),
    onchange: function(self, value) {
        document.getElementById('output').innerHTML = 'Selected: ' + value;
    }
});
</script>
</html>

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

export default function App() {
    
    const change = (self, value) => {
        this.selected = value;
    };

    return render => render`<div>
        <Calendar type="inline" value="${new Date()}" onchange="${change}" />
        <p>Selected: ${this.selected}</p>
    </div>`;
}

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

export default function App() {
    const [selected, setSelected] = useState('');

    return (
        <div>
            <Calendar
                type="inline"
                value={new Date()}
                onchange={(self, value) => setSelected(value)}
            />
            <p>Selected: {selected}</p>
        </div>
    );
}

<template>
    <div>
        <Calendar type="inline" :value="new Date()" @onchange="handleChange" />
        <p>Selected: {{ selected }}</p>
    </div>
</template>

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

export default {
    components: { Calendar },
    data() {
        return { selected: '' };
    },
    methods: {
        handleChange(self, value) {
            this.selected = value;
        }
    }
}
</script>

Open/Close Events

Track calendar visibility:

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

<input type="text" id="input" /> <span id="log"></span> <div id="calendar"></div>

<script>
const { Calendar } = calendarjs;

let log = document.getElementById('log');

Calendar(document.getElementById('calendar'), {
    input: document.getElementById('input'),
    onopen: function(self) {
        log.textContent = 'Calendar opened';
    },
    onclose: function(self, origin) {
        log.textContent = 'Calendar closed';
    }
});
</script>
</html>

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

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

    const onopen = function() {
        self.log = 'Calendar opened';
    };

    const onclose = function() {
        self.log = 'Calendar closed';
    };

    return render => render`<div>
        <input type="text" :ref="self.input" />
        <div>${self.log}</div>
        <Calendar :input="self.input" onopen="${onopen}" :onclose="${onclose}" />
    </div>`;
}

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

export default function App() {
    const inputRef = useRef();
    const [input, setInput] = useState(null);
    const [status, setStatus] = useState('');

    useEffect(() => {
        if (inputRef.current) setInput(inputRef.current);
    }, []);

    return (
        <div>
            <input type="text" ref={inputRef} />
            {input && (
                <Calendar
                    input={input}
                    onopen={() => setStatus('Calendar opened')}
                    onclose={() => setStatus('Calendar closed')}
                />
            )}
            <p>{status}</p>
        </div>
    );
}

<template>
    <div>
        <input type="text" ref="inputRef" />
        <Calendar :input="$refs.inputRef" @onopen="onOpen" @onclose="onClose" />
        <p>{{ status }}</p>
    </div>
</template>

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

export default {
    components: { Calendar },
    data() {
        return { status: '' };
    },
    methods: {
        onOpen() {
            this.status = 'Calendar opened';
        },
        onClose() {
            this.status = 'Calendar closed';
        }
    }
}
</script>

Related

Edit this page on GitHub