Calendar

The Calendar component is a full-featured solution for managing events, appointments, and dates. With support for multiple view modes (month, week, day), customizable event styling, and an intuitive interface, it's perfect for booking systems, scheduling applications, and event management tools.

<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 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="2025-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>

Features

Multiple Views: Switch between month, week, and day views
Event Management: Create, edit, and delete events with ease
Drag and Drop: Move events between dates effortlessly
Customizable Colors: Define unique colors for event categories
Responsive Design: Optimized for all screen sizes
Event Callbacks: Handle clicks, changes, and custom interactions
Time Zone Support: Work with different time zones
Recurring Events: Support for repeating events

Use Cases

Appointment booking systems
Event management platforms
Team scheduling applications
Personal organizers
Room and resource booking
Class and course scheduling
Conference planning tools

Edit this page on GitHub