JavaScript Calendar

Official website and documentation is here

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

JavaScript Calendar

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 using directly from a CDN.

npm Installation

To install it in your project using npm, run the following command:

$ npm install @lemonadejs/calendar

CDN

For immediate use without NPM, include these script tags in your HTML for access to the calendar and its dependencies:

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

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

Configuration

You can configure things such as calendar starting date, calendar events, and customize functions.

Calendar Properties

| Attribute | Type | Description | | --------- |------------------|-------------------------------------------------------------------------------------------------------------------| | type? | string | Determines the rendering type for the calendar. Options: 'inline', 'default'. | | range? | boolean | Enables the range mode for date selection. | | value? | number or string | Represents the currently selected date. | | numeric? | boolean | Enables the use of numeric dates, treating them as serial numbers. | | input? | HTML element | An optional reference to control the calendar opening. The value is automatically bound when using this property. |

Calendar Events

| Event | Description | |----------------------------------|-------------------------------------| | onchange?: (self, value) => void | Called when a new date is selected. |

License

The LemonadeJS Reactive JavaScript Calendar is released under the MIT.

Other Tools

• jSuites Plugins - JavaScript Calendar
• Jspreadsheet - JavaScript Spreadsheet