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

Events

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

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() {
    const self = this;

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

<!-- codesandbox: https://codesandbox.io/p/sandbox/dreamy-waterfall-mh572x -->
<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>

// codesandbox: https://codesandbox.io/p/sandbox/lemonadejs-reactive-app-forked-wfjw3n
import Calendar from '@lemonadejs/calendar';
import "@lemonadejs/calendar/dist/style.css";
import "@lemonadejs/modal/dist/style.css";

export default function App() {
    const self = this;

    return `<div>
        <input type="text" :ref="self.inputRef" />
        <Calendar :input="self.inputRef" :range="true" />
    </div>`
}

// codesandbox: https://codesandbox.io/p/devbox/nostalgic-jackson-ljty72
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} />
    </>);
}

<!-- codesandbox: https://codesandbox.io/p/sandbox/funny-sea-yfxyjr -->
<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.

Edit this page on GitHub

Jspreadsheet Pro