@daypilot/daypilot-lite-javascript 3.7.0 → 3.9.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 +98 -13
- package/daypilot-javascript.min.js +6 -6
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,21 +1,106 @@
|
|
|
1
|
-
DayPilot Lite for JavaScript
|
|
2
|
-
===================================
|
|
1
|
+
# DayPilot Lite for JavaScript
|
|
3
2
|
|
|
4
|
-
JavaScript/HTML5 event calendar/scheduler components that can display day/week/month calendar views.
|
|
3
|
+
[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.
|
|
5
4
|
|
|
6
|
-
|
|
7
|
-
--------
|
|
5
|
+
## What's New
|
|
8
6
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
7
|
+
[Release History](https://javascript.daypilot.org/daypilot-lite-history/)
|
|
8
|
+
|
|
9
|
+
## Online Demo
|
|
10
|
+
|
|
11
|
+
[](https://javascript.daypilot.org/demo/lite/)
|
|
12
|
+
|
|
13
|
+
[Online Demo](https://javascript.daypilot.org/demo/lite/)
|
|
14
|
+
|
|
15
|
+
## Features
|
|
16
|
+
|
|
17
|
+
* Calendar/scheduler views: day, week, work week, month, resource calendar
|
|
12
18
|
* Event creation using drag and drop
|
|
19
|
+
* Drag and drop event moving and resizing
|
|
13
20
|
* Integrated delete icon
|
|
21
|
+
* Event duration bar with customizable color
|
|
22
|
+
* Date picker with free/busy days highlighting, free-hand range selection, day cell customization
|
|
23
|
+
* CSS themes (use theme builder to create your own theme)
|
|
24
|
+
* Event customization (text, HTML, colors...)
|
|
25
|
+
* Built-in XSS protection
|
|
26
|
+
* Localization support
|
|
27
|
+
* TypeScript definitions
|
|
28
|
+
|
|
29
|
+
## Tutorials
|
|
30
|
+
|
|
31
|
+
### JavaScript Event Calendar Tutorial
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
[HTML5/JavaScript Event Calendar (Open-Source)](https://code.daypilot.org/17910/html5-event-calendar-open-source)
|
|
36
|
+
Event calendar introduction - week view, loading data, drag and drop, CSS themes, sample PHP REST backend.
|
|
37
|
+
|
|
38
|
+
### JavaScript Resource Calendar Tutorial
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
[JavaScript Resource Calendar Tutorial - PHP/MySQL (Open-Source)](https://code.daypilot.org/87709/javascript-resource-calendar-tutorial-php-mysql)
|
|
43
|
+
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.
|
|
44
|
+
|
|
45
|
+
## Example
|
|
46
|
+
|
|
47
|
+
HTML:
|
|
48
|
+
|
|
49
|
+
```html
|
|
50
|
+
<div id="calendar"></div>
|
|
51
|
+
<script src="app.js"></script>
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
JavaScript:
|
|
55
|
+
|
|
56
|
+
```javascript
|
|
57
|
+
import {DayPilot} from "@daypilot/daypilot-lite-javascript";
|
|
58
|
+
|
|
59
|
+
// initialize the calendar component
|
|
60
|
+
const calendar = new DayPilot.Calendar("calendar", {
|
|
61
|
+
viewType: "Week",
|
|
62
|
+
startDate: "2022-03-21",
|
|
63
|
+
headerDateFormat: "d/M/yyyy",
|
|
64
|
+
onEventMoved: args => {
|
|
65
|
+
console.log("Event was moved:", args.e);
|
|
66
|
+
}
|
|
67
|
+
});
|
|
68
|
+
calendar.init();
|
|
69
|
+
|
|
70
|
+
// load calendar events
|
|
71
|
+
const events = [
|
|
72
|
+
{
|
|
73
|
+
start: "2022-03-20T11:00:00",
|
|
74
|
+
end: "2022-03-20T14:00:00",
|
|
75
|
+
id: 1,
|
|
76
|
+
text: "Event 1",
|
|
77
|
+
barColor: "#f37021"
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
start: "2022-03-21T11:00:00",
|
|
81
|
+
end: "2022-03-21T14:00:00",
|
|
82
|
+
id: 2,
|
|
83
|
+
text: "Event 2",
|
|
84
|
+
barColor: "#cc004c"
|
|
85
|
+
}
|
|
86
|
+
];
|
|
87
|
+
calendar.update({events});
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
## Documentation
|
|
91
|
+
|
|
92
|
+
* [Weekly calendar](https://doc.daypilot.org/calendar/week-view/)
|
|
93
|
+
* [Monthly calendar](https://doc.daypilot.org/month/)
|
|
94
|
+
* [Resource calendar](https://doc.daypilot.org/calendar/resources-view/)
|
|
95
|
+
* [Date picker](https://doc.daypilot.org/navigator/)
|
|
96
|
+
|
|
97
|
+
## CSS Themes
|
|
98
|
+
|
|
99
|
+
The [Theme Designer](https://themes.daypilot.org/) lets you create and download your own CSS theme using an online visual tool.
|
|
100
|
+
|
|
101
|
+
## License
|
|
14
102
|
|
|
15
|
-
License
|
|
16
|
-
-------
|
|
17
103
|
Apache License 2.0
|
|
18
104
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
https://javascript.daypilot.org/
|
|
105
|
+
|
|
106
|
+
|