JavaScript Calendar

JavaScript Components

Component size: 3.18KB gzipped

Built on CalendarJS: This reactive calendar component is powered by CalendarJS, providing advanced accessibility, keyboard navigation, and comprehensive date/time features with LemonadeJS’s reactive data binding.

The LemonadeJS Calendar is a versatile JavaScript calendar component designed for seamless integration with popular frameworks like React, VueJS, and Angular. This component enhances your web applications by providing an embeddable calendar picker that can be easily incorporated into HTML forms, facilitating straightforward date, time, and range selections. It is engineered to support keyboard navigation, ensuring a superior user experience. Notably lightweight and built with a reactive and responsive design, the LemonadeJS Calendar offers:

Intuitive Keyboard Navigation: Navigate dates using the keyboard for efficiency and accessibility.
Reactive & Responsive Design: Adapts smoothly to different devices and screen sizes.
Flexible Range Selection: Select date ranges with ease, ideal for booking systems and scheduling.
Event-Driven Integration: Seamless integration into your application workflow.
Lightweight Architecture: Optimized for speed and performance, ensuring minimal impact on load times.
High Customizable: Tailor the calendar’s appearance and functionality to fit your project’s needs.

Documentation

Installation

npm install @lemonadejs/calendar

Settings

Attribute	Description
`type?: String`	Determines the rendering type for the calendar. Options: ‘default’, ‘auto’, ‘picker’, ‘inline’.
`format?: String`	Date format. Excel-like format (e.g., dd/mm/yyyy). Default: ‘YYYY-MM-DD’.
`range?: Boolean`	Enables the range mode for date selection.
`value?: Number\|String\|Date\|Array`	Initial value. Accepts an ISO string, an Excel serial number, a native `Date`, or `[start, end]` for range mode.
`numeric?: Boolean`	Calendar value will be an Excel-like number or ISO string. Default: false.
`footer?: Boolean`	Show footer. Default: true.
`time?: Boolean`	Show hour and minute picker.
`grid?: Boolean`	Show grid mode. Default: false.
`placeholder?: String`	Placeholder text for the input.
`disabled?: Boolean`	Disabled state. Default: false.
`startingDay?: Number`	Starting day of the week. From 0-6 where zero is Sunday and six is Saturday.
`validRange?: Array\|Function`	Valid range as `[from, to]` (numbers or ISO strings), or a predicate `(day, month, year, item) => boolean` returning truthy to disable a cell.
`data?: Array`	Calendar events data as array of objects with date property.
`wheel?: Boolean`	Update view on mouse wheel. Default: true.
`input?: HTML Element`	An optional reference to control the calendar opening. The value is automatically bound when using this property.
`initInput?: Boolean`	Create events and assign calendar classes for the input. Default: true.

Events

Event	Description
onchange?: (self, value) => void	Called when a new date is selected.
onupdate?: (self, value) => void	Called when the calendar view is updated.
onclose?: (self, origin) => void	Called when the calendar is closed.
onopen?: (self) => void	Called when the calendar is opened.
onChange?: (e) => void	React dedicated onChange event.

Methods

The calendar instance provides the following methods for programmatic control:

Method	Description
open()	Open the calendar modal.
close(options?)	Close the calendar modal with optional parameters.
isClosed()	Returns true if the calendar is closed.
setView(view)	Change the calendar view. Options: ‘days’, ‘months’, ‘years’.
next()	Navigate to the next month or year depending on the current view.
prev()	Navigate to the previous month or year depending on the current view.
reset()	Reset the calendar value and close the modal when applicable.
getValue()	Get the current calendar value as string or number.
setValue(value)	Set the calendar value. Use number for Excel-like numbers or string for ISO dates.
update()	Accept the selected value on the calendar.

Examples

HTML Embed Example

Embed the LemonadeJS Calendar into your web application to create a user-friendly date picker. Utilize event handling to integrate seamlessly with your application’s functionality.

live

<html>
<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/@jsuites/utils/dist/index.min.js"></script>
<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>

<div id='root' style='background-color: white;'></div>

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

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

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

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()} />
    </>);
}

<template>
    <div>
        <Calendar type="inline" value="2022-01-15" ref="calendarRef" />
    </div>
</template>

<script>
import Calendar from '@lemonadejs/calendar/dist/vue'
import "@lemonadejs/calendar/dist/style.css";
import "@lemonadejs/modal/dist/style.css";

export default {
    name: 'App',
    components: {
        Calendar
    },
}
</script>

<style></style>

Range picking

The LemonadeJS JavaScript Calendar provides various features that greatly enhance flexibility. These include picking date ranges, navigating through the calendar using keyboard controls, selecting specific times, and more.

live

<html>
<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/@jsuites/utils/dist/index.min.js"></script>
<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>

<input type="text" id="input-range-eg" /> <div id="root"></div>

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

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

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

import React, { useRef, useEffect, useState } 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();
    const inputRef = useRef();

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

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

<script>
import { ref } from 'vue';

import Calendar from '@lemonadejs/calendar/dist/vue';
import "@lemonadejs/calendar/dist/style.css";
import "@lemonadejs/modal/dist/style.css";

export default {
  name: 'App',
  components: {
      Calendar
  },
  setup() {
    const inputRef = ref(null);

    return {
      inputRef,
    };
  }
}
</script>

Codesandbox

Working examples

To explore practical implementations of the LemonadeJS Calendar component in different frameworks, you can visit the following CodeSandbox examples. Each link provides a unique setup tailored to a specific framework, allowing you to see the calendar in action and understand how it integrates within various development environments.

JavaScript Calendar{target=“blank”}: Experience the LemonadeJS Calendar in a vanilla JavaScript setting for a straightforward implementation.
LemonadeJS Calendar{target=“blank”}: Dive into a more advanced example showcasing the reactive features of the LemonadeJS Calendar in a dynamic application context.
React Calendar{target=“blank”}: Integrate LemonadeJS calendar with React and enhancing your React applications with date, time or range picking functionalities.
VueJS Calendar{target=“blank”}: Explore the integration of the LemonadeJS Calendar within a VueJS application.

Calendar Component Family

The LemonadeJS Calendar is part of our calendar component ecosystem:

CalendarJS - Core Component

The underlying calendar engine powering this reactive wrapper. CalendarJS can be used standalone for non-reactive applications or integrated with any framework.

Features:

Full keyboard navigation with ARIA support
Date range selection
Time picking
Custom validation
International settings

View CalendarJS Documentation

When to Use Each

Use Case	Recommended Component
Reactive application	LemonadeJS Calendar (this page)
Forms, filters, general purpose	CalendarJS
Minimal bundle size	Jsuites Calendar
Data grid integration	Jspreadsheet Date

Dropdown - Reactive dropdown and autocomplete
Modal - Reactive modal dialogs
Data Grid - Reactive spreadsheet component