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>

CalendarJS Product Suite

CalendarJS is a complete calendar and scheduling solution (like Google Calendar) that includes:

Calendar - Date picker component (this page)
Schedule - Event scheduler with day/week/month views, drag & drop
Timeline - Chronological event display

Alternative Implementations

If you only need basic date picking for forms (not full calendar/scheduling functionality), consider these lightweight alternatives from our ecosystem:

Lightweight Alternative: jSuites Calendar

For projects requiring a minimal footprint for simple form date inputs, jSuites Calendar offers a lightweight JavaScript calendar plugin with core date picking functionality. Ideal when you only need basic date selection without CalendarJS's scheduling, timeline, and event management features.

When to use jSuites Calendar:

You need minimal bundle size (~2KB) for basic forms
Simple date input fields (no scheduling/events needed)
You're already using other jSuites components

When to use CalendarJS instead:

You're building a scheduling system (like Google Calendar)
You need event management with drag & drop
You want timeline views and calendar displays
You need advanced features (Schedule, Timeline components)

View jSuites Calendar Documentation →

Reactive Framework: LemonadeJS Calendar

If you're building reactive applications, the LemonadeJS Calendar provides a reactive wrapper with two-way data binding.

When to use LemonadeJS Calendar:

You're building with reactive architecture
You need automatic state synchronization
You want seamless Vue/React-like integration

View LemonadeJS Calendar Documentation →

Data Grid Integration: Jspreadsheet Date Column

For spreadsheet and data grid applications, Jspreadsheet integrates calendar functionality directly into table cells with formula support and Excel-like date operations.

When to use Jspreadsheet Date Column:

You're building a data grid or spreadsheet
You need date formulas and calculations
You want Excel-like date handling

View Jspreadsheet Pro Date Documentation →

Community Edition: Jspreadsheet CE

The open-source Jspreadsheet CE also integrates calendar functionality into data grid cells. Perfect for:

Open-source projects requiring spreadsheet functionality
Basic data grid calendar needs
Community-driven development

View Jspreadsheet CE Date Documentation →

Comparison

Feature	CalendarJS	jSuites	LemonadeJS	Jspreadsheet Pro	Jspreadsheet CE
Bundle Size	3.18KB	~2KB	~4KB	Part of grid	Part of grid
Date Range Selection	✓	✓	✓	✓	✓
Time Picker	✓	✓	✓	✓	✓
Event Scheduling	✓✓	-	-	-	-
Timeline Views	✓✓	-	-	-	-
Reactive Data Binding	-	-	✓	-	-
Formula Support	-	-	-	✓	✓
Keyboard Navigation	✓✓	✓	✓✓	✓✓	✓
ARIA Support	✓✓	-	✓✓	✓✓	Basic
License	MIT	MIT	MIT	Commercial	MIT
Best For	Calendars & Scheduling	Simple forms	Reactive Apps	Pro data grids	CE data grids

Edit this page on GitHub