Skip to content

Commit 5e5ba91

Browse files
marikor168vkurko
marikor168
authored and
vkurko
committed
v5.4.0
Added ability to change resource expander icons via icons option Added resourceExpand option
1 parent c542275 commit 5e5ba91

File tree

13 files changed

+381
-92
lines changed

13 files changed

+381
-92
lines changed

‎CHANGELOG.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
# EventCalendar changelog
22

3+
## 5.4.0
4+
February 12, 2026
5+
* Added ability to change resource expander icons via `icons` option ([616](https://github.com/vkurko/calendar/issues/616))
6+
* Added `resourceExpand` option ([404](https://github.com/vkurko/calendar/pull/404))
7+
38
## 5.3.3
49
February 11, 2026
510
* Another attempt to fix a bug related to event manipulation ([611](https://github.com/vkurko/calendar/issues/611))

‎README.md‎

Lines changed: 93 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -68,9 +68,9 @@ Inspired by [FullCalendar](https://fullcalendar.io/), it implements similar opti
6868
- [eventDragStart](#eventdragstart)
6969
- [eventDragStop](#eventdragstop)
7070
- [eventDrop](#eventdrop)
71+
- [eventDurationEditable](#eventdurationeditable)
7172
</td><td>
7273

73-
- [eventDurationEditable](#eventdurationeditable)
7474
- [eventFilter](#eventfilter)
7575
- [eventLongPressDelay](#eventlongpressdelay)
7676
- [eventMouseEnter](#eventmouseenter)
@@ -92,6 +92,7 @@ Inspired by [FullCalendar](https://fullcalendar.io/), it implements similar opti
9292
- [height](#height)
9393
- [hiddenDays](#hiddendays)
9494
- [highlightedDates](#highlighteddates)
95+
- [icons](#icons)
9596
- [lazyFetching](#lazyfetching)
9697
- [listDayFormat](#listdayformat)
9798
- [listDaySideFormat](#listdaysideformat)
@@ -102,11 +103,12 @@ Inspired by [FullCalendar](https://fullcalendar.io/), it implements similar opti
102103
- [noEventsClick](#noeventsclick)
103104
- [noEventsContent](#noeventscontent)
104105
- [nowIndicator](#nowindicator)
106+
- [pointer](#pointer)
105107
</td><td>
106108

107-
- [pointer](#pointer)
108109
- [refetchResourcesOnNavigate](#refetchresourcesonnavigate)
109110
- [resizeConstraint](#resizeconstraint)
111+
- [resourceExpand](#resourceexpand)
110112
- [resources](#resources)
111113
- [resourceLabelContent](#resourcelabelcontent)
112114
- [resourceLabelDidMount](#resourcelabeldidmount)
@@ -251,8 +253,8 @@ This bundle contains a version of the calendar that includes all plugins and is
251253

252254
The first step is to include the following lines of code in the `<head>` section of your page:
253255
```html
254-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.3.3/dist/event-calendar.min.css">
255-
<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.3.3/dist/event-calendar.min.js"></script>
256+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.4.0/dist/event-calendar.min.css">
257+
<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.4.0/dist/event-calendar.min.js"></script>
256258
```
257259

258260
<details>
@@ -1829,6 +1831,31 @@ Array of dates that need to be highlighted in the calendar.
18291831

18301832
Each date can be either an ISO8601 date string like `'2026-12-31'`, or a JavaScript Date object.
18311833

1834+
### icons
1835+
- Type `object`
1836+
- Default `{collapse: {html: '&minus;'}, expand: {html: '&plus;'}}`
1837+
1838+
Defines icons used in some buttons, such as those for expanding nested resources in `resourceTimeline` views.
1839+
1840+
Each icon is specified as a [Content](#content) value.
1841+
1842+
This option can be either a plain object with all necessary properties, or a callback function that receives default icons object and should return a new one:
1843+
1844+
```js
1845+
function (icons) {
1846+
// return new icons object
1847+
}
1848+
```
1849+
<table>
1850+
<tr>
1851+
<td>
1852+
1853+
`icons`
1854+
</td>
1855+
<td>An object with default icons</td>
1856+
</tr>
1857+
</table>
1858+
18321859
### lazyFetching
18331860
- Type `boolean`
18341861
- Default `true`
@@ -2029,6 +2056,47 @@ Callback function that limits the date/time range within which the event is allo
20292056

20302057
The function is triggered during resizing for each cursor movement and takes the same parameters as [eventResize](#eventresize). The function should return `true` if the new size is allowed, and `false` otherwise.
20312058

2059+
### resourceExpand
2060+
- Type `function`
2061+
- Default `undefined`
2062+
2063+
Callback function that is triggered when a resource with nested children is expanded or collapsed in `resourceTimeline` views.
2064+
2065+
2066+
```js
2067+
function (info) { }
2068+
```
2069+
`info` is an object with the following properties:
2070+
<table>
2071+
<tr>
2072+
<td>
2073+
2074+
`resource`
2075+
</td>
2076+
<td>
2077+
2078+
The associated [Resource](#resource-object) object
2079+
</td>
2080+
</tr>
2081+
<tr>
2082+
<td>
2083+
2084+
`jsEvent`
2085+
</td>
2086+
<td>JavaScript native event object with low-level information such as click coordinates</td>
2087+
</tr>
2088+
<tr>
2089+
<td>
2090+
2091+
`view`
2092+
</td>
2093+
<td>
2094+
2095+
The current [View](#view-object) object
2096+
</td>
2097+
</tr>
2098+
</table>
2099+
20322100
### resources
20332101
- Type `array`, `object` or `function`
20342102
- Default `[]`
@@ -3263,6 +3331,16 @@ The title of the resource. See [Content](#content)
32633331
<tr>
32643332
<td>
32653333

3334+
`expanded`
3335+
</td>
3336+
<td>
3337+
3338+
A flag indicating whether the resource is expanded or collapsed if it has nested children
3339+
</td>
3340+
</tr>
3341+
<tr>
3342+
<td>
3343+
32663344
`extendedProps`
32673345
</td>
32683346
<td>
@@ -3320,6 +3398,16 @@ Here are all admissible fields for the resource’s input object:
33203398
<tr>
33213399
<td>
33223400

3401+
`expanded`
3402+
</td>
3403+
<td>
3404+
3405+
`boolean` Specifies whether the resource with nested children will be expanded or collapsed. Default `true`
3406+
</td>
3407+
</tr>
3408+
<tr>
3409+
<td>
3410+
33233411
`extendedProps`
33243412
</td>
33253413
<td>
@@ -3336,7 +3424,7 @@ Here are all admissible fields for the resource’s input object:
33363424
</tr>
33373425
</table>
33383426

3339-
The `timeline` views support displaying nested resources. Nested resources can be collapsed or expanded using an additional button that appears before the parent resource name. To pass nested resources, use the `children` field:
3427+
The `resourceTimeline` views support displaying nested resources. Nested resources can be collapsed or expanded using an additional button that appears before the parent resource name. To pass nested resources, use the `children` field:
33403428

33413429
```js
33423430
resources: [

‎docs/index.html‎

Lines changed: 19 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@
1212
<link rel="manifest" href="site.webmanifest">
1313
<link rel="stylesheet" href="global.css?20251210">
1414

15-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.3.3/dist/event-calendar.min.css">
16-
<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.3.3/dist/event-calendar.min.js"></script>
15+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.4.0/dist/event-calendar.min.css">
16+
<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.4.0/dist/event-calendar.min.js"></script>
1717
</head>
1818

1919
<body>
@@ -89,29 +89,28 @@ <h4 class="col"><a href="https://github.com/vkurko/calendar">EventCalendar</a> D
8989
let day = new Date();
9090
let diff = i - day.getDay();
9191
day.setDate(day.getDate() + diff);
92-
days[i] = day.getFullYear() + "-" + _pad(day.getMonth()+1) + "-" + _pad(day.getDate());
92+
days[i] = [
93+
day.getFullYear(),
94+
String(day.getMonth() + 1).padStart(2, '0'),
95+
String(day.getDate()).padStart(2, '0')
96+
].join('-');
9397
}
9498

9599
return [
96-
{start: days[0] + " 00:00", end: days[0] + " 09:00", resourceId: 1, display: "background"},
97-
{start: days[1] + " 12:00", end: days[1] + " 14:00", resourceId: 2, display: "background"},
98-
{start: days[2] + " 17:00", end: days[2] + " 24:00", resourceId: 1, display: "background"},
99-
{start: days[0] + " 10:00", end: days[0] + " 14:00", resourceId: 1, title: "The calendar can display background and regular events", color: "#FE6B64"},
100-
{start: days[1] + " 16:00", end: days[2] + " 08:00", resourceId: 2, title: "An event may span to another day", color: "#B29DD9"},
101-
{start: days[2] + " 09:00", end: days[2] + " 13:00", resourceId: 2, title: "Events can be assigned to resources and the calendar has the resources view built-in", color: "#779ECB"},
102-
{start: days[3] + " 14:00", end: days[3] + " 20:00", resourceId: 1, title: "", color: "#FE6B64"},
103-
{start: days[3] + " 15:00", end: days[3] + " 18:00", resourceId: 1, title: "Overlapping events are positioned properly", color: "#779ECB"},
104-
{start: days[5] + " 10:00", end: days[5] + " 16:00", resourceId: 2, title: {html: "You have complete control over the <i><b>display</b></i> of events…"}, color: "#779ECB"},
105-
{start: days[5] + " 14:00", end: days[5] + " 19:00", resourceId: 2, title: "…and you can drag and drop the events!", color: "#FE6B64"},
106-
{start: days[5] + " 18:00", end: days[5] + " 21:00", resourceId: 2, title: "", color: "#B29DD9"},
107-
{start: days[1], end: days[3], resourceId: 1, title: "All-day events can be displayed at the top", color: "#B29DD9", allDay: true}
100+
{start: `${days[0]} 00:00`, end: `${days[0]} 09:00`, resourceId: 1, display: 'background'},
101+
{start: `${days[1]} 12:00`, end: `${days[1]} 14:00`, resourceId: 2, display: 'background'},
102+
{start: `${days[2]} 17:00`, end: `${days[2]} 24:00`, resourceId: 1, display: 'background'},
103+
{start: `${days[0]} 10:00`, end: `${days[0]} 14:00`, resourceId: 1, title: 'The calendar can display background and regular events', color: '#FE6B64'},
104+
{start: `${days[1]} 16:00`, end: `${days[2]} 08:00`, resourceId: 2, title: 'An event may span to another day', color: '#B29DD9'},
105+
{start: `${days[2]} 09:00`, end: `${days[2]} 13:00`, resourceId: 2, title: 'Events can be assigned to resources and the calendar has the resources view built-in', color: '#779ECB'},
106+
{start: `${days[3]} 14:00`, end: `${days[3]} 20:00`, resourceId: 1, title: '', color: '#FE6B64'},
107+
{start: `${days[3]} 15:00`, end: `${days[3]} 18:00`, resourceId: 1, title: 'Overlapping events are positioned properly', color: '#779ECB'},
108+
{start: `${days[5]} 10:00`, end: `${days[5]} 16:00`, resourceId: 2, title: {html: 'You have complete control over the <i><b>display</b></i> of events…'}, color: '#779ECB'},
109+
{start: `${days[5]} 14:00`, end: `${days[5]} 19:00`, resourceId: 2, title: '…and you can drag and drop the events!', color: '#FE6B64'},
110+
{start: `${days[5]} 18:00`, end: `${days[5]} 21:00`, resourceId: 2, title: '', color: '#B29DD9'},
111+
{start: days[1], end: days[3], resourceId: 1, title: 'All-day events can be displayed at the top', color: '#B29DD9', allDay: true}
108112
];
109113
}
110-
111-
function _pad(num) {
112-
let norm = Math.floor(Math.abs(num));
113-
return (norm < 10 ? '0' : '') + norm;
114-
}
115114
</script>
116115
</body>
117116
</html>

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "event-calendar",
33
"private": true,
4-
"version": "5.3.3",
4+
"version": "5.4.0",
55
"type": "module",
66
"scripts": {
77
"dev": "vite",

0 commit comments

Comments
 (0)