@lemonadejs/calendar NPM

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.