@daypilot/daypilot-lite-react 3.30.0 → 3.31.0

package/README.md

@@ -1,6 +1,13 @@
 # DayPilot Lite for React
 
-[DayPilot Lite for JavaScript](https://javascript.daypilot.org/open-source/) is a library of JavaScript/HTML5 event calendar/scheduler components that can display day/week/month calendar views. It includes a React version.
+[DayPilot Lite for JavaScript](https://javascript.daypilot.org/open-source/) is a library of JavaScript/HTML5 scheduling components that can display calendar/scheduler UI:
+* day
+* week
+* month
+* resource calendar (resources as columns)
+* custom number of days as columns
+
+This is the DayPilot Lite for React package.
 
 ## What's New
 
@@ -25,7 +32,9 @@ Customize the scheduling components using an online [UI Builder](https://builder
 * 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...)
+* Event customization (text, HTML, colors, icons...)
+* Cell customization (background, images, text, HTML...)
+* Column header customization (background, images, text, HTML...)
 * Built-in XSS protection
 * Localization support
 * TypeScript definitions
@@ -39,13 +48,17 @@ Customize the scheduling components using an online [UI Builder](https://builder
 [React Weekly Calendar Tutorial (Open-Source)](https://code.daypilot.org/42221/react-weekly-calendar-tutorial)  
 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](https://static.daypilot.org/npm/202207/react-resource-calendar-tutorial.png)](https://code.daypilot.org/62447/react-resource-calendar-open-source)
+[![React Resource Calendar](https://static.daypilot.org/npm/202411/react-resource-calendar-witih-editable-columns.png)](https://code.daypilot.org/62447/react-resource-calendar-open-source)
 
 [React Resource Calendar with Editable Columns (Open-Source)](https://code.daypilot.org/62447/react-resource-calendar-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 Day/Week/Month Views
 
 [![React Calendar with Day/Week/Month Views](https://static.daypilot.org/npm/202406/react-calendar-with-day-week-month-views-open-source.png)](https://code.daypilot.org/27556/react-day-week-month-calendar)
@@ -53,6 +66,8 @@ How to use the open-source React resource calendar component to create a schedul
 [React Calendar with Day/Week/Month Views (Open-Source)](https://code.daypilot.org/27556/react-day-week-month-calendar)  
 This tutorial shows how to create a complex calendar component that displays integrated daily, weekly and monthly calendars in React.
 
+***
+
 ### React Monthly Calendar
 
 [![React Monthly Calendar](https://static.daypilot.org/npm/202406/react-monthly-calendar-open-source.png)](https://code.daypilot.org/26289/react-monthly-calendar-tutorial)
@@ -60,6 +75,8 @@ This tutorial shows how to create a complex calendar component that displays int
 [React Monthly Calendar (Open-Source)](https://code.daypilot.org/26289/react-monthly-calendar-tutorial)  
 React application that displays a monthly event calendar. Calendar events use custom background to show event type. A context menu allows deleting events and changing color.
 
+***
+
 ### 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)
@@ -67,6 +84,17 @@ React application that displays a monthly event calendar. Calendar events use cu
 [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.
 
+***
+
+### Next.js Monthly Calendar Tutorial
+
+[![Next.js Monthly Calendar](https://static.daypilot.org/npm/202411/next.js-monthly-calendar-component-open-source.png)](https://code.daypilot.org/37709/next-js-monthly-calendar-open-source)
+
+[Next.js Monthly Calendar Tutorial (Open-Source)](https://code.daypilot.org/37709/next-js-monthly-calendar-open-source)  
+Learn how to build a customized monthly calendar UI in Next.js 15 using the open-source DayPilot scheduling library.
+
+***
+
 ### React Calendar with Date Picker
 
 [![React Calendar with Date Picker](https://static.daypilot.org/npm/202207/react-calendar-with-date-picker.png)](https://code.daypilot.org/10750/react-calendar-with-date-picker-open-source)
@@ -89,14 +117,14 @@ function Calendar() {
             {
                 id: 1,
                 text: "Event 1",
-                start: "2024-09-07T10:30:00",
-                end: "2024-09-07T13:00:00"
+                start: "2025-09-07T10:30:00",
+                end: "2025-09-07T13:00:00"
             },
             {
                 id: 2,
                 text: "Event 2",
-                start: "2024-09-08T09:30:00",
-                end: "2024-09-08T11:30:00",
+                start: "2025-09-08T09:30:00",
+                end: "2025-09-08T11:30:00",
                 barColor: "#6aa84f"
             },
         ]);
@@ -115,7 +143,7 @@ function Calendar() {
     return (
         <DayPilotCalendar
             viewType={"Week"}
-            startDate={"2024-09-07"}
+            startDate={"2025-09-07"}
             timeRangeSelectedHandling={"Enabled"}
             events={events}
             onEventClick={onEventClick}

package/daypilot-react.min.d.ts

@@ -163,13 +163,17 @@ export module DayPilot {
             readonly start: DayPilot.Date;
             readonly end: DayPilot.Date;
             readonly resource: ResourceId;
+            readonly x: number;
+            readonly y: number;
             readonly properties: {
                 html: string;
                 business: boolean;
                 backColor: string;
                 backImage: string;
                 backRepeat: string;
+                fontColor: string;
                 cssClass: string;
+                text: string;
             };
         };
     }
@@ -188,6 +192,7 @@ export module DayPilot {
             html: string;
             backColor: string;
             cssClass?: string;
+            horizontalAlignment?: "left" | "center" | "right";
             verticalAlignment?: "top" | "center" | "bottom";
             toolTip: string;
             areas: AreaData[];
@@ -1040,6 +1045,7 @@ export module DayPilot {
         action?: "Default" | "None" | "ContextMenu" | "ResizeEnd" | "ResizeStart" | "Move";
         backColor?: string;
         background?: string;
+        borderRadius?: number | string;
         bottom?: number | string;
         cssClass?: string;
         fontColor?: string;