@daypilot/daypilot-lite-react
TypeScript icon, indicating that this package has built-in type declarations

3.21.0 • Public • Published

DayPilot Lite for React

DayPilot Lite for JavaScript is a library of JavaScript/HTML5 event calendar/scheduler components that can display day/week/month calendar views. It includes a React version.

What's New

Release History

UI Builder

Customize the scheduling components using an online UI Builder application and download a ready-to-run React project.

Online Demo

JavaScript Event Calendar Demo

Online Demo

Features

  • Calendar/scheduler views: day, week, work week, month, resource calendar
  • Event creation using drag and drop
  • Drag and drop event moving and resizing
  • Integrated delete icon
  • Event duration bar with customizable color
  • Date picker with free/busy days highlighting, free-hand range selection, day cell customization
  • CSS themes (use theme builder to create your own theme)
  • Event customization (text, HTML, colors...)
  • Built-in XSS protection
  • Localization support
  • TypeScript definitions

Tutorials

React Weekly Calendar Tutorial

React Weekly Calendar

React Weekly Calendar Tutorial (Open-Source)
React application that displays a weekly event calendar using an open-source DayPilot React calendar component. Includes a date picker for changing the visible week. The calendar/scheduler appearance is customized using CSS.

React Resource Calendar with Editable Columns

React Resource Calendar

React Resource Calendar with Editable Columns (Open-Source)
How to use the open-source React resource calendar component to create a scheduling application for multiple groups of resources (locations, people, tools). Add a date picker and next/previous buttons that let users change the visible date.

React Calendar with Date Picker

React Calendar with Date Picker

React Calendar with Date Picker (Open-Source)
How to use a popup date picker to select a date displayed by the React Calendar component.

Next.js Weekly Calendar Tutorial

Next.js Weekly Calendar

Next.js Weekly Calendar Tutorial (Open-Source)
How to create a weekly calendar web application using a Next.js project with JavaScript source code for download.

Example

import React, { useState, useEffect } from 'react';
import { DayPilot, DayPilotCalendar } from "@daypilot/daypilot-lite-react";

function Calendar() {
    const [calendar, setCalendar] = useState(null);
    const [events, setEvents] = useState([]);

    useEffect(() => {
        setEvents([
            {
                id: 1,
                text: "Event 1",
                start: "2024-09-07T10:30:00",
                end: "2024-09-07T13:00:00"
            },
            {
                id: 2,
                text: "Event 2",
                start: "2024-09-08T09:30:00",
                end: "2024-09-08T11:30:00",
                barColor: "#6aa84f"
            },
        ]);
    }, []);

    const onEventClick = async args => {
        if (!calendar) return; // Ensure calendar is set

        const modal = await DayPilot.Modal.prompt("Update event text:", args.e.text());
        if (!modal.result) { return; }
        const e = args.e;
        e.data.text = modal.result;
        calendar.events.update(e);
    };

    return (
        <DayPilotCalendar
            viewType={"Week"}
            startDate={"2024-09-07"}
            timeRangeSelectedHandling={"Enabled"}
            events={events}
            onEventClick={onEventClick}
            controlRef={setCalendar}
        />
    );
}

export default Calendar;

Documentation

CSS Themes

The Theme Designer lets you create and download your own CSS theme using an online visual tool.

License

Apache License 2.0

Package Sidebar

Install

npm i @daypilot/daypilot-lite-react

Weekly Downloads

524

Version

3.21.0

License

Apache-2.0

Unpacked Size

285 kB

Total Files

4

Last publish

Collaborators

  • daypilot