@daypilot/daypilot-lite-react - npm Package Compare versions

Comparing version 3.20.1 to 3.21.0

package.json

 {
     "name": "@daypilot/daypilot-lite-react",
-    "version": "3.20.1",
+    "version": "3.21.0",
     "description": "DayPilot Lite for React",
@@ -5,0 +5,0 @@ "homepage": "https://javascript.daypilot.org/",

README.md

@@ -56,64 +56,57 @@ # DayPilot Lite for React
 
+### Next.js Weekly Calendar Tutorial
+
+[![Next.js Weekly Calendar](https://static.daypilot.org/npm/202403/next.js-weekly-calendar-open-source.png)](https://code.daypilot.org/45330/next-js-weekly-calendar-open-source)
+
+[Next.js Weekly Calendar Tutorial (Open-Source)](https://code.daypilot.org/45330/next-js-weekly-calendar-open-source)  
+How to create a weekly calendar web application using a Next.js project with JavaScript source code for download.
+
 ## Example
 
 ```javascript
-import React, {Component} from 'react';
-import {DayPilot, DayPilotCalendar} from "@daypilot/daypilot-lite-react";
+import React, { useState, useEffect } from 'react';
+import { DayPilot, DayPilotCalendar } from "@daypilot/daypilot-lite-react";
 
-class Calendar extends Component {
+function Calendar() {
+    const [calendar, setCalendar] = useState(null);
+    const [events, setEvents] = useState([]);
 
-    constructor(props) {
-        super(props);
-
-        this.calendarRef = React.createRef();
-
-        this.state = {
-            viewType: "Week",
-            timeRangeSelectedHandling: "Enabled",
-            onEventClick: async args => {
-                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;
-                this.calendar.events.update(e);
+    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"
+            },
+        ]);
+    }, []);
 
-    calendar() {
-        return this.calendarRef.current.control;
-    }
+    const onEventClick = async args => {
+        if (!calendar) return; // Ensure calendar is set
 
-    componentDidMount() {
+        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);
+    };
 
-        // load event data
-        this.setState({
-            startDate: "2022-09-07",
-            events: [
-                {
-                    id: 1,
-                    text: "Event 1",
-                    start: "2023-09-07T10:30:00",
-                    end: "2023-09-07T13:00:00"
-                },
-                {
-                    id: 2,
-                    text: "Event 2",
-                    start: "2023-09-08T09:30:00",
-                    end: "2023-09-08T11:30:00",
-                    barColor: "#6aa84f"
-                },
-            ]
-        });
-
-    }
-
-    render() {
-        return (
-            <DayPilotCalendar
-                {...this.state}
-                ref={this.calendarRef}
-            />
-        );
-    }
+    return (
+        <DayPilotCalendar
+            viewType={"Week"}
+            startDate={"2024-09-07"}
+            timeRangeSelectedHandling={"Enabled"}
+            events={events}
+            onEventClick={onEventClick}
+            controlRef={setCalendar}
+        />
+    );
 }
@@ -120,0 +113,0 @@

No alert changes

Improved metrics

Total package byte prevSize

284668

increased by0.29%

Lines of code

1016

increased by0.2%

Worsened metrics

Number of lines in readme file

132

decreased by-5.04%

No dependency changes