Add weekNumbers option to Datepicker (#3245)

core/js/src/datepicker.ts

@@ -100,6 +100,8 @@ type ComponentConfig = {
   selectedDates: string[]
   selectionMode: DateMode
   placement: PositionToInput
+  /** show the ISO week number in front of each row */
+  weekNumbers: boolean
   /** pass-through for any Vanilla Calendar Pro option */
   vcpOptions: object
 }
@@ -122,6 +124,7 @@ const Default: ComponentConfig = {
   selectedDates: [],
   selectionMode: 'single',
   placement: 'left',
+  weekNumbers: false,
   vcpOptions: {},
 }
 
@@ -139,6 +142,7 @@ const DefaultType: Record<keyof ComponentConfig, string> = {
   selectedDates: 'array',
   selectionMode: 'string',
   placement: 'string',
+  weekNumbers: 'boolean',
   vcpOptions: 'object',
 }
 
@@ -605,6 +609,7 @@ class Datepicker extends BaseComponent {
       selectionDatesMode: this._config.selectionMode,
       selectedDates: this._config.selectedDates,
       displayMonthsCount: this._config.displayMonthsCount,
+      enableWeekNumbers: this._config.weekNumbers || Boolean(vcpOptions.enableWeekNumbers),
       type: this._config.displayMonthsCount > 1 ? 'multiple' : 'default',
       selectedTheme: vcpTheme,
       themeAttrDetect: '[data-bs-theme]',

core/js/tests/unit/datepicker.spec.ts

@@ -115,6 +115,24 @@ describe('Datepicker', () => {
       expect(instance._config.firstWeekday).toBe(0)
     })
 
+    it('should turn week numbers on from a data attribute', () => {
+      fixtureEl.innerHTML = '<input type="text" data-bs-toggle="datepicker" data-bs-week-numbers="true">'
+
+      const instance = new Datepicker(input())
+
+      expect(Datepicker.Default.weekNumbers).toBe(false)
+      expect(instance._config.weekNumbers).toBe(true)
+      expect(instance._buildCalendarOptions().enableWeekNumbers).toBe(true)
+    })
+
+    it('should keep week numbers enabled through vcpOptions', () => {
+      fixtureEl.innerHTML = '<input type="text" data-bs-toggle="datepicker">'
+
+      const instance = new Datepicker(input(), { vcpOptions: { enableWeekNumbers: true } })
+
+      expect(instance._buildCalendarOptions().enableWeekNumbers).toBe(true)
+    })
+
     it('should let a passed config win over data attributes', () => {
       fixtureEl.innerHTML = '<input type="text" data-bs-toggle="datepicker" data-bs-first-weekday="0">'
 

core/scss/ui/_datepicker.scss

@@ -19,6 +19,8 @@
   --calendar-font-size: #{$datepicker-calendar-font-size};
   --calendar-header-font-weight: #{$datepicker-calendar-header-font-weight};
   --calendar-weekday-color: var(--secondary);
+  --calendar-week-number-color: var(--secondary);
+  --calendar-week-number-border-color: var(--border-color);
   --calendar-day-hover-bg: var(--hover-bg);
   --calendar-day-selected-bg: var(--primary);
   --calendar-day-selected-color: var(--primary-fg);
@@ -151,6 +153,12 @@
   }
 }
 
+// Holds the week numbers column, when enabled, next to the month
+[data-vc='wrapper'] {
+  display: flex;
+  flex-grow: 1;
+}
+
 [data-vc='content'] {
   display: flex;
   flex-grow: 1;
@@ -252,6 +260,46 @@ button[data-vc-week-day] {
   cursor: pointer;
 }
 
+// Week numbers: a column in front of the month, with a title that lines up
+// with the weekday header and one number for each row of dates.
+[data-vc-week='numbers'] {
+  display: flex;
+  flex-direction: column;
+  padding-inline-end: 0.5rem;
+  margin-inline-end: 0.5rem;
+  border-inline-end: var(--border-width) solid var(--calendar-week-number-border-color);
+}
+
+[data-vc-week-numbers='title'] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 0.5rem;
+  font-size: var(--calendar-day-font-size);
+  font-weight: var(--calendar-header-font-weight);
+  line-height: 1rem;
+  color: var(--calendar-week-number-color);
+}
+
+[data-vc-week-numbers='content'] {
+  display: grid;
+  grid-auto-rows: calc(var(--calendar-day-size) + 0.25rem);
+  align-items: center;
+  justify-items: center;
+}
+
+[data-vc-week-number] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-width: var(--calendar-day-size);
+  font-size: var(--calendar-day-font-size);
+  font-weight: $font-weight-normal;
+  line-height: 1rem;
+  color: var(--calendar-week-number-color);
+}
+
 // Dates grid
 [data-vc='dates'] {
   pointer-events: none;