Documentation keyboard_arrow_right Calendar keyboard_arrow_right Programmatic control

Programmatic Control

Control the calendar using JavaScript methods and external UI elements.

Available Methods

Method Description
getValue(): string | number Get current date value
setValue(value: string | Date): void Set date value
reset(): void Clear value and close
setView(view: 'days' | 'months' | 'years'): void Change calendar view
next(): void Navigate to next month/year
prev(): void Navigate to previous month/year
open(): void Open calendar popup
close(): void Close calendar popup
isClosed(): boolean Check if calendar is closed
update(): void Accept current selection

Examples

Control Panel

Create custom navigation and view controls:

<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 class="control-panel">
    <button id="btn1">Previous</button>
    <button id="btn2">Today</button>
    <button id="btn3">Next</button>
    <button id="btn4">Days</button>
    <button id="btn5">Months</button>
    <button id="btn6">Years</button>
    <button id="btn7">Reset</button>
</div>

<div id='calendar'></div>
<div>Selected: <span id='display'>None</span></div>

<script>
const { Calendar } = calendarjs;

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

const calendar = Calendar(document.getElementById('calendar'), {
    type: 'inline',
    value: new Date().toISOString(),
    onchange: function(self, value) {
        display.textContent = value || 'None';
    }
});

display.textContent = calendar.getValue();

document.getElementById('btn1').onclick = () => calendar.prev();
document.getElementById('btn2').onclick = () => calendar.setValue(new Date().toISOString());
document.getElementById('btn3').onclick = () => calendar.next();
document.getElementById('btn4').onclick = () => calendar.setView('days');
document.getElementById('btn5').onclick = () => calendar.setView('months');
document.getElementById('btn6').onclick = () => calendar.setView('years');
document.getElementById('btn7').onclick = () => calendar.reset();
</script>
</html>

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

export default function App() {
    const self = this;
    self.calendar = null;
    self.selected = 'None';

    const change = (el, value) => {
        self.selected = value || 'None';
    };

    const goToToday = () => {
        self.calendar.setValue(new Date().toISOString());
        self.calendar.setView('days');
    };

    return render => render`<div>
        <div>
            <button onclick="${() => self.calendar.prev()}">Previous</button>
            <button onclick="${goToToday}">Today</button>
            <button onclick="${() => self.calendar.next()}">Next</button>
            <button onclick="${() => self.calendar.setView('days')}">Days</button>
            <button onclick="${() => self.calendar.setView('months')}">Months</button>
            <button onclick="${() => self.calendar.setView('years')}">Years</button>
            <button onclick="${() => self.calendar.reset()}">Reset</button>
        </div>
        <Calendar type="inline" value="${new Date().toISOString()}" onchange="${change}" :ref="self.calendar" />
        <div>Selected: ${self.selected}</div>
    </div>`;
}

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

export default function App() {
    const calendarRef = useRef();
    const [selectedDate, setSelectedDate] = useState(new Date().toISOString().split('T')[0]);

    const goToToday = () => {
        calendarRef.current?.setValue(new Date());
        calendarRef.current?.setView('days');
    };

    return (
        <div>
            <div style={{ marginBottom: '15px', display: 'flex', gap: '10px' }}>
                <button onClick={() => calendarRef.current?.prev()}>Previous</button>
                <button onClick={goToToday}>Today</button>
                <button onClick={() => calendarRef.current?.next()}>Next</button>
                <button onClick={() => calendarRef.current?.setView('days')}>Days</button>
                <button onClick={() => calendarRef.current?.setView('months')}>Months</button>
                <button onClick={() => calendarRef.current?.setView('years')}>Years</button>
                <button onClick={() => calendarRef.current?.reset()}>Reset</button>
            </div>

            <Calendar
                ref={calendarRef}
                type="inline"
                value={new Date()}
                onchange={(self, value) => setSelectedDate(value)}
            />

            <div style={{ marginTop: '10px' }}>Selected: {selectedDate || 'None'}</div>
        </div>
    );
}

<template>
    <div>
        <div style="margin-bottom: 15px; display: flex; gap: 10px">
            <button @click="$refs.cal.current.prev()">Previous</button>
            <button @click="goToToday">Today</button>
            <button @click="$refs.cal.current.next()">Next</button>
            <button @click="$refs.cal.current.setView('days')">Days</button>
            <button @click="$refs.cal.current.setView('months')">Months</button>
            <button @click="$refs.cal.current.setView('years')">Years</button>
            <button @click="$refs.cal.current.reset()">Reset</button>
        </div>

        <Calendar ref="cal" type="inline" :value="new Date()" @onchange="handleChange" />

        <div style="margin-top: 10px">Selected: {{ selectedDate || 'None' }}</div>
    </div>
</template>

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

export default {
    components: { Calendar },
    data() {
        return { selectedDate: new Date().toISOString().split('T')[0] };
    },
    methods: {
        handleChange(self, value) {
            this.selectedDate = value;
        },
        goToToday() {
            this.$refs.cal.current.setValue(new Date());
            this.$refs.cal.current.setView('days');
        }
    }
}
</script>

Related

Edit this page on GitHub