Official website and documentation is here
Compatible with Vanilla JavaScript, LemonadeJS, React, Vue 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.
You can install using NPM or using directly from a CDN.
To install it in your project using npm, run the following command:
$ npm install @lemonadejs/calendarFor 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>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()} />
</>);
}You can configure things such as calendar starting date, calendar events, and customize functions.
| 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. |
| Event | Description |
|---|---|
| onchange?: (self, value) => void | Called when a new date is selected. |
The LemonadeJS Reactive JavaScript Calendar is released under the MIT.