JavaScript Calendar

Official JavaScript Calendar Documenation

Compatible with Vanilla JavaScript, LemonadeJS, React, VueJS 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.

$3

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

``bash
$ npm install @lemonadejs/calendar
`

$3

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

`html






`

$3

Quick example with ReactJS.

`javascript
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 (
<>


);
}
``

$3

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

$3

| 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