JavaScript Calendar

3.18KB gzipped

The Calendar component is a lightweight date picker for web applications. It supports single date selection, date ranges, and optional time picking. Built for forms, filters, and any interface requiring date input. Includes keyboard navigation for accessibility and works across vanilla JavaScript, React, Vue, and Angular. Can be displayed inline or as a popup attached to input fields.

Single date or range selection
Date and time picking
Inline display or popup on focus
Keyboard navigation (arrows, enter, esc)
Input element binding with auto-sync
Excel-style numeric dates
ISO and custom date formats
Responsive design
Accessible (ARIA labels, keyboard support)

Documentation

Use Cases

Form date inputs
Date range filters
Booking systems
Scheduling interfaces
Event date selection
Deadline pickers

Installation

npm install @calendarjs/ce

Settings

Property	Description
`type?: 'default' \| 'auto' \| 'picker' \| 'inline'`	Display mode. Default: `'default'`.
`format?: string`	Date format string (Excel-like, e.g. `dd/mm/yyyy`).
`range?: boolean`	Enables date range selection. Default: `false`.
`value?: number \| string`	Selected date value.
`numeric?: boolean`	Returns value as an Excel serial number instead of an ISO string. Default: `false`.
`footer?: boolean`	Shows the calendar footer. Default: `true`.
`time?: boolean`	Displays hour and minute picker. Default: `false`.
`grid?: boolean`	Enables grid mode. Default: `false`.
`placeholder?: string`	Placeholder text for the input field.
`disabled?: boolean`	Disables calendar interaction. Default: `false`.
`startingDay?: number`	Sets the first day of the week (0 = Sunday, 6 = Saturday). Default: `0`.
`validRange?: number[] \| string[]`	Restricts selectable date range.
`data?: Array<{ date: string }>`	Calendar events data.
`wheel?: boolean`	Updates the view using the mouse wheel. Default: `true`.
`input?: HTMLInputElement \| 'auto'`	Binds the calendar to an input element (`'auto'` auto-detects).
`initInput?: boolean`	Creates events and assigns calendar classes to the input. Default: `true`.

Events

Event	Description
`onchange`	Fired when the date value changes `onchange?: (self: Calendar, value: string \| number) => void`
`onupdate`	Fired when the calendar view updates `onupdate?: (self: Calendar, value: string \| number) => void`
`onopen`	Fired when the calendar opens `onopen?: (self: Calendar) => void`
`onclose`	Fired when the calendar closes `onclose?: (self: Calendar, origin: HTMLElement \| null) => void`
`onChange`	React-specific change event `onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void`

Methods

Method	Description
`getValue(): string \| number`	Get current value
`setValue(value: string \| number): void`	Set date value
`open(): void`	Open calendar
`close(options?: object): void`	Close calendar
`isClosed(): boolean`	Check if calendar is closed
`setView(view: 'days' \| 'months' \| 'years'): void`	Change calendar view
`next(): void`	Go to next month/year
`prev(): void`	Go to previous month/year
`reset(): void`	Reset value and close
`update(): void`	Accept selected value

Keyboard Navigation

Key	Action
Arrow keys	Navigate dates
Enter	Select date
Esc	Close calendar
Page Up/Down	Previous/next month
Home	First day of month
End	Last day of month

Date Formats

Supported input formats:

ISO: "2024-01-15" or "2024-01-15 14:30:00"
Date object: new Date()
Numeric: 45000 (with numeric: true)

Examples

Basic Calendar

<html>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@calendarjs/ce/dist/style.min.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />
<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 { Calendar } = calendarjs;

Calendar(document.getElementById('root'), {
    type: 'inline',
    value: new Date()
});
</script>
</html>

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

export default function App() {
    return render => render`<div>
        <Calendar type="inline" value="2024-01-15" />
    </div>`
}

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

export default function App() {
    return <Calendar type="inline" value={new Date()} />;
}

<template>
    <Calendar type="inline" value="2024-01-15" />
</template>

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

export default {
    components: { Calendar }
}
</script>

Range Selection

<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="range-input" />

<script>
const { Calendar } = calendarjs;

Calendar(document.body, {
    range: true,
    input: document.getElementById('range-input')
});
</script>
</html>

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

export default function App() {
    const self = this;
    return render => render`<div>
        <input type="text" :ref="self.input" />
        <Calendar :input="self.input" range="true" />
    </div>`
}

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

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

    return (
        <>
            <input type="text" ref={inputRef} />
            <Calendar range={true} input={inputRef} />
        </>
    );
}

<template>
    <input type="text" ref="inputRef" />
    <Calendar range :input="inputRef" />
</template>

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

export default {
    components: { Calendar },
    setup() {
        const inputRef = ref(null);
        return { inputRef };
    }
}
</script>

With Change Event

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

Calendar(document.getElementById('calendar'), {
    type: 'inline',
    value: new Date(),
    onchange: function(self, value) {
        console.log('Selected date:', value);
        // Send to API, update state, etc.
    }
});

Time Selection

Include time picker with the calendar:

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

<script>
const { Calendar } = calendarjs;

Calendar(document.getElementById('calendar'), {
    type: 'inline',
    value: '2024-01-15 14:30',
    time: true
});
</script>
</html>

Numeric Dates

Use Excel-style serial numbers:

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

Calendar(document.getElementById('calendar'), {
    numeric: true,
    value: 45000, // Excel date number
    onchange: function(self, value) {
        console.log('Serial number:', value);
    }
});

Default Popup Mode

Attach to input and show on focus:

<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="date-input" placeholder="Select date" />

<script>
const { Calendar } = calendarjs;

Calendar(document.body, {
    input: document.getElementById('date-input')
});
</script>
</html>

Edit this page on GitHub