✨ vkurko#389 - Show weeknumbers

README.md

@@ -106,6 +106,8 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
   - [view](#view)
   - [viewDidMount](#viewdidmount)
   - [views](#views)
+  - [weekNumbers]()
+  - [weekNumbersLabelContent]()
   </td></tr>
   </table>
 - [Methods](#methods)
@@ -2255,6 +2257,26 @@ 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.
 
+### weekNumbers
+- Type `boolean`
+- Default `false`
+
+Determines whether the month view should render the week numbers
+
+### weekNumbersLabelContent
+- Type `string`, `object`or `function`
+- Default `undefined`
+
+Defines the content that is rendered inside a week number element.
+
+This value can be either a [Content](#content) or a function that returns content:
+
+```js
+function (weekNumber) {
+    // return Content
+}
+```
+
 ## Methods
 Methods allow you to manipulate the Event Calendar after initialization. They are accessible from the calendar instance.
 

packages/core/src/storage/options.js

@@ -114,6 +114,7 @@ export function createOptions(plugins) {
             toolbar: 'ec-toolbar',
             view: '',
             weekdays: ['ec-sun', 'ec-mon', 'ec-tue', 'ec-wed', 'ec-thu', 'ec-fri', 'ec-sat'],
+            weekNumber: 'ec-week-number',
             withScroll: 'ec-with-scroll'
         },
         titleFormat: {
@@ -123,7 +124,9 @@ export function createOptions(plugins) {
         },
         view: undefined,
         viewDidMount: undefined,
-        views: {}
+        views: {},
+        weekNumbers: false,
+        weekNumbersLabelContent: undefined,
     };
 
     for (let plugin of plugins) {

packages/core/src/styles/day-grid.scss

@@ -47,4 +47,9 @@
       cursor: pointer;
     }
   }
-}
+}
+
+.ec-week-number {
+    position: absolute;
+    padding: 4px;
+}

packages/day-grid/src/Week.svelte

@@ -1,20 +1,68 @@
 <script>
     import {getContext, tick} from 'svelte';
     import {cloneDate, addDay, eventIntersects, bgEvent, createEventChunk, prepareEventChunks,
-        runReposition, debounce} from '@event-calendar/core';
+        runReposition, debounce, setContent, isFunction} from '@event-calendar/core';
     import Day from './Day.svelte';
 
     export let dates;
 
     let {_events, _iEvents, _queue2, _hiddenEvents,
-        resources, filterEventsWithResources, hiddenDays, theme} = getContext('state');
+        resources, filterEventsWithResources, hiddenDays, theme,
+        weekNumbers, weekNumbersLabelContent} = getContext('state');
 
     let chunks, bgChunks, longChunks, iChunks = [];
 
     let start;
     let end;
     let refs = [];
 
+    let style;
+    let weekNumberLabelContent;
+
+    function calculateWeekNumber(date) {
+         // Get the year of the given date
+        const year = date.getFullYear();
+
+        /*
+           If 1 January falls on a Monday, Tuesday, Wednesday or Thursday, then the week of 1 January is Week 1. Except in the case of 1 January falling on a Monday, this Week 1 includes the last day(s) of the previous year.
+           If 1 January falls on a Friday, Saturday, or Sunday, then 1 January is considered to be part of the last week of the previous year. Week 1 will begin on the first Monday after 1 January.
+        */
+        const jan1 = new Date(year, 0, 1);
+        const jan1Day = jan1.getDay();
+
+        let week1Start;
+
+        if (jan1Day >= 1 && jan1Day <= 4) { // Monday to Thursday
+            week1Start = jan1; // Week 1 starts on January 1st
+        } else { // Friday to Sunday
+            const daysToMonday = (8 - jan1Day) % 7; // Days to next Monday
+            week1Start = new Date(year, 0, 1 + daysToMonday);
+        }
+
+        // Calculate the number of milliseconds in a week
+        const oneWeekMs = 7 * 24 * 60 * 60 * 1000;
+
+        // Calculate the difference in time between the input date and Week 1 start
+        const diffMs = date - week1Start;
+
+        // If the input date is before Week 1 start, calculate its week in the previous year
+        if (diffMs < 0) {
+            return calculateWeekNumber(new Date(year - 1, 11, 31));
+        }
+
+        // Calculate the week number (adding 1 to account for the first week)
+        const weekNumber = Math.floor(diffMs / oneWeekMs) + 1;
+
+        return weekNumber;
+    }
+
+
+    $: {
+        if (!$weekNumbers) {
+            style = 'visibility:hidden;';
+        }
+    }
+
     $: {
         start = dates[0];
         end = addDay(cloneDate(dates.at(-1)));
@@ -61,12 +109,32 @@
         // Schedule reposition during next update
         tick().then(reposition);
     }
+
+
+    $: {
+        let weekNumber = calculateWeekNumber(end);
+
+        if ($weekNumbersLabelContent) {
+        weekNumberLabelContent = isFunction($weekNumbersLabelContent)
+            ? $weekNumbersLabelContent({ weekNumber })
+            : $weekNumbersLabelContent;
+        } else {
+            weekNumberLabelContent = 'W: ' + weekNumber;
+        }
+    }
 </script>
 
 <div class="{$theme.days}" role="row">
     {#each dates as date, i}
         <Day {date} {chunks} {bgChunks} {longChunks} {iChunks} {dates} bind:this={refs[i]} />
     {/each}
+
+    <span
+        class="{$theme.weekNumber}"
+        {style}
+        use:setContent={weekNumberLabelContent}
+    >
+    </span>
 </div>
 
 <svelte:window on:resize={reposition}/>