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.