Skip to content

Commit e63be96

Browse files
rovshenavkurko
rovshena
authored and
vkurko
committed
v4.6.0
Added eventOrder option
1 parent bffb5d1 commit e63be96

File tree

19 files changed

+205
-46
lines changed

19 files changed

+205
-46
lines changed

‎CHANGELOG.md‎

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

3+
## 4.6.0
4+
September 4, 2025
5+
* Added `eventOrder` option ([549](https://github.com/vkurko/calendar/issues/549))
6+
37
## 4.5.2
48
August 21, 2025
59
* Fixed row height issue in `resourceTimeline` views ([401](https://github.com/vkurko/calendar/issues/401))

‎README.md‎

Lines changed: 49 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -66,13 +66,14 @@ Inspired by [FullCalendar](https://fullcalendar.io/), it implements similar opti
6666
- [eventDragStart](#eventdragstart)
6767
- [eventDragStop](#eventdragstop)
6868
- [eventDrop](#eventdrop)
69+
- [eventDurationEditable](#eventdurationeditable)
6970
</td><td>
7071

71-
- [eventDurationEditable](#eventdurationeditable)
7272
- [eventFilter](#eventfilter)
7373
- [eventLongPressDelay](#eventlongpressdelay)
7474
- [eventMouseEnter](#eventmouseenter)
7575
- [eventMouseLeave](#eventmouseleave)
76+
- [eventOrder](#eventorder)
7677
- [eventResizableFromStart](#eventresizablefromstart)
7778
- [eventResize](#eventresize)
7879
- [eventResizeStart](#eventresizestart)
@@ -243,8 +244,8 @@ This bundle contains a version of the calendar that includes all plugins and is
243244

244245
The first step is to include the following lines of code in the `<head>` section of your page:
245246
```html
246-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@4.5.2/dist/event-calendar.min.css">
247-
<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@4.5.2/dist/event-calendar.min.js"></script>
247+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@4.6.0/dist/event-calendar.min.css">
248+
<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@4.6.0/dist/event-calendar.min.js"></script>
248249
```
249250

250251
<details>
@@ -1286,6 +1287,51 @@ The current [View](#view-object) object
12861287
</tr>
12871288
</table>
12881289

1290+
### eventOrder
1291+
- Type `function`
1292+
- Default `undefined`
1293+
1294+
A function that determines the order in which events that visually intersect in the current view are displayed.
1295+
1296+
When `eventOrder` is not specified, events are ordered by start time with all-day events appearing first.
1297+
1298+
```js
1299+
function (a, b) {
1300+
// Return a negative value if 'a' should come before 'b'
1301+
// Return a positive value if 'a' should come after 'b'
1302+
// Return zero if 'a' and 'b' are equal
1303+
}
1304+
```
1305+
1306+
`a` and `b` are objects (so called `event chunks`) with the following properties:
1307+
1308+
<table>
1309+
<tr>
1310+
<td>
1311+
1312+
`start`
1313+
</td>
1314+
<td>JavaScript Date object holding the event chunk’s start time</td>
1315+
</tr>
1316+
<tr>
1317+
<td>
1318+
1319+
`end`
1320+
</td>
1321+
<td>JavaScript Date object holding the event chunk’s end time</td>
1322+
</tr>
1323+
<tr>
1324+
<td>
1325+
1326+
`event`
1327+
</td>
1328+
<td>
1329+
1330+
The [Event](#event-object) object associated with this chunk
1331+
</td>
1332+
</tr>
1333+
</table>
1334+
12891335
### eventResizableFromStart
12901336
- Type `boolean`
12911337
- Default `false`

‎docs/index.html‎

Lines changed: 2 additions & 2 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?20231021">
1414

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

1818
<style>
1919
.ec-timeline .ec-time, .ec-timeline .ec-line {

‎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": "4.5.2",
4+
"version": "4.6.0",
55
"type": "module",
66
"scripts": {
77
"dev": "vite",

‎packages/build/README.md‎

Lines changed: 49 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -66,13 +66,14 @@ Inspired by [FullCalendar](https://fullcalendar.io/), it implements similar opti
6666
- [eventDragStart](#eventdragstart)
6767
- [eventDragStop](#eventdragstop)
6868
- [eventDrop](#eventdrop)
69+
- [eventDurationEditable](#eventdurationeditable)
6970
</td><td>
7071

71-
- [eventDurationEditable](#eventdurationeditable)
7272
- [eventFilter](#eventfilter)
7373
- [eventLongPressDelay](#eventlongpressdelay)
7474
- [eventMouseEnter](#eventmouseenter)
7575
- [eventMouseLeave](#eventmouseleave)
76+
- [eventOrder](#eventorder)
7677
- [eventResizableFromStart](#eventresizablefromstart)
7778
- [eventResize](#eventresize)
7879
- [eventResizeStart](#eventresizestart)
@@ -243,8 +244,8 @@ This bundle contains a version of the calendar that includes all plugins and is
243244

244245
The first step is to include the following lines of code in the `<head>` section of your page:
245246
```html
246-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@4.5.2/dist/event-calendar.min.css">
247-
<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@4.5.2/dist/event-calendar.min.js"></script>
247+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@4.6.0/dist/event-calendar.min.css">
248+
<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@4.6.0/dist/event-calendar.min.js"></script>
248249
```
249250

250251
<details>
@@ -1286,6 +1287,51 @@ The current [View](#view-object) object
12861287
</tr>
12871288
</table>
12881289

1290+
### eventOrder
1291+
- Type `function`
1292+
- Default `undefined`
1293+
1294+
A function that determines the order in which events that visually intersect in the current view are displayed.
1295+
1296+
When `eventOrder` is not specified, events are ordered by start time with all-day events appearing first.
1297+
1298+
```js
1299+
function (a, b) {
1300+
// Return a negative value if 'a' should come before 'b'
1301+
// Return a positive value if 'a' should come after 'b'
1302+
// Return zero if 'a' and 'b' are equal
1303+
}
1304+
```
1305+
1306+
`a` and `b` are objects (so called `event chunks`) with the following properties:
1307+
1308+
<table>
1309+
<tr>
1310+
<td>
1311+
1312+
`start`
1313+
</td>
1314+
<td>JavaScript Date object holding the event chunk’s start time</td>
1315+
</tr>
1316+
<tr>
1317+
<td>
1318+
1319+
`end`
1320+
</td>
1321+
<td>JavaScript Date object holding the event chunk’s end time</td>
1322+
</tr>
1323+
<tr>
1324+
<td>
1325+
1326+
`event`
1327+
</td>
1328+
<td>
1329+
1330+
The [Event](#event-object) object associated with this chunk
1331+
</td>
1332+
</tr>
1333+
</table>
1334+
12891335
### eventResizableFromStart
12901336
- Type `boolean`
12911337
- Default `false`

‎packages/build/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@event-calendar/build",
3-
"version": "4.5.2",
3+
"version": "4.6.0",
44
"title": "Event Calendar",
55
"description": "Full-sized drag & drop event calendar with resource & timeline views",
66
"keywords": [

‎packages/core/README.md‎

Lines changed: 49 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -66,13 +66,14 @@ Inspired by [FullCalendar](https://fullcalendar.io/), it implements similar opti
6666
- [eventDragStart](#eventdragstart)
6767
- [eventDragStop](#eventdragstop)
6868
- [eventDrop](#eventdrop)
69+
- [eventDurationEditable](#eventdurationeditable)
6970
</td><td>
7071

71-
- [eventDurationEditable](#eventdurationeditable)
7272
- [eventFilter](#eventfilter)
7373
- [eventLongPressDelay](#eventlongpressdelay)
7474
- [eventMouseEnter](#eventmouseenter)
7575
- [eventMouseLeave](#eventmouseleave)
76+
- [eventOrder](#eventorder)
7677
- [eventResizableFromStart](#eventresizablefromstart)
7778
- [eventResize](#eventresize)
7879
- [eventResizeStart](#eventresizestart)
@@ -243,8 +244,8 @@ This bundle contains a version of the calendar that includes all plugins and is
243244

244245
The first step is to include the following lines of code in the `<head>` section of your page:
245246
```html
246-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@4.5.2/dist/event-calendar.min.css">
247-
<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@4.5.2/dist/event-calendar.min.js"></script>
247+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@4.6.0/dist/event-calendar.min.css">
248+
<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@4.6.0/dist/event-calendar.min.js"></script>
248249
```
249250

250251
<details>
@@ -1286,6 +1287,51 @@ The current [View](#view-object) object
12861287
</tr>
12871288
</table>
12881289

1290+
### eventOrder
1291+
- Type `function`
1292+
- Default `undefined`
1293+
1294+
A function that determines the order in which events that visually intersect in the current view are displayed.
1295+
1296+
When `eventOrder` is not specified, events are ordered by start time with all-day events appearing first.
1297+
1298+
```js
1299+
function (a, b) {
1300+
// Return a negative value if 'a' should come before 'b'
1301+
// Return a positive value if 'a' should come after 'b'
1302+
// Return zero if 'a' and 'b' are equal
1303+
}
1304+
```
1305+
1306+
`a` and `b` are objects (so called `event chunks`) with the following properties:
1307+
1308+
<table>
1309+
<tr>
1310+
<td>
1311+
1312+
`start`
1313+
</td>
1314+
<td>JavaScript Date object holding the event chunk’s start time</td>
1315+
</tr>
1316+
<tr>
1317+
<td>
1318+
1319+
`end`
1320+
</td>
1321+
<td>JavaScript Date object holding the event chunk’s end time</td>
1322+
</tr>
1323+
<tr>
1324+
<td>
1325+
1326+
`event`
1327+
</td>
1328+
<td>
1329+
1330+
The [Event](#event-object) object associated with this chunk
1331+
</td>
1332+
</tr>
1333+
</table>
1334+
12891335
### eventResizableFromStart
12901336
- Type `boolean`
12911337
- Default `false`

‎packages/core/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@event-calendar/core",
3-
"version": "4.5.2",
3+
"version": "4.6.0",
44
"title": "Event Calendar Core package",
55
"description": "Full-sized drag & drop event calendar with resource & timeline views",
66
"keywords": [

‎packages/core/src/lib/events.js‎

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -66,9 +66,25 @@ export function createEventChunk(event, start, end) {
6666
return chunk;
6767
}
6868

69-
export function sortEventChunks(chunks) {
70-
// Sort by start date (all-day events always on top)
71-
chunks.sort((a, b) => a.start - b.start || b.event.allDay - a.event.allDay);
69+
export function sortEventChunks(chunks, eventOrder) {
70+
if (isFunction(eventOrder)) {
71+
chunks.sort((a, b) => eventOrder(
72+
_toChunkWithLocalDates(a),
73+
_toChunkWithLocalDates(b)
74+
));
75+
} else {
76+
// Sort by start date (all-day events always on top)
77+
chunks.sort((a, b) => a.start - b.start || b.event.allDay - a.event.allDay);
78+
}
79+
}
80+
81+
function _toChunkWithLocalDates(chunk) {
82+
return {
83+
...chunk,
84+
start: toLocalDate(chunk.start),
85+
end: toLocalDate(chunk.end),
86+
event: toEventWithLocalDates(chunk.event)
87+
};
7288
}
7389

7490
export function createEventContent(chunk, displayEventEnd, eventContent, theme, _intlEventTime, _view) {
@@ -156,11 +172,11 @@ function _cloneEvent(event, dateFn) {
156172
/**
157173
* Prepare event chunks for month view and all-day slot in week view
158174
*/
159-
export function prepareEventChunks(chunks, hiddenDays) {
175+
export function prepareEventChunks(chunks, hiddenDays, eventOrder) {
160176
let longChunks = {};
161177

162178
if (chunks.length) {
163-
sortEventChunks(chunks);
179+
sortEventChunks(chunks, eventOrder);
164180

165181
let prevChunk;
166182
for (let chunk of chunks) {

0 commit comments

Comments
 (0)