diff --git a/CHANGELOG.md b/CHANGELOG.md index 4dcd716..f0865a7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # Event Calendar changelog +## 3.9.0 +January 27, 2025 + +* Added support for week numbers in `dayGrid` view ([389](https://github.com/vkurko/calendar/issues/389)) +* Fixed dates in the return value of the `addEvent()` method ([419](https://github.com/vkurko/calendar/issues/419)) + ## 3.8.0 January 6, 2025 diff --git a/README.md b/README.md index 2def340..c56a9a3 100644 --- a/README.md +++ b/README.md @@ -47,9 +47,9 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options - [eventDragMinDistance](#eventdragmindistance) - [eventDragStart](#eventdragstart) - [eventDragStop](#eventdragstop) + - [eventDrop](#eventdrop) - - [eventDrop](#eventdrop) - [eventDurationEditable](#eventdurationeditable) - [eventLongPressDelay](#eventlongpressdelay) - [eventMouseEnter](#eventmouseenter) @@ -77,10 +77,10 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options - [locale](#locale) - [longPressDelay](#longpressdelay) - [moreLinkContent](#morelinkcontent) - - - [noEventsClick](#noeventsclick) - [noEventsContent](#noeventscontent) + + - [nowIndicator](#nowindicator) - [pointer](#pointer) - [resources](#resources) @@ -107,6 +107,8 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options - [view](#view) - [viewDidMount](#viewdidmount) - [views](#views) + - [weekNumberContent](#weeknumbercontent) + - [weekNumbers](#weeknumbers) - [Methods](#methods) @@ -204,8 +206,8 @@ Or in your Svelte component, use the calendar like this: ### Pre-built browser ready bundle Include the following lines of code in the `` section of your page: ```html - - + + ```
@@ -2263,6 +2265,45 @@ The mounted [View](#view-object) object You can specify options that apply only to specific views. To do so provide separate options objects within the `views` option, keyed by the name of the view. +### weekNumberContent +- Type `Content` or `function` +- Default `undefined` + +Defines the text that is displayed in place of the default week number (such as `W01`). + +This value can be either a [Content](#content) or a function that returns content: + +```js +function (arg) { + // return Content +} +``` +`arg` is an object with the following properties: + + + + + + + + + +
+ +`date` +JavaScript Date object containing the day within which the week number will be displayed
+ +`week` +Calculated week number
+ +### weekNumbers +- Type `boolean` +- Default `false` + +Determines whether week numbers should be displayed in the `dayGrid` view. + +The numbering of weeks depends on the value of [firstDay](#firstday). When `firstDay` is `0`, the [Western](https://en.wikipedia.org/wiki/Week#Other_week_numbering_systems) system is used. Any other value uses the [ISO](https://en.wikipedia.org/wiki/Week#The_ISO_week_date_system) system. + ## Methods Methods allow you to manipulate the Event Calendar after initialization. They are accessible from the calendar instance. diff --git a/docs/index.html b/docs/index.html index 2b70649..dbf9266 100644 --- a/docs/index.html +++ b/docs/index.html @@ -12,8 +12,8 @@ - - + + + + ```
@@ -2263,6 +2265,45 @@ The mounted [View](#view-object) object You can specify options that apply only to specific views. To do so provide separate options objects within the `views` option, keyed by the name of the view. +### weekNumberContent +- Type `Content` or `function` +- Default `undefined` + +Defines the text that is displayed in place of the default week number (such as `W01`). + +This value can be either a [Content](#content) or a function that returns content: + +```js +function (arg) { + // return Content +} +``` +`arg` is an object with the following properties: + + + + + + + + + +
+ +`date` +JavaScript Date object containing the day within which the week number will be displayed
+ +`week` +Calculated week number
+ +### weekNumbers +- Type `boolean` +- Default `false` + +Determines whether week numbers should be displayed in the `dayGrid` view. + +The numbering of weeks depends on the value of [firstDay](#firstday). When `firstDay` is `0`, the [Western](https://en.wikipedia.org/wiki/Week#Other_week_numbering_systems) system is used. Any other value uses the [ISO](https://en.wikipedia.org/wiki/Week#The_ISO_week_date_system) system. + ## Methods Methods allow you to manipulate the Event Calendar after initialization. They are accessible from the calendar instance. diff --git a/packages/build/package.json b/packages/build/package.json index 87609ed..10c839a 100644 --- a/packages/build/package.json +++ b/packages/build/package.json @@ -1,6 +1,6 @@ { "name": "@event-calendar/build", - "version": "3.8.0", + "version": "3.9.0", "title": "Event Calendar", "description": "Full-sized drag & drop event calendar with resource & timeline views", "keywords": [ @@ -20,11 +20,11 @@ "jsdelivr": "event-calendar.min.js", "style": "event-calendar.min.css", "devDependencies": { - "@event-calendar/day-grid": "~3.8.0", - "@event-calendar/interaction": "~3.8.0", - "@event-calendar/list": "~3.8.0", - "@event-calendar/time-grid": "~3.8.0", - "@event-calendar/resource-time-grid": "~3.8.0", - "@event-calendar/resource-timeline": "~3.8.0" + "@event-calendar/day-grid": "~3.9.0", + "@event-calendar/interaction": "~3.9.0", + "@event-calendar/list": "~3.9.0", + "@event-calendar/time-grid": "~3.9.0", + "@event-calendar/resource-time-grid": "~3.9.0", + "@event-calendar/resource-timeline": "~3.9.0" } } \ No newline at end of file diff --git a/packages/core/README.md b/packages/core/README.md index 2def340..c56a9a3 100644 --- a/packages/core/README.md +++ b/packages/core/README.md @@ -47,9 +47,9 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options - [eventDragMinDistance](#eventdragmindistance) - [eventDragStart](#eventdragstart) - [eventDragStop](#eventdragstop) + - [eventDrop](#eventdrop) - - [eventDrop](#eventdrop) - [eventDurationEditable](#eventdurationeditable) - [eventLongPressDelay](#eventlongpressdelay) - [eventMouseEnter](#eventmouseenter) @@ -77,10 +77,10 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options - [locale](#locale) - [longPressDelay](#longpressdelay) - [moreLinkContent](#morelinkcontent) - - - [noEventsClick](#noeventsclick) - [noEventsContent](#noeventscontent) + + - [nowIndicator](#nowindicator) - [pointer](#pointer) - [resources](#resources) @@ -107,6 +107,8 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options - [view](#view) - [viewDidMount](#viewdidmount) - [views](#views) + - [weekNumberContent](#weeknumbercontent) + - [weekNumbers](#weeknumbers) - [Methods](#methods) @@ -204,8 +206,8 @@ Or in your Svelte component, use the calendar like this: ### Pre-built browser ready bundle Include the following lines of code in the `` section of your page: ```html - - + + ```
@@ -2263,6 +2265,45 @@ The mounted [View](#view-object) object You can specify options that apply only to specific views. To do so provide separate options objects within the `views` option, keyed by the name of the view. +### weekNumberContent +- Type `Content` or `function` +- Default `undefined` + +Defines the text that is displayed in place of the default week number (such as `W01`). + +This value can be either a [Content](#content) or a function that returns content: + +```js +function (arg) { + // return Content +} +``` +`arg` is an object with the following properties: + + + + + + + + + +
+ +`date` +JavaScript Date object containing the day within which the week number will be displayed
+ +`week` +Calculated week number
+ +### weekNumbers +- Type `boolean` +- Default `false` + +Determines whether week numbers should be displayed in the `dayGrid` view. + +The numbering of weeks depends on the value of [firstDay](#firstday). When `firstDay` is `0`, the [Western](https://en.wikipedia.org/wiki/Week#Other_week_numbering_systems) system is used. Any other value uses the [ISO](https://en.wikipedia.org/wiki/Week#The_ISO_week_date_system) system. + ## Methods Methods allow you to manipulate the Event Calendar after initialization. They are accessible from the calendar instance. diff --git a/packages/core/package.json b/packages/core/package.json index 02f2d54..d730252 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@event-calendar/core", - "version": "3.8.0", + "version": "3.9.0", "title": "Event Calendar Core package", "description": "Full-sized drag & drop event calendar with resource & timeline views", "keywords": [ diff --git a/packages/core/src/Calendar.svelte b/packages/core/src/Calendar.svelte index c8f1e61..a084825 100644 --- a/packages/core/src/Calendar.svelte +++ b/packages/core/src/Calendar.svelte @@ -68,7 +68,7 @@ event = createEvents([event])[0]; $_events.push(event); $_events = $_events; - return event; + return toEventWithLocalDates(event); } export function updateEvent(event) { @@ -77,7 +77,7 @@ event = createEvents([event])[0]; assign(e, event); $_events = $_events; - return event; + return toEventWithLocalDates(event); } } return null; diff --git a/packages/core/src/lib/date.js b/packages/core/src/lib/date.js index 1729181..01d0773 100644 --- a/packages/core/src/lib/date.js +++ b/packages/core/src/lib/date.js @@ -151,6 +151,28 @@ export function prevDate(date, duration, hiddenDays) { return date; } +/** + * For a given date, get its week number + * - ISO @see https://stackoverflow.com/questions/6117814/get-week-of-year-in-javascript-like-in-php + * - Western @see https://en.wikipedia.org/wiki/Week#Other_week_numbering_systems + */ +export function getWeekNumber(date, firstDay) { + // Copy date so don't modify original + date = cloneDate(date); + if (firstDay == 0) { // Western + // Set to nearest Saturday: current date + 5 - current day number + date.setUTCDate(date.getUTCDate() + 5 - date.getUTCDay()); + } else { // ISO + // Set to nearest Thursday: current date + 4 - current day number + // Make Sunday's day number 7 + date.setUTCDate(date.getUTCDate() + 4 - (date.getUTCDay() || 7)); + } + // Get first day of year + let yearStart = new Date(Date.UTC(date.getUTCFullYear(),0,1)); + // Calculate full weeks to `date` + return Math.ceil((((date - yearStart) / 1000 / DAY_IN_SECONDS) + 1) / 7); +} + /** * Private functions */ diff --git a/packages/core/src/styles/day-grid.scss b/packages/core/src/styles/day-grid.scss index 4f522fb..ee85049 100644 --- a/packages/core/src/styles/day-grid.scss +++ b/packages/core/src/styles/day-grid.scss @@ -31,9 +31,10 @@ } .ec-day-head { - display: block; + display: flex; + flex-direction: row-reverse; + justify-content: space-between; border: none; - text-align: right; padding: 4px 4px 3px; } @@ -47,4 +48,4 @@ cursor: pointer; } } -} \ No newline at end of file +} diff --git a/packages/core/src/styles/index.scss b/packages/core/src/styles/index.scss index 3fb6cef..56e047f 100644 --- a/packages/core/src/styles/index.scss +++ b/packages/core/src/styles/index.scss @@ -256,7 +256,7 @@ - &.ec-other-month .ec-day-head { + &.ec-other-month .ec-day-head time { opacity: .3; } diff --git a/packages/day-grid/README.md b/packages/day-grid/README.md index 2def340..c56a9a3 100644 --- a/packages/day-grid/README.md +++ b/packages/day-grid/README.md @@ -47,9 +47,9 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options - [eventDragMinDistance](#eventdragmindistance) - [eventDragStart](#eventdragstart) - [eventDragStop](#eventdragstop) + - [eventDrop](#eventdrop) - - [eventDrop](#eventdrop) - [eventDurationEditable](#eventdurationeditable) - [eventLongPressDelay](#eventlongpressdelay) - [eventMouseEnter](#eventmouseenter) @@ -77,10 +77,10 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options - [locale](#locale) - [longPressDelay](#longpressdelay) - [moreLinkContent](#morelinkcontent) - - - [noEventsClick](#noeventsclick) - [noEventsContent](#noeventscontent) + + - [nowIndicator](#nowindicator) - [pointer](#pointer) - [resources](#resources) @@ -107,6 +107,8 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options - [view](#view) - [viewDidMount](#viewdidmount) - [views](#views) + - [weekNumberContent](#weeknumbercontent) + - [weekNumbers](#weeknumbers) - [Methods](#methods) @@ -204,8 +206,8 @@ Or in your Svelte component, use the calendar like this: ### Pre-built browser ready bundle Include the following lines of code in the `` section of your page: ```html - - + + ```
@@ -2263,6 +2265,45 @@ The mounted [View](#view-object) object You can specify options that apply only to specific views. To do so provide separate options objects within the `views` option, keyed by the name of the view. +### weekNumberContent +- Type `Content` or `function` +- Default `undefined` + +Defines the text that is displayed in place of the default week number (such as `W01`). + +This value can be either a [Content](#content) or a function that returns content: + +```js +function (arg) { + // return Content +} +``` +`arg` is an object with the following properties: + + + + + + + + + +
+ +`date` +JavaScript Date object containing the day within which the week number will be displayed
+ +`week` +Calculated week number
+ +### weekNumbers +- Type `boolean` +- Default `false` + +Determines whether week numbers should be displayed in the `dayGrid` view. + +The numbering of weeks depends on the value of [firstDay](#firstday). When `firstDay` is `0`, the [Western](https://en.wikipedia.org/wiki/Week#Other_week_numbering_systems) system is used. Any other value uses the [ISO](https://en.wikipedia.org/wiki/Week#The_ISO_week_date_system) system. + ## Methods Methods allow you to manipulate the Event Calendar after initialization. They are accessible from the calendar instance. diff --git a/packages/day-grid/package.json b/packages/day-grid/package.json index c2b0945..827e9fa 100644 --- a/packages/day-grid/package.json +++ b/packages/day-grid/package.json @@ -1,6 +1,6 @@ { "name": "@event-calendar/day-grid", - "version": "3.8.0", + "version": "3.9.0", "title": "Event Calendar DayGrid plugin", "description": "Full-sized drag & drop event calendar with resource & timeline views", "keywords": [ @@ -27,7 +27,7 @@ "./package.json": "./package.json" }, "dependencies": { - "@event-calendar/core": "~3.8.0", + "@event-calendar/core": "~3.9.0", "svelte": "^4.2.19" } } \ No newline at end of file diff --git a/packages/day-grid/src/Day.svelte b/packages/day-grid/src/Day.svelte index a375204..f2ddad8 100644 --- a/packages/day-grid/src/Day.svelte +++ b/packages/day-grid/src/Day.svelte @@ -1,7 +1,9 @@ + + ```
@@ -2263,6 +2265,45 @@ The mounted [View](#view-object) object You can specify options that apply only to specific views. To do so provide separate options objects within the `views` option, keyed by the name of the view. +### weekNumberContent +- Type `Content` or `function` +- Default `undefined` + +Defines the text that is displayed in place of the default week number (such as `W01`). + +This value can be either a [Content](#content) or a function that returns content: + +```js +function (arg) { + // return Content +} +``` +`arg` is an object with the following properties: + + + + + + + + + +
+ +`date` +JavaScript Date object containing the day within which the week number will be displayed
+ +`week` +Calculated week number
+ +### weekNumbers +- Type `boolean` +- Default `false` + +Determines whether week numbers should be displayed in the `dayGrid` view. + +The numbering of weeks depends on the value of [firstDay](#firstday). When `firstDay` is `0`, the [Western](https://en.wikipedia.org/wiki/Week#Other_week_numbering_systems) system is used. Any other value uses the [ISO](https://en.wikipedia.org/wiki/Week#The_ISO_week_date_system) system. + ## Methods Methods allow you to manipulate the Event Calendar after initialization. They are accessible from the calendar instance. diff --git a/packages/interaction/package.json b/packages/interaction/package.json index e3572ab..b75924a 100644 --- a/packages/interaction/package.json +++ b/packages/interaction/package.json @@ -1,6 +1,6 @@ { "name": "@event-calendar/interaction", - "version": "3.8.0", + "version": "3.9.0", "title": "Event Calendar Interaction plugin", "description": "Full-sized drag & drop event calendar with resource & timeline views", "keywords": [ @@ -27,7 +27,7 @@ "./package.json": "./package.json" }, "dependencies": { - "@event-calendar/core": "~3.8.0", + "@event-calendar/core": "~3.9.0", "svelte": "^4.2.19" } } \ No newline at end of file diff --git a/packages/list/README.md b/packages/list/README.md index 2def340..c56a9a3 100644 --- a/packages/list/README.md +++ b/packages/list/README.md @@ -47,9 +47,9 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options - [eventDragMinDistance](#eventdragmindistance) - [eventDragStart](#eventdragstart) - [eventDragStop](#eventdragstop) + - [eventDrop](#eventdrop) - - [eventDrop](#eventdrop) - [eventDurationEditable](#eventdurationeditable) - [eventLongPressDelay](#eventlongpressdelay) - [eventMouseEnter](#eventmouseenter) @@ -77,10 +77,10 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options - [locale](#locale) - [longPressDelay](#longpressdelay) - [moreLinkContent](#morelinkcontent) - - - [noEventsClick](#noeventsclick) - [noEventsContent](#noeventscontent) + + - [nowIndicator](#nowindicator) - [pointer](#pointer) - [resources](#resources) @@ -107,6 +107,8 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options - [view](#view) - [viewDidMount](#viewdidmount) - [views](#views) + - [weekNumberContent](#weeknumbercontent) + - [weekNumbers](#weeknumbers) - [Methods](#methods) @@ -204,8 +206,8 @@ Or in your Svelte component, use the calendar like this: ### Pre-built browser ready bundle Include the following lines of code in the `` section of your page: ```html - - + + ```
@@ -2263,6 +2265,45 @@ The mounted [View](#view-object) object You can specify options that apply only to specific views. To do so provide separate options objects within the `views` option, keyed by the name of the view. +### weekNumberContent +- Type `Content` or `function` +- Default `undefined` + +Defines the text that is displayed in place of the default week number (such as `W01`). + +This value can be either a [Content](#content) or a function that returns content: + +```js +function (arg) { + // return Content +} +``` +`arg` is an object with the following properties: + + + + + + + + + +
+ +`date` +JavaScript Date object containing the day within which the week number will be displayed
+ +`week` +Calculated week number
+ +### weekNumbers +- Type `boolean` +- Default `false` + +Determines whether week numbers should be displayed in the `dayGrid` view. + +The numbering of weeks depends on the value of [firstDay](#firstday). When `firstDay` is `0`, the [Western](https://en.wikipedia.org/wiki/Week#Other_week_numbering_systems) system is used. Any other value uses the [ISO](https://en.wikipedia.org/wiki/Week#The_ISO_week_date_system) system. + ## Methods Methods allow you to manipulate the Event Calendar after initialization. They are accessible from the calendar instance. diff --git a/packages/list/package.json b/packages/list/package.json index 393d9e5..75806c5 100644 --- a/packages/list/package.json +++ b/packages/list/package.json @@ -1,6 +1,6 @@ { "name": "@event-calendar/list", - "version": "3.8.0", + "version": "3.9.0", "title": "Event Calendar List plugin", "description": "Full-sized drag & drop event calendar with resource & timeline views", "keywords": [ @@ -27,7 +27,7 @@ "./package.json": "./package.json" }, "dependencies": { - "@event-calendar/core": "~3.8.0", + "@event-calendar/core": "~3.9.0", "svelte": "^4.2.19" } } \ No newline at end of file diff --git a/packages/resource-time-grid/README.md b/packages/resource-time-grid/README.md index 2def340..c56a9a3 100644 --- a/packages/resource-time-grid/README.md +++ b/packages/resource-time-grid/README.md @@ -47,9 +47,9 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options - [eventDragMinDistance](#eventdragmindistance) - [eventDragStart](#eventdragstart) - [eventDragStop](#eventdragstop) + - [eventDrop](#eventdrop) - - [eventDrop](#eventdrop) - [eventDurationEditable](#eventdurationeditable) - [eventLongPressDelay](#eventlongpressdelay) - [eventMouseEnter](#eventmouseenter) @@ -77,10 +77,10 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options - [locale](#locale) - [longPressDelay](#longpressdelay) - [moreLinkContent](#morelinkcontent) - - - [noEventsClick](#noeventsclick) - [noEventsContent](#noeventscontent) + + - [nowIndicator](#nowindicator) - [pointer](#pointer) - [resources](#resources) @@ -107,6 +107,8 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options - [view](#view) - [viewDidMount](#viewdidmount) - [views](#views) + - [weekNumberContent](#weeknumbercontent) + - [weekNumbers](#weeknumbers) - [Methods](#methods) @@ -204,8 +206,8 @@ Or in your Svelte component, use the calendar like this: ### Pre-built browser ready bundle Include the following lines of code in the `` section of your page: ```html - - + + ```
@@ -2263,6 +2265,45 @@ The mounted [View](#view-object) object You can specify options that apply only to specific views. To do so provide separate options objects within the `views` option, keyed by the name of the view. +### weekNumberContent +- Type `Content` or `function` +- Default `undefined` + +Defines the text that is displayed in place of the default week number (such as `W01`). + +This value can be either a [Content](#content) or a function that returns content: + +```js +function (arg) { + // return Content +} +``` +`arg` is an object with the following properties: + + + + + + + + + +
+ +`date` +JavaScript Date object containing the day within which the week number will be displayed
+ +`week` +Calculated week number
+ +### weekNumbers +- Type `boolean` +- Default `false` + +Determines whether week numbers should be displayed in the `dayGrid` view. + +The numbering of weeks depends on the value of [firstDay](#firstday). When `firstDay` is `0`, the [Western](https://en.wikipedia.org/wiki/Week#Other_week_numbering_systems) system is used. Any other value uses the [ISO](https://en.wikipedia.org/wiki/Week#The_ISO_week_date_system) system. + ## Methods Methods allow you to manipulate the Event Calendar after initialization. They are accessible from the calendar instance. diff --git a/packages/resource-time-grid/package.json b/packages/resource-time-grid/package.json index 8ce0571..0db343f 100644 --- a/packages/resource-time-grid/package.json +++ b/packages/resource-time-grid/package.json @@ -1,6 +1,6 @@ { "name": "@event-calendar/resource-time-grid", - "version": "3.8.0", + "version": "3.9.0", "title": "Event Calendar ResourceTimeGrid plugin", "description": "Full-sized drag & drop event calendar with resource & timeline views", "keywords": [ @@ -27,8 +27,8 @@ "./package.json": "./package.json" }, "dependencies": { - "@event-calendar/core": "~3.8.0", - "@event-calendar/time-grid": "~3.8.0", + "@event-calendar/core": "~3.9.0", + "@event-calendar/time-grid": "~3.9.0", "svelte": "^4.2.19" } } \ No newline at end of file diff --git a/packages/resource-timeline/README.md b/packages/resource-timeline/README.md index 2def340..c56a9a3 100644 --- a/packages/resource-timeline/README.md +++ b/packages/resource-timeline/README.md @@ -47,9 +47,9 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options - [eventDragMinDistance](#eventdragmindistance) - [eventDragStart](#eventdragstart) - [eventDragStop](#eventdragstop) + - [eventDrop](#eventdrop) - - [eventDrop](#eventdrop) - [eventDurationEditable](#eventdurationeditable) - [eventLongPressDelay](#eventlongpressdelay) - [eventMouseEnter](#eventmouseenter) @@ -77,10 +77,10 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options - [locale](#locale) - [longPressDelay](#longpressdelay) - [moreLinkContent](#morelinkcontent) - - - [noEventsClick](#noeventsclick) - [noEventsContent](#noeventscontent) + + - [nowIndicator](#nowindicator) - [pointer](#pointer) - [resources](#resources) @@ -107,6 +107,8 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options - [view](#view) - [viewDidMount](#viewdidmount) - [views](#views) + - [weekNumberContent](#weeknumbercontent) + - [weekNumbers](#weeknumbers) - [Methods](#methods) @@ -204,8 +206,8 @@ Or in your Svelte component, use the calendar like this: ### Pre-built browser ready bundle Include the following lines of code in the `` section of your page: ```html - - + + ```
@@ -2263,6 +2265,45 @@ The mounted [View](#view-object) object You can specify options that apply only to specific views. To do so provide separate options objects within the `views` option, keyed by the name of the view. +### weekNumberContent +- Type `Content` or `function` +- Default `undefined` + +Defines the text that is displayed in place of the default week number (such as `W01`). + +This value can be either a [Content](#content) or a function that returns content: + +```js +function (arg) { + // return Content +} +``` +`arg` is an object with the following properties: + + + + + + + + + +
+ +`date` +JavaScript Date object containing the day within which the week number will be displayed
+ +`week` +Calculated week number
+ +### weekNumbers +- Type `boolean` +- Default `false` + +Determines whether week numbers should be displayed in the `dayGrid` view. + +The numbering of weeks depends on the value of [firstDay](#firstday). When `firstDay` is `0`, the [Western](https://en.wikipedia.org/wiki/Week#Other_week_numbering_systems) system is used. Any other value uses the [ISO](https://en.wikipedia.org/wiki/Week#The_ISO_week_date_system) system. + ## Methods Methods allow you to manipulate the Event Calendar after initialization. They are accessible from the calendar instance. diff --git a/packages/resource-timeline/package.json b/packages/resource-timeline/package.json index 2c3130e..765d9d7 100644 --- a/packages/resource-timeline/package.json +++ b/packages/resource-timeline/package.json @@ -1,6 +1,6 @@ { "name": "@event-calendar/resource-timeline", - "version": "3.8.0", + "version": "3.9.0", "title": "Event Calendar ResourceTimeline plugin", "description": "Full-sized drag & drop event calendar with resource & timeline views", "keywords": [ @@ -27,7 +27,7 @@ "./package.json": "./package.json" }, "dependencies": { - "@event-calendar/core": "~3.8.0", + "@event-calendar/core": "~3.9.0", "svelte": "^4.2.19" } } \ No newline at end of file diff --git a/packages/time-grid/README.md b/packages/time-grid/README.md index 2def340..c56a9a3 100644 --- a/packages/time-grid/README.md +++ b/packages/time-grid/README.md @@ -47,9 +47,9 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options - [eventDragMinDistance](#eventdragmindistance) - [eventDragStart](#eventdragstart) - [eventDragStop](#eventdragstop) + - [eventDrop](#eventdrop) - - [eventDrop](#eventdrop) - [eventDurationEditable](#eventdurationeditable) - [eventLongPressDelay](#eventlongpressdelay) - [eventMouseEnter](#eventmouseenter) @@ -77,10 +77,10 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options - [locale](#locale) - [longPressDelay](#longpressdelay) - [moreLinkContent](#morelinkcontent) - - - [noEventsClick](#noeventsclick) - [noEventsContent](#noeventscontent) + + - [nowIndicator](#nowindicator) - [pointer](#pointer) - [resources](#resources) @@ -107,6 +107,8 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options - [view](#view) - [viewDidMount](#viewdidmount) - [views](#views) + - [weekNumberContent](#weeknumbercontent) + - [weekNumbers](#weeknumbers) - [Methods](#methods) @@ -204,8 +206,8 @@ Or in your Svelte component, use the calendar like this: ### Pre-built browser ready bundle Include the following lines of code in the `` section of your page: ```html - - + + ```
@@ -2263,6 +2265,45 @@ The mounted [View](#view-object) object You can specify options that apply only to specific views. To do so provide separate options objects within the `views` option, keyed by the name of the view. +### weekNumberContent +- Type `Content` or `function` +- Default `undefined` + +Defines the text that is displayed in place of the default week number (such as `W01`). + +This value can be either a [Content](#content) or a function that returns content: + +```js +function (arg) { + // return Content +} +``` +`arg` is an object with the following properties: + + + + + + + + + +
+ +`date` +JavaScript Date object containing the day within which the week number will be displayed
+ +`week` +Calculated week number
+ +### weekNumbers +- Type `boolean` +- Default `false` + +Determines whether week numbers should be displayed in the `dayGrid` view. + +The numbering of weeks depends on the value of [firstDay](#firstday). When `firstDay` is `0`, the [Western](https://en.wikipedia.org/wiki/Week#Other_week_numbering_systems) system is used. Any other value uses the [ISO](https://en.wikipedia.org/wiki/Week#The_ISO_week_date_system) system. + ## Methods Methods allow you to manipulate the Event Calendar after initialization. They are accessible from the calendar instance. diff --git a/packages/time-grid/package.json b/packages/time-grid/package.json index 4993c61..5d9e232 100644 --- a/packages/time-grid/package.json +++ b/packages/time-grid/package.json @@ -1,6 +1,6 @@ { "name": "@event-calendar/time-grid", - "version": "3.8.0", + "version": "3.9.0", "title": "Event Calendar TimeGrid plugin", "description": "Full-sized drag & drop event calendar with resource & timeline views", "keywords": [ @@ -27,7 +27,7 @@ "./package.json": "./package.json" }, "dependencies": { - "@event-calendar/core": "~3.8.0", + "@event-calendar/core": "~3.9.0", "svelte": "^4.2.19" } } \ No newline at end of file