Products
Star

Documentation keyboard_arrow_right Plugins keyboard_arrow_right Calendar

JavaScript Calendar

JavaScript Calendar

JavaScript Components

Component size: 3.18KB gzipped

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 Represents the currently selected date.
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 Valid date range as array of numbers or strings.
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.

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

<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/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: Experience the LemonadeJS Calendar in a vanilla JavaScript setting for a straightforward implementation.
  • LemonadeJS Calendar: Dive into a more advanced example showcasing the reactive features of the LemonadeJS Calendar in a dynamic application context.
  • React Calendar: Integrate LemonadeJS calendar with React and enhancing your React applications with date, time or range picking functionalities.
  • VueJS Calendar: Explore the integration of the LemonadeJS Calendar within a VueJS application.

Edit this page on GitHub