Add firstWeekday attr to calendar/TimeRange

packages/calendar/src/TimeRange.tsx

@@ -53,6 +53,8 @@ const InnerTimeRange = ({
 
     legends = timeRangeDefaultProps.legends,
     role = timeRangeDefaultProps.role,
+
+    firstDayOfWeek = timeRangeDefaultProps.firstDayOfWeek,
 }: TimeRangeSvgProps) => {
     const { margin, innerWidth, innerHeight, outerWidth, outerHeight } = useDimensions(
         width,
@@ -98,6 +100,7 @@ const InnerTimeRange = ({
         data,
         direction,
         daySpacing,
+        firstDayOfWeek,
     })
 
     // map the days and reduce the month
@@ -117,6 +120,7 @@ const InnerTimeRange = ({
         cellWidth,
         daySpacing,
         ticks: weekdayTicks,
+        firstDayOfWeek,
     })
 
     const monthLegends = useMonthLegends({

packages/calendar/src/compute/timeRange.ts

@@ -1,4 +1,14 @@
-import { timeWeek, timeDays, timeDay } from 'd3-time'
+import {
+    timeDays,
+    timeDay,
+    timeMonday,
+    timeTuesday,
+    timeWednesday,
+    timeThursday,
+    timeFriday,
+    timeSaturday,
+    timeSunday,
+} from 'd3-time'
 import { timeFormat } from 'd3-time-format'
 import { DateOrString } from '../types'
 import { isDate } from 'lodash'
@@ -38,6 +48,7 @@ interface ComputeCellPositions
     }[]
     colorScale: (value: number) => string
     emptyColor: string
+    firstDayOfWeek: number
 }
 
 interface ComputeWeekdays
@@ -46,6 +57,7 @@ interface ComputeWeekdays
         ComputeBaseDimensionProps {
     ticks?: number[]
     arrayOfWeekdays?: string[]
+    firstDayOfWeek: number
 }
 
 interface Day {
@@ -135,26 +147,68 @@ export const computeCellSize = ({
     }
 }
 
+export const getDayIndex = (date: Date, firstDayOfWeek = 0) => {
+    const days = [0, 1, 2, 3, 4, 5, 6]
+    const day = date.getDay()
+    const offsetDay = day - firstDayOfWeek
+    const [dayIndex] = days.slice(offsetDay)
+    return dayIndex
+}
+
+const getTimeInterval = (firstDayOfWeek = 0) => {
+    switch (firstDayOfWeek) {
+        case 0:
+        default:
+            return timeSunday
+        case 1:
+            return timeMonday
+        case 2:
+            return timeTuesday
+        case 3:
+            return timeWednesday
+        case 4:
+            return timeThursday
+        case 5:
+            return timeFriday
+        case 6:
+            return timeSaturday
+    }
+}
+
+function shiftArray<T>(arr: T[], x: number): T[] {
+    if (!arr.length || !x) return arr
+
+    for (let i = 0; i < x; i++) {
+        const shifted = arr.shift() as T
+        arr.push(shifted)
+    }
+
+    return arr
+}
+
 function computeGrid({
     startDate,
     date,
     direction,
+    firstDayOfWeek,
 }: {
     startDate: Date
     date: Date
     direction: 'horizontal' | 'vertical'
+    firstDayOfWeek: number
 }) {
-    const firstWeek = timeWeek.count(startDate, date)
+    const timeInterval = getTimeInterval(firstDayOfWeek)
+    const firstWeek = timeInterval.count(startDate, date)
     const month = date.getMonth()
     const year = date.getFullYear()
 
     let currentColumn = 0
     let currentRow = 0
     if (direction === 'horizontal') {
         currentColumn = firstWeek
-        currentRow = date.getDay()
+        currentRow = getDayIndex(date, firstDayOfWeek)
     } else {
-        currentColumn = date.getDay()
+        currentColumn = getDayIndex(date, firstDayOfWeek)
         currentRow = firstWeek
     }
 
@@ -172,6 +226,7 @@ export const computeCellPositions = ({
     cellHeight,
     daySpacing,
     offset,
+    firstDayOfWeek,
 }: ComputeCellPositions) => {
     let x = daySpacing
     let y = daySpacing
@@ -201,6 +256,7 @@ export const computeCellPositions = ({
             startDate,
             date: day.date,
             direction,
+            firstDayOfWeek,
         })
 
         const coordinates = {
@@ -244,15 +300,11 @@ export const computeWeekdays = ({
     direction,
     daySpacing,
     ticks = [1, 3, 5],
-    arrayOfWeekdays = [
-        'Sunday',
-        'Monday',
-        'Tuesday',
-        'Wednesday',
-        'Thursday',
-        'Friday',
-        'Saturday',
-    ],
+    firstDayOfWeek,
+    arrayOfWeekdays = shiftArray(
+        ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+        firstDayOfWeek || 0
+    ),
 }: ComputeWeekdays) => {
     const sizes = {
         width: cellWidth + daySpacing,

packages/calendar/src/props.ts

@@ -52,4 +52,5 @@ export const timeRangeDefaultProps = {
     dayRadius: 0,
     square: true,
     weekdayLegendOffset: 75,
+    firstDayOfWeek: 0,
 } as const

packages/calendar/src/types.ts

@@ -212,6 +212,7 @@ export type TimeRangeSvgProps = Dimensions & { data: CalendarDatum[] } & Partial
                 role: string
                 weekdayLegendOffset: number
                 weekdayTicks: Array<0 | 1 | 2 | 3 | 4 | 5 | 6>
+                firstDayOfWeek: number
             }
     >