JavaScript Calendar

Official JavaScript Calendar Documentation

Compatible with Vanilla JavaScript, LemonadeJS, React, VueJS or Angular.

Leverage the power of the LemonadeJS Calendar, a lightweight and versatile JavaScript component compatible with React, VueJS, and Angular. Designed to enhance web applications, it offers an embeddable calendar for easy date, time, and range selections. Key features include:

• Intuitive keyboard navigation.
• A reactive and responsive design for seamless device adaptation.
• Flexible range selection for various applications.
• Customizable options to match your project needs.

Getting Started

You can install using NPM or directly from a CDN.

npm Installation

npm install @lemonadejs/calendar

CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/style.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/calendar/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/@lemonadejs/modal/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/calendar/dist/index.min.js"></script>

Usage

Quick example with React:

import React, { useRef } from 'react';
import Calendar from '@lemonadejs/calendar/dist/react';

import '@lemonadejs/calendar/dist/style.css';
import '@lemonadejs/modal/dist/style.css';

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

    return <Calendar type="inline" ref={calendarRef} value={new Date()} />;
}

API Reference

Options

| Attribute | Type | Description | |----------------|---------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------| | type? | 'default' \| 'auto' \| 'picker' \| 'inline' | Render mode. 'auto' resolves to 'default' (≥ 800px wide) or 'picker' (smaller). Default: 'default'. | | format? | string | Date format using Excel-like tokens (e.g. 'dd/mm/yyyy'). | | value? | number \| string \| Date \| Array | Initial value. ISO string ('2025-06-15'), Excel-style serial number, native Date, or [start, end] tuple in range mode. | | numeric? | boolean | Return values as Excel-style numbers via getValue(). Default: false. | | range? | boolean | Enable range selection. Default: false. | | footer? | boolean | Show the footer (Reset / Done buttons + Today + time picker). Default: true. | | time? | boolean | Show hour and minute selectors in the footer. Default: false. | | grid? | boolean | Apply grid display mode (sets data-grid="true" on root). Default: false. | | placeholder? | string | Placeholder applied to a bound input. | | disabled? | boolean | Disable interaction. Default: false. | | startingDay? | number | First day of the week (0=Sun … 6=Sat). Default: 0. | | validRange? | string[] \| number[] \| Function | Bounds tuple [from, to] (ISO or Excel serial), or a predicate (day, month, year, item) => boolean to disable a cell. | | data? | Array<{ date: string, [key: string]: any }> | Event entries; cells with a matching date get a data-event marker. | | wheel? | boolean | Allow mouse-wheel month navigation. Default: true. | | input? | HTMLInputElement \| 'auto' | Existing input to bind, or 'auto' to create one. | | initInput? | boolean | Wire up input listeners (open-on-focus, type-to-update). Default: true. |

Events

| Event | Signature | Description | |-------------|------------------------------------------|-----------------------------------------------------------------------------------| | onchange? | (self, value) => void | Fired when the value changes (date selection or setValue). | | onupdate? | (self, value) => void | Fired when the cursor moves between cells (e.g. via arrow keys). | | onopen? | (self) => void | Fired when the modal opens ('picker' / 'default' types only). | | onclose? | (self, origin) => void | Fired when the modal closes. origin is 'button', 'escape', 'focusout', or any custom string passed to close({ origin }). | | onChange? | (event) => void | React-only. Forwarded to the bound input's native change DOM event. Distinct from onchange. |

Instance

Calling Calendar(root, options) returns an instance exposing:

| Property / Method | Description | |--------------------|----------------------------------------------------------------------------------------------| | el | Root DOM element. | | value | Current value (assignable; mutation triggers a re-render). | | format | Active date format mask. | | type | Resolved type (post-'auto' resolution). | | view | Current view: 'days' \| 'months' \| 'years'. | | range | Range mode flag. | | rangeValues | [start, end] numeric tuple while a range is active, null otherwise. | | modal | Modal instance (only for 'picker' / 'default' types). | | content | Inner content element (focus target for keyboard navigation). | | input | Bound input element (auto-created or user-provided). | | open() | Open the modal. | | close(options?) | Close the modal. Pass { origin: '...' } to label the close source. | | isClosed() | true / false for modal types; undefined for 'inline'. | | setView(view) | Switch view. Accepts 'days', 'months', 'years'. | | next() | Navigate forward (month / year / year-block depending on the current view). | | prev() | Navigate backward. | | reset() | Clear the value and close the modal when applicable. | | getValue() | Return the current value as a string (or number when numeric: true). | | setValue(v) | Set the value programmatically. Accepts ISO strings, Excel serial numbers, or [start, end] tuples in range mode. | | update() | Commit the current cursor selection (used by Done button). |

License

Released under the MIT license.

Other Tools

• jSuites Plugins - JavaScript Calendar
• Jspreadsheet - JavaScript Spreadsheet