@daypilot/daypilot-lite-javascript 3.15.0 → 3.17.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -18,17 +18,24 @@ Customize the scheduling components using an online [UI Builder](https://builder
18
18
 
19
19
  ## Features
20
20
 
21
- * Calendar/scheduler views: day, week, work week, month, resource calendar
21
+ * Calendar/scheduler views: day, week, work week, month
22
+ * Display a custom number of days (e.g. 4 days)
23
+ * Resource calendar for scheduling multiple resources side by side (rooms, employees, tools, etc.)
24
+ * Integrated helper for day/week/month switching (with date picker synchronization)
22
25
  * Event creation using drag and drop
23
26
  * Drag and drop event moving and resizing
24
27
  * Integrated delete icon
25
28
  * Event duration bar with customizable color
29
+ * Context menu
30
+ * Built-in modal dialog for editing event details
31
+ * Custom icons inside events with extended functionality (context menu, custom event handler)
26
32
  * Date picker with free/busy days highlighting, free-hand range selection, day cell customization
27
33
  * CSS themes (use theme builder to create your own theme)
28
34
  * Event customization (text, HTML, colors...)
29
35
  * Built-in XSS protection
30
36
  * Localization support
31
37
  * TypeScript definitions
38
+ * [Angular](https://www.npmjs.com/package/@daypilot/daypilot-lite-angular), [React](https://www.npmjs.com/package/@daypilot/daypilot-lite-react), and [Vue](https://www.npmjs.com/package/@daypilot/daypilot-lite-vue) packages available
32
39
 
33
40
  ## Tutorials
34
41
 
@@ -43,16 +50,46 @@ Event calendar introduction - week view, loading data, drag and drop, CSS themes
43
50
 
44
51
  [![JavaScript Resource Calendar](https://static.daypilot.org/npm/202207/javascript-resource-calendar-open-source.png)](https://code.daypilot.org/87709/javascript-resource-calendar-tutorial-php-mysql)
45
52
 
46
- [JavaScript Resource Calendar Tutorial - PHP/MySQL (Open-Source)](https://code.daypilot.org/87709/javascript-resource-calendar-tutorial-php-mysql)
53
+ [JavaScript Resource Calendar Tutorial - PHP/MySQL (Open-Source)](https://code.daypilot.org/87709/javascript-resource-calendar-tutorial-php-mysql)
47
54
  The resource calendar displays custom resources (people, rooms, tools) as columns. This tutorial shows how to load resource data from a PHP/MySQL backend and show custom calendar columns.
48
55
 
49
- ## HTML5/JavaScript Calendar with Day/Week/Month Views (PHP, MySQL)
56
+ ### HTML5/JavaScript Calendar with Day/Week/Month Views (PHP, MySQL)
50
57
 
51
58
  [![Calendar with Day/Week/Month Views](https://static.daypilot.org/npm/202304/html5-javascript-calendar-with-day-week-month-views.png)](https://code.daypilot.org/27988/html5-calendar-with-day-week-month-views-javascript-php)
52
59
 
53
- [Open-Source HTML5/JavaScript Calendar with Day/Week/Month Views (PHP, MySQL)](https://code.daypilot.org/27988/html5-calendar-with-day-week-month-views-javascript-php)
60
+ [Open-Source HTML5/JavaScript Calendar with Day/Week/Month Views (PHP, MySQL)](https://code.daypilot.org/27988/html5-calendar-with-day-week-month-views-javascript-php)
54
61
  HTML5/JavaScript event calendar with day, week, and month views and integrated date navigator. Includes a sample PHP backend with MySQL database.
55
62
 
63
+
64
+ ### ASP.NET Core Weekly Calendar
65
+
66
+ [![ASP.NET Core Weekly Calendar](https://static.daypilot.org/npm/202306/asp.net-core-weekly-calendar-component-open-source.png)](https://code.daypilot.org/31735/javascript-weekly-calendar-asp-net-core)
67
+
68
+ [ASP.NET Core Weekly Calendar (Open-Source)](https://code.daypilot.org/31735/javascript-weekly-calendar-asp-net-core)
69
+ Simple ASP.NET Core web application that displays event data in a weekly calendar. Uses Entity Framework Core for data access.
70
+
71
+ ### ASP.NET Core Monthly Calendar
72
+
73
+ [![ASP.NET Core Monthly Calendar](https://static.daypilot.org/npm/202306/asp.net-core-monthly-calendar-component-open-source.png)](https://code.daypilot.org/95109/html5-monthly-calendar-and-asp-net-core)
74
+
75
+ [ASP.NET Core Monthly Calendar (Open-Source)](https://code.daypilot.org/31735/javascript-weekly-calendar-asp-net-core)
76
+ ASP.NET Core web application that displays scheduled events in a monthly calendar. Visual Studio project for download.
77
+
78
+ ### Spring Boot Weekly Calendar
79
+
80
+ [![Spring Boot Weekly Calendar](https://static.daypilot.org/npm/202306/weekly-event-calendar-in-spring-boot-java-open-source.png)](https://code.daypilot.org/41760/using-javascript-html5-event-calendar-in-spring-boot-java)
81
+
82
+ [Weekly Event Calendar in Spring Boot/Java (Open-Source)](https://code.daypilot.org/41760/using-javascript-html5-event-calendar-in-spring-boot-java)
83
+ Create a Spring Boot scheduling application with a weekly HTML5/JavaScript calendar component.
84
+
85
+ ### Spring Boot Monthly Calendar
86
+
87
+ [![Spring Boot Monthly Calendar](https://static.daypilot.org/npm/202306/spring-boot-monthly-calendar-java-javascript-html5.png)](https://code.daypilot.org/58614/using-javascript-html5-monthly-calendar-in-spring-boot-java)
88
+
89
+ [Monthly Calendar in Spring Boot/Java (Open-Source)](https://code.daypilot.org/58614/using-javascript-html5-monthly-calendar-in-spring-boot-java)
90
+ Spring Boot web application that displays a monthly calendar with drag and drop support. Implemented using JavaScript monthly calendar control from DayPilot package.
91
+
92
+
56
93
  ## Example
57
94
 
58
95
  HTML:
@@ -70,7 +107,7 @@ import {DayPilot} from "@daypilot/daypilot-lite-javascript";
70
107
  // initialize the calendar component
71
108
  const calendar = new DayPilot.Calendar("calendar", {
72
109
  viewType: "Week",
73
- startDate: "2022-03-21",
110
+ startDate: "2023-09-18",
74
111
  headerDateFormat: "d/M/yyyy",
75
112
  onEventMoved: args => {
76
113
  console.log("Event was moved:", args.e);
@@ -81,15 +118,15 @@ calendar.init();
81
118
  // load calendar events
82
119
  const events = [
83
120
  {
84
- start: "2022-03-20T11:00:00",
85
- end: "2022-03-20T14:00:00",
121
+ start: "2023-03-18T11:00:00",
122
+ end: "2023-03-18T14:00:00",
86
123
  id: 1,
87
124
  text: "Event 1",
88
125
  barColor: "#f37021"
89
126
  },
90
127
  {
91
- start: "2022-03-21T11:00:00",
92
- end: "2022-03-21T14:00:00",
128
+ start: "2023-03-19T11:00:00",
129
+ end: "2023-03-19T14:00:00",
93
130
  id: 2,
94
131
  text: "Event 2",
95
132
  barColor: "#cc004c"