@lemonadejs/calendar

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