react-day-picker 9.3.2 → 9.4.0

package/dist/esm/types/props.d.ts

@@ -203,6 +203,8 @@ export interface PropsBase {
     /**
      * Show the outside days (days falling in the next or the previous month).
      *
+     * **Note:** when {@link broadcastCalendar} is set, this prop defaults to true.
+     *
      * @see https://daypicker.dev/docs/customization#outside-days
      */
     showOutsideDays?: boolean;
@@ -216,6 +218,16 @@ export interface PropsBase {
      * @see https://daypicker.dev/docs/customization#showweeknumber
      */
     showWeekNumber?: boolean;
+    /**
+     * Display the weeks in the month following the broadcast calendar. Setting
+     * this prop will ignore {@link weekStartsOn} (always Monday) and
+     * {@link showOutsideDays} will default to true.
+     *
+     * @since 9.4.0
+     * @see https://daypicker.dev/docs/localization#broadcast-calendar
+     * @see https://en.wikipedia.org/wiki/Broadcast_calendar
+     */
+    broadcastCalendar?: boolean;
     /**
      * Use ISO week dates instead of the locale setting. Setting this prop will
      * ignore `weekStartsOn` and `firstWeekContainsDate`.

package/dist/esm/useCalendar.d.ts

@@ -44,4 +44,4 @@ export interface Calendar {
     goToDay: (day: CalendarDay) => void;
 }
 /** @private */
-export declare function useCalendar(props: Pick<DayPickerProps, "captionLayout" | "endMonth" | "startMonth" | "today" | "fixedWeeks" | "ISOWeek" | "numberOfMonths" | "disableNavigation" | "onMonthChange" | "month" | "defaultMonth" | "timeZone" | "fromMonth" | "fromYear" | "toMonth" | "toYear">, dateLib: DateLib): Calendar;
+export declare function useCalendar(props: Pick<DayPickerProps, "captionLayout" | "endMonth" | "startMonth" | "today" | "fixedWeeks" | "ISOWeek" | "numberOfMonths" | "disableNavigation" | "onMonthChange" | "month" | "defaultMonth" | "timeZone" | "broadcastCalendar" | "fromMonth" | "fromYear" | "toMonth" | "toYear">, dateLib: DateLib): Calendar;

package/dist/esm/useCalendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCalendar.js","sourceRoot":"","sources":["../../src/useCalendar.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"useCalendar.js","sourceRoot":"","sources":["../../src/useCalendar.ts"],"names":[],"mappings":"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"}

package/dist/esm/useGetModifiers.js

@@ -9,7 +9,7 @@ import { dateMatchModifiers } from "./utils/dateMatchModifiers.js";
  * @private
  */
 export function useGetModifiers(days, props, dateLib) {
-    const { disabled, hidden, modifiers, showOutsideDays, today } = props;
+    const { disabled, hidden, modifiers, showOutsideDays, broadcastCalendar, today } = props;
     const { isSameDay, isSameMonth, startOfMonth, isBefore, endOfMonth, isAfter } = dateLib;
     const startMonth = props.startMonth && startOfMonth(props.startMonth);
     const endMonth = props.endMonth && endOfMonth(props.endMonth);
@@ -30,7 +30,9 @@ export function useGetModifiers(days, props, dateLib) {
         const isHidden = Boolean(hidden && dateMatchModifiers(date, hidden, dateLib)) ||
             isBeforeStartMonth ||
             isAfterEndMonth ||
-            (!showOutsideDays && isOutside);
+            // Broadcast calendar will show outside days as default
+            (!broadcastCalendar && !showOutsideDays && isOutside) ||
+            (broadcastCalendar && showOutsideDays === false && isOutside);
         const isToday = isSameDay(date, today ??
             (props.timeZone
                 ? TZDate.tz(props.timeZone)

package/dist/esm/useGetModifiers.js.map

@@ -1 +1 @@
-{"version":3,"file":"useGetModifiers.js","sourceRoot":"","sources":["../../src/useGetModifiers.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"useGetModifiers.js","sourceRoot":"","sources":["../../src/useGetModifiers.tsx"],"names":[],"mappings":"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"}

package/examples/BroadcastCalendar.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+import { DayPicker } from "react-day-picker";
+
+export function BroadcastCalendar() {
+  return <DayPicker showWeekNumber broadcastCalendar />;
+}

package/examples/index.ts

@@ -1,5 +1,6 @@
 export * from "./AccessibleDatePicker";
 export * from "./AutoFocus";
+export * from "./BroadcastCalendar";
 export * from "./ContainerAttributes";
 export * from "./Controlled";
 export * from "./ControlledSelection";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-day-picker",
-  "version": "9.3.2",
+  "version": "9.4.0",
   "description": "Customizable Date Picker for React",
   "author": "Giampaolo Bellavite <io@gpbl.dev>",
   "homepage": "https://daypicker.dev",

package/src/DayPicker.tsx

@@ -49,7 +49,7 @@ export function DayPicker(props: DayPickerProps) {
       const dateLib = new DateLib(
         {
           locale,
-          weekStartsOn: props.weekStartsOn,
+          weekStartsOn: props.broadcastCalendar ? 1 : props.weekStartsOn,
           firstWeekContainsDate: props.firstWeekContainsDate,
           useAdditionalWeekYearTokens: props.useAdditionalWeekYearTokens,
           useAdditionalDayOfYearTokens: props.useAdditionalDayOfYearTokens
@@ -75,7 +75,8 @@ export function DayPicker(props: DayPickerProps) {
       props.locale,
       props.useAdditionalDayOfYearTokens,
       props.useAdditionalWeekYearTokens,
-      props.weekStartsOn
+      props.weekStartsOn,
+      props.broadcastCalendar
     ]);
 
   const {

package/src/classes/DateLib.ts

@@ -35,6 +35,10 @@ import {
 import type { Locale } from "date-fns/locale";
 import { enUS } from "date-fns/locale";
 
+import { endOfBroadcastWeek } from "../helpers/endOfBroadcastWeek.js";
+import { startOfBroadcastWeek } from "../helpers/startOfBroadcastWeek.js";
+import type { PropsBase } from "../types/props.js";
+
 export type { Locale } from "date-fns/locale";
 export type { Month as DateFnsMonth } from "date-fns";
 
@@ -180,6 +184,18 @@ export class DateLib {
       : differenceInCalendarMonths(dateLeft, dateRight);
   };
 
+  /**
+   * Returns the end of the broadcast week for the given date.
+   *
+   * @param date The original date.
+   * @returns The end of the broadcast week.
+   */
+  endOfBroadcastWeek: typeof endOfBroadcastWeek = (date: Date) => {
+    return this.overrides?.endOfBroadcastWeek
+      ? this.overrides.endOfBroadcastWeek(date, this)
+      : endOfBroadcastWeek(date, this);
+  };
+
   /**
    * Returns the end of the ISO week for the given date.
    *
@@ -396,6 +412,18 @@ export class DateLib {
       : setYear(date, year);
   };
 
+  /**
+   * Returns the start of the broadcast week for the given date.
+   *
+   * @param date The original date.
+   * @returns The start of the broadcast week.
+   */
+  startOfBroadcastWeek: typeof startOfBroadcastWeek = (date: Date) => {
+    return this.overrides?.startOfBroadcastWeek
+      ? this.overrides.startOfBroadcastWeek(date, this)
+      : startOfBroadcastWeek(date, this);
+  };
+
   /**
    * Returns the start of the day for the given date.
    *

package/src/helpers/broadcastCalendar.test.ts

@@ -0,0 +1,43 @@
+import { defaultDateLib } from "react-day-picker/classes";
+
+import { endOfBroadcastWeek } from "./endOfBroadcastWeek";
+import { getBroadcastWeeksInMonth } from "./getBroadcastWeeksInMonth";
+import { startOfBroadcastWeek } from "./startOfBroadcastWeek";
+
+describe("broadcastCalendar", () => {
+  test("getBroadcastWeeksInMonth should return correct number of weeks", () => {
+    // Test for a month with 5 weeks
+    expect(getBroadcastWeeksInMonth(new Date(2023, 0, 1), defaultDateLib)).toBe(
+      5
+    ); // January 2023
+    // Test for a month with 4 weeks
+    expect(getBroadcastWeeksInMonth(new Date(2023, 1, 1), defaultDateLib)).toBe(
+      4
+    ); // February 2023
+  });
+
+  test("startOfBroadcastWeek should return correct start date", () => {
+    // Test for a month starting on a Monday
+    expect(startOfBroadcastWeek(new Date(2023, 0, 1), defaultDateLib)).toEqual(
+      new Date(2022, 11, 26)
+    ); // December 26 2022
+    // Test for a month starting on a Wednesday
+    expect(startOfBroadcastWeek(new Date(2020, 0, 1), defaultDateLib)).toEqual(
+      new Date(2019, 11, 30)
+    ); // December 30 2019
+  });
+
+  test("endOfBroadcastWeek should return correct end date", () => {
+    const startDate = startOfBroadcastWeek(
+      new Date(2023, 0, 1),
+      defaultDateLib
+    );
+    expect(endOfBroadcastWeek(new Date(2023, 0, 1), defaultDateLib)).toEqual(
+      new Date(
+        startDate.getFullYear(),
+        startDate.getMonth(),
+        startDate.getDate() + 34
+      )
+    ); // January 2023
+  });
+});

package/src/helpers/endOfBroadcastWeek.test.ts

@@ -0,0 +1,25 @@
+import { defaultDateLib } from "react-day-picker/classes";
+
+import { endOfBroadcastWeek } from "./endOfBroadcastWeek";
+
+const testCases = [
+  [new Date(2023, 0, 1), new Date(2023, 0, 29)], // January
+  [new Date(2023, 1, 1), new Date(2023, 1, 26)], // February
+  [new Date(2023, 2, 1), new Date(2023, 2, 26)], // March
+  [new Date(2023, 3, 1), new Date(2023, 3, 30)], // April
+  [new Date(2023, 4, 1), new Date(2023, 4, 28)], // May
+  [new Date(2023, 5, 1), new Date(2023, 5, 25)], // June
+  [new Date(2023, 6, 1), new Date(2023, 6, 30)], // July
+  [new Date(2023, 7, 1), new Date(2023, 7, 27)], // August
+  [new Date(2023, 8, 1), new Date(2023, 8, 24)], // September
+  [new Date(2023, 9, 1), new Date(2023, 9, 29)], // October
+  [new Date(2023, 10, 1), new Date(2023, 10, 26)], // November
+  [new Date(2023, 11, 1), new Date(2023, 11, 31)] // December
+];
+
+describe("endOfBroadcastWeek", () => {
+  test.each(testCases)("%s should return %s", (date, expected) => {
+    const result = endOfBroadcastWeek(date, defaultDateLib);
+    expect(result).toEqual(expected);
+  });
+});

package/src/helpers/endOfBroadcastWeek.ts

@@ -0,0 +1,16 @@
+import type { DateLib } from "../classes/index.js";
+
+import { getBroadcastWeeksInMonth } from "./getBroadcastWeeksInMonth.js";
+import { startOfBroadcastWeek } from "./startOfBroadcastWeek.js";
+
+/**
+ * Return the end date of the week in the broadcast calendar.
+ *
+ * @since 9.4.0
+ */
+export function endOfBroadcastWeek(date: Date, dateLib: DateLib): Date {
+  const startDate = startOfBroadcastWeek(date, dateLib);
+  const numberOfWeeks = getBroadcastWeeksInMonth(date, dateLib);
+  const endDate = dateLib.addDays(startDate, numberOfWeeks * 7 - 1);
+  return endDate;
+}

package/src/helpers/getBroadcastWeeksInMonth.test.ts

@@ -0,0 +1,23 @@
+import { defaultDateLib } from "../classes/index.js";
+
+import { getBroadcastWeeksInMonth } from "./getBroadcastWeeksInMonth";
+
+describe("getBroadcastWeeksInMonth", () => {
+  test.each`
+    month                    | expectedWeeks
+    ${new Date(2023, 0, 1)}  | ${5}
+    ${new Date(2023, 1, 1)}  | ${4}
+    ${new Date(2023, 2, 1)}  | ${4}
+    ${new Date(2023, 3, 1)}  | ${5}
+    ${new Date(2023, 4, 1)}  | ${4}
+    ${new Date(2023, 5, 1)}  | ${4}
+    ${new Date(2023, 6, 1)}  | ${5}
+    ${new Date(2023, 7, 1)}  | ${4}
+    ${new Date(2023, 8, 1)}  | ${4}
+    ${new Date(2023, 9, 1)}  | ${5}
+    ${new Date(2023, 10, 1)} | ${4}
+    ${new Date(2023, 11, 1)} | ${5}
+  `("returns $expectedWeeks weeks for $month", ({ month, expectedWeeks }) => {
+    expect(getBroadcastWeeksInMonth(month, defaultDateLib)).toBe(expectedWeeks);
+  });
+});

package/src/helpers/getBroadcastWeeksInMonth.ts

@@ -0,0 +1,31 @@
+import { DateLib } from "../classes/index.js";
+
+const FIVE_WEEKS = 5;
+const FOUR_WEEKS = 4;
+
+/**
+ * Return the number of weeks to display in the broadcast calendar.
+ *
+ * @since 9.4.0
+ */
+export function getBroadcastWeeksInMonth(month: Date, dateLib: DateLib): 4 | 5 {
+  // Get the first day of the month
+  const firstDayOfMonth = dateLib.startOfMonth(month);
+
+  // Get the day of the week for the first day of the month (1-7, where 1 is Monday)
+  const firstDayOfWeek =
+    firstDayOfMonth.getDay() > 0 ? firstDayOfMonth.getDay() : 7;
+
+  const broadcastStartDate = dateLib.addDays(month, -firstDayOfWeek + 1);
+
+  const lastDateOfLastWeek = dateLib.addDays(
+    broadcastStartDate,
+    FIVE_WEEKS * 7 - 1
+  );
+  const numberOfWeeks =
+    month.getMonth() === lastDateOfLastWeek.getMonth()
+      ? FIVE_WEEKS
+      : FOUR_WEEKS;
+
+  return numberOfWeeks;
+}

package/src/helpers/getDataAttributes.tsx

@@ -9,7 +9,8 @@ export function getDataAttributes(
     "data-required": "required" in props ? props.required : undefined,
     "data-multiple-months":
       (props.numberOfMonths && props.numberOfMonths > 1) || undefined,
-    "data-week-numbers": props.showWeekNumber || undefined
+    "data-week-numbers": props.showWeekNumber || undefined,
+    "data-broadcast-calendar": props.broadcastCalendar || undefined
   };
   Object.entries(props).forEach(([key, val]) => {
     if (key.startsWith("data-")) {

package/src/helpers/getDates.ts

@@ -1,39 +1,42 @@
 import { type DateLib } from "../classes/DateLib.js";
 import { type DayPickerProps } from "../types/props.js";
 
-/** The number of days in a month when having 6 weeks. */
-export const NrOfDaysWithFixedWeeks = 42;
-
 /** Return all the dates to display in the calendar. */
 export function getDates(
   displayMonths: Date[],
   maxDate: Date | undefined,
-  props: Pick<DayPickerProps, "ISOWeek" | "fixedWeeks">,
+  props: Pick<DayPickerProps, "ISOWeek" | "fixedWeeks" | "broadcastCalendar">,
   dateLib: DateLib
 ): Date[] {
   const firstMonth = displayMonths[0];
   const lastMonth = displayMonths[displayMonths.length - 1];
 
-  const { ISOWeek, fixedWeeks } = props ?? {};
+  const { ISOWeek, fixedWeeks, broadcastCalendar } = props ?? {};
   const {
-    startOfWeek,
-    endOfWeek,
-    startOfISOWeek,
-    endOfISOWeek,
     addDays,
     differenceInCalendarDays,
     differenceInCalendarMonths,
+    endOfBroadcastWeek,
+    endOfISOWeek,
+    endOfMonth,
+    endOfWeek,
     isAfter,
-    endOfMonth
+    startOfBroadcastWeek,
+    startOfISOWeek,
+    startOfWeek
   } = dateLib;
 
-  const startWeekFirstDate = ISOWeek
-    ? startOfISOWeek(firstMonth)
-    : startOfWeek(firstMonth);
+  const startWeekFirstDate = broadcastCalendar
+    ? startOfBroadcastWeek(firstMonth, dateLib)
+    : ISOWeek
+      ? startOfISOWeek(firstMonth)
+      : startOfWeek(firstMonth);
 
-  const endWeekLastDate = ISOWeek
-    ? endOfISOWeek(endOfMonth(lastMonth))
-    : endOfWeek(endOfMonth(lastMonth));
+  const endWeekLastDate = broadcastCalendar
+    ? endOfBroadcastWeek(lastMonth, dateLib)
+    : ISOWeek
+      ? endOfISOWeek(endOfMonth(lastMonth))
+      : endOfWeek(endOfMonth(lastMonth));
 
   const nOfDays = differenceInCalendarDays(endWeekLastDate, startWeekFirstDate);
   const nOfMonths = differenceInCalendarMonths(lastMonth, firstMonth) + 1;
@@ -48,7 +51,8 @@ export function getDates(
   }
 
   // If fixed weeks is enabled, add the extra dates to the array
-  const extraDates = NrOfDaysWithFixedWeeks * nOfMonths;
+  const nrOfDaysWithFixedWeeks = broadcastCalendar ? 35 : 42;
+  const extraDates = nrOfDaysWithFixedWeeks * nOfMonths;
   if (fixedWeeks && dates.length < extraDates) {
     const daysToAdd = extraDates - dates.length;
     for (let i = 0; i < daysToAdd; i++) {

package/src/helpers/getFocusableDate.ts

@@ -12,21 +12,23 @@ export function getFocusableDate(
   refDate: Date,
   navStart: Date | undefined,
   navEnd: Date | undefined,
-  props: Pick<DayPickerProps, "ISOWeek">,
+  props: Pick<DayPickerProps, "ISOWeek" | "broadcastCalendar">,
   dateLib: DateLib
 ): Date {
-  const { ISOWeek } = props;
+  const { ISOWeek, broadcastCalendar } = props;
   const {
     addDays,
     addMonths,
-    addYears,
     addWeeks,
-    startOfISOWeek,
+    addYears,
+    endOfBroadcastWeek,
     endOfISOWeek,
-    startOfWeek,
     endOfWeek,
     max,
-    min
+    min,
+    startOfBroadcastWeek,
+    startOfISOWeek,
+    startOfWeek
   } = dateLib;
   const moveFns = {
     day: addDays,
@@ -34,8 +36,17 @@ export function getFocusableDate(
     month: addMonths,
     year: addYears,
     startOfWeek: (date: Date) =>
-      ISOWeek ? startOfISOWeek(date) : startOfWeek(date),
-    endOfWeek: (date: Date) => (ISOWeek ? endOfISOWeek(date) : endOfWeek(date))
+      broadcastCalendar
+        ? startOfBroadcastWeek(date, dateLib)
+        : ISOWeek
+          ? startOfISOWeek(date)
+          : startOfWeek(date),
+    endOfWeek: (date: Date) =>
+      broadcastCalendar
+        ? endOfBroadcastWeek(date, dateLib)
+        : ISOWeek
+          ? endOfISOWeek(date)
+          : endOfWeek(date)
   };
 
   let focusableDate = moveFns[moveBy](refDate, moveDir === "after" ? 1 : -1);

package/src/helpers/getMonths.ts

@@ -2,8 +2,6 @@ import type { DateLib } from "../classes/DateLib.js";
 import { CalendarWeek, CalendarDay, CalendarMonth } from "../classes/index.js";
 import type { DayPickerProps } from "../types/index.js";
 
-import { NrOfDaysWithFixedWeeks } from "./getDates.js";
-
 /** Return the months to display in the calendar. */
 export function getMonths(
   /** The months (as dates) to display in the calendar. */
@@ -11,37 +9,48 @@ export function getMonths(
   /** The dates to display in the calendar. */
   dates: Date[],
   /** Options from the props context. */
-  props: Pick<DayPickerProps, "fixedWeeks" | "ISOWeek" | "reverseMonths">,
+  props: Pick<
+    DayPickerProps,
+    "broadcastCalendar" | "fixedWeeks" | "ISOWeek" | "reverseMonths"
+  >,
   dateLib: DateLib
 ): CalendarMonth[] {
   const {
-    startOfWeek,
-    endOfWeek,
-    startOfISOWeek,
+    addDays,
+    endOfBroadcastWeek,
     endOfISOWeek,
     endOfMonth,
-    addDays,
+    endOfWeek,
+    getISOWeek,
     getWeek,
-    getISOWeek
+    startOfBroadcastWeek,
+    startOfISOWeek,
+    startOfWeek
   } = dateLib;
   const dayPickerMonths = displayMonths.reduce<CalendarMonth[]>(
     (months, month) => {
-      const firstDateOfFirstWeek = props.ISOWeek
-        ? startOfISOWeek(month)
-        : startOfWeek(month);
+      const firstDateOfFirstWeek = props.broadcastCalendar
+        ? startOfBroadcastWeek(month, dateLib)
+        : props.ISOWeek
+          ? startOfISOWeek(month)
+          : startOfWeek(month);
 
-      const lastDateOfLastWeek = props.ISOWeek
-        ? endOfISOWeek(endOfMonth(month))
-        : endOfWeek(endOfMonth(month));
+      const lastDateOfLastWeek = props.broadcastCalendar
+        ? endOfBroadcastWeek(month, dateLib)
+        : props.ISOWeek
+          ? endOfISOWeek(endOfMonth(month))
+          : endOfWeek(endOfMonth(month));
 
       /** The dates to display in the month. */
       const monthDates = dates.filter((date) => {
         return date >= firstDateOfFirstWeek && date <= lastDateOfLastWeek;
       });
 
-      if (props.fixedWeeks && monthDates.length < NrOfDaysWithFixedWeeks) {
+      const nrOfDaysWithFixedWeeks = props.broadcastCalendar ? 35 : 42;
+
+      if (props.fixedWeeks && monthDates.length < nrOfDaysWithFixedWeeks) {
         const extraDates = dates.filter((date) => {
-          const daysToAdd = NrOfDaysWithFixedWeeks - monthDates.length;
+          const daysToAdd = nrOfDaysWithFixedWeeks - monthDates.length;
           return (
             date > lastDateOfLastWeek &&
             date <= addDays(lastDateOfLastWeek, daysToAdd)
@@ -67,7 +76,6 @@ export function getMonths(
       );
 
       const dayPickerMonth = new CalendarMonth(month, weeks);
-
       months.push(dayPickerMonth);
       return months;
     },

package/src/helpers/getWeekdays.ts

@@ -11,16 +11,21 @@ export function getWeekdays(
   dateLib: DateLib,
   /** Use ISOWeek instead of locale/ */
   ISOWeek?: boolean | undefined,
-  timeZone?: string | undefined
+  timeZone?: string | undefined,
+  /** @since 9.4.0 */
+  broadcastCalendar?: boolean | undefined
 ): Date[] {
   const date = timeZone
     ? TZDate.tz(timeZone)
     : dateLib.Date
       ? new dateLib.Date()
       : new Date();
-  const start = ISOWeek
-    ? dateLib.startOfISOWeek(date)
-    : dateLib.startOfWeek(date);
+
+  const start = broadcastCalendar
+    ? dateLib.startOfBroadcastWeek(date, dateLib)
+    : ISOWeek
+      ? dateLib.startOfISOWeek(date)
+      : dateLib.startOfWeek(date);
 
   const days: Date[] = [];
   for (let i = 0; i < 7; i++) {

package/src/helpers/startOfBroadcastWeek.test.ts

@@ -0,0 +1,24 @@
+import { defaultDateLib } from "../classes";
+
+import { startOfBroadcastWeek } from "./startOfBroadcastWeek";
+
+describe("startOfBroadcastWeek", () => {
+  test.each([
+    [new Date(2023, 0, 1), new Date(2022, 11, 26)], // January, Sunday
+    [new Date(2023, 1, 1), new Date(2023, 0, 30)], // February, Wednesday
+    [new Date(2023, 2, 1), new Date(2023, 1, 27)], // March, Wednesday
+    [new Date(2023, 3, 1), new Date(2023, 2, 27)], // April, Saturday
+    [new Date(2023, 4, 1), new Date(2023, 4, 1)], // May, Monday
+    [new Date(2023, 5, 1), new Date(2023, 4, 29)], // June, Thursday
+    [new Date(2023, 6, 1), new Date(2023, 5, 26)], // July, Saturday
+    [new Date(2023, 7, 1), new Date(2023, 6, 31)], // August, Tuesday
+    [new Date(2023, 8, 1), new Date(2023, 7, 28)], // September, Friday
+    [new Date(2023, 9, 1), new Date(2023, 8, 25)], // October, Sunday
+    [new Date(2023, 10, 1), new Date(2023, 9, 30)], // November, Wednesday
+    [new Date(2023, 11, 1), new Date(2023, 10, 27)] // December, Friday
+  ])("startOfBroadcastWeek(%s) should return %s", (inputDate, expectedDate) => {
+    expect(startOfBroadcastWeek(inputDate, defaultDateLib)).toEqual(
+      expectedDate
+    );
+  });
+});

package/src/helpers/startOfBroadcastWeek.ts

@@ -0,0 +1,19 @@
+import type { DateLib } from "../classes/index.js";
+
+/**
+ * Return the start date of the week in the broadcast calendar.
+ *
+ * @since 9.4.0
+ */
+export function startOfBroadcastWeek(date: Date, dateLib: DateLib): Date {
+  const firstOfMonth = dateLib.startOfMonth(date);
+  const dayOfWeek = firstOfMonth.getDay();
+
+  if (dayOfWeek === 1) {
+    return firstOfMonth;
+  } else if (dayOfWeek === 0) {
+    return dateLib.addDays(firstOfMonth, -1 * 6);
+  } else {
+    return dateLib.addDays(firstOfMonth, -1 * (dayOfWeek - 1));
+  }
+}

package/src/style.css

@@ -4,13 +4,13 @@
   --rdp-accent-color: blue; /* The accent color used for selected days and UI elements. */
   --rdp-accent-background-color: #f0f0ff; /* The accent background color used for selected days and UI elements. */
 
-  --rdp-day-height: 2.75rem; /* The height of the day cells. */
-  --rdp-day-width: 2.75rem; /* The width of the day cells. */
+  --rdp-day-height: 44px; /* The height of the day cells. */
+  --rdp-day-width: 44px; /* The width of the day cells. */
   
   --rdp-day_button-border-radius: 100%; /* The border radius of the day cells. */
   --rdp-day_button-border: 2px solid transparent; /* The border of the day cells. */
-  --rdp-day_button-height: var(--rdp-day-height); /* The height of the day cells. */
-  --rdp-day_button-width: var(--rdp-day-width); /* The width of the day cells. */
+  --rdp-day_button-height: 42px; /* The height of the day cells. */
+  --rdp-day_button-width: 42px; /* The width of the day cells. */
   
   --rdp-selected-border: 2px solid var(--rdp-accent-color); /* The border of the selected days. */
   --rdp-disabled-opacity: 0.5; /* The opacity of the disabled days. */
@@ -57,6 +57,10 @@
   --rdp-gradient-direction: -90deg;
 }
 
+.rdp-root[data-broadcast-calendar="true"] {
+  --rdp-outside-opacity: unset;
+}
+
 /* Root of the component. */
 .rdp-root {
   position: relative; /* Required to position the navigation toolbar. */
@@ -105,6 +109,11 @@
   border: 0;
 }
 
+.rdp-dropdown:focus-visible ~ .rdp-caption_label {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
 .rdp-button_next,
 .rdp-button_previous {
   border: none;