Schedule

The Schedule demo showcases date range selection functionality, which is essential for scheduling applications. This example demonstrates how to implement a calendar with range picking capabilities, perfect for booking systems, appointment scheduling, and availability management. The range picker allows users to select start and end dates intuitively.

<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-schedule" placeholder="Select date range" style="padding: 10px; width: 300px; font-size: 14px;" />
<div id="root"></div>

<script>
Calendar(document.getElementById("root"), {
    range: true,
    input: document.getElementById("input-schedule"),
    onchange: function(self, value) {
        console.log('Selected range:', value);
    }
});
</script>
</html>

import React, { useRef, 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 [selectedRange, setSelectedRange] = useState('');

    const handleChange = (self, value) => {
        setSelectedRange(value);
        console.log('Selected range:', value);
    };

    return (<>
        <input
            type="text"
            value={selectedRange}
            placeholder="Select date range"
            style={{padding: '10px', width: '300px', fontSize: '14px', marginBottom: '10px'}}
            readOnly
        />
        <Calendar
            range={true}
            ref={calendarRef}
            onchange={handleChange}
        />
    </>);
}

<template>
    <div>
        <input
            type="text"
            v-model="selectedRange"
            placeholder="Select date range"
            style="padding: 10px; width: 300px; font-size: 14px; margin-bottom: 10px;"
            readonly
        />
        <Calendar
            :range="true"
            ref="calendarRef"
            @onchange="handleChange"
        />
    </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
    },
    data() {
        return {
            selectedRange: ''
        };
    },
    methods: {
        handleChange(self, value) {
            this.selectedRange = value;
            console.log('Selected range:', value);
        }
    }
};
</script>

Features

Date Range Selection: Select start and end dates with ease
Input Integration: Bind calendar to input fields automatically
Keyboard Navigation: Navigate dates using keyboard for efficiency
Visual Feedback: Clear indication of selected date ranges
Responsive Design: Works seamlessly on all devices
Event Callbacks: Handle changes and custom interactions
Flexible Format: Support for various date formats
Modal Integration: Built-in modal support for clean UI

Use Cases

Hotel and vacation booking systems
Medical appointment scheduling
Event and meeting room booking
Rental and reservation systems
Project timeline selection
Report date range filters
Availability management tools
Leave and vacation request forms

Edit this page on GitHub