@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 +46 -9
- package/daypilot-javascript.min.js +8 -8
- package/package.json +1 -1
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
|
|
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
|
[](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
|
-
|
|
56
|
+
### HTML5/JavaScript Calendar with Day/Week/Month Views (PHP, MySQL)
|
|
50
57
|
|
|
51
58
|
[](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
|
+
[](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
|
+
[](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
|
+
[](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
|
+
[](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: "
|
|
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: "
|
|
85
|
-
end: "
|
|
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: "
|
|
92
|
-
end: "
|
|
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"
|