@daypilot/daypilot-lite-react 3.20.1 → 3.21.0

package/README.md

@@ -53,68 +53,61 @@ How to use the open-source React resource calendar component to create a schedul
 [React Calendar with Date Picker (Open-Source)](https://code.daypilot.org/10750/react-calendar-with-date-picker-open-source)  
 How to use a popup date picker to select a date displayed by the React Calendar component.
 
-## Example
-
-```javascript
-import React, {Component} from 'react';
-import {DayPilot, DayPilotCalendar} from "@daypilot/daypilot-lite-react";
+### Next.js Weekly Calendar Tutorial
 
-class Calendar extends Component {
+[![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)
 
-    constructor(props) {
-        super(props);
+[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.
 
-        this.calendarRef = React.createRef();
+## Example
 
-        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);
+```javascript
+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"
             },
-        };
-    }
-
-    calendar() {
-        return this.calendarRef.current.control;
-    }
-
-    componentDidMount() {
-
-        // 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}
-            />
-        );
-    }
+        ]);
+    }, []);
+
+    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;