@utrecht/calendar-react 1.0.17 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utrecht/calendar-react",
-  "version": "1.0.17",
+  "version": "1.1.0",
   "description": "Calendar component for the Municipality of Utrecht based on the NL Design System architecture",
   "keywords": [
     "nl-design-system"
@@ -56,8 +56,8 @@
     "clsx": "2.1.1",
     "date-fns": "2.30.0",
     "lodash-es": "4.17.23",
-    "@utrecht/button-react": "3.0.1",
-    "@utrecht/calendar-css": "2.0.1"
+    "@utrecht/calendar-css": "2.0.1",
+    "@utrecht/button-react": "3.0.1"
   },
   "devDependencies": {
     "@testing-library/dom": "8.20.1",

package/src/index.test.tsx

@@ -95,6 +95,28 @@ describe('Calendar', () => {
     expect(selectedEventButton).toHaveClass('utrecht-calendar__table-days-item-day--selected');
   });
 
+  it('hides weekends', () => {
+    const currentDate = new Date(2023, 5, 15); // 15 June 2023 (Thu)
+
+    render(<Calendar onCalendarClick={() => {}} locale={nl} currentDate={currentDate} displayWeekend={false} />);
+
+    const currentDayButton = screen.getByRole('button', {
+      name: 'donderdag 15 juni 2023',
+    });
+
+    expect(currentDayButton).not.toBeDisabled();
+
+    expect(screen.queryByRole('button', { name: 'zaterdag 03 juni 2023' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'zaterdag 10 juni 2023' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'zaterdag 17 juni 2023' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'zaterdag 24 juni 2023' })).not.toBeInTheDocument();
+
+    expect(screen.queryByRole('button', { name: 'zondag 04 juni 2023' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'zondag 11 juni 2023' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'zondag 18 juni 2023' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'zondag 25 juni 2023' })).not.toBeInTheDocument();
+  });
+
   it('navigates to previous year', () => {
     const currentDate = new Date(2023, 2, 1);
     const { container } = render(<Calendar onCalendarClick={() => {}} locale={nl} currentDate={currentDate} />);
@@ -119,6 +141,24 @@ describe('Calendar', () => {
     expect(currentDateLabel).toContainHTML('maart 2024');
   });
 
+  it('renders year navigation buttons by default', () => {
+    const currentDate = new Date(2023, 5, 15);
+
+    render(<Calendar onCalendarClick={() => {}} locale={nl} currentDate={currentDate} />);
+
+    expect(screen.queryByRole('button', { name: 'vorig jaar' })).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'volgend jaar' })).toBeInTheDocument();
+  });
+
+  it('does not render year navigation buttons', () => {
+    const currentDate = new Date(2023, 5, 15);
+
+    render(<Calendar onCalendarClick={() => {}} locale={nl} currentDate={currentDate} displayYearNavigation={false} />);
+
+    expect(screen.queryByRole('button', { name: 'vorig jaar' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'volgend jaar' })).not.toBeInTheDocument();
+  });
+
   it('navigates to previous month', () => {
     const currentDate = new Date(2023, 2, 1);
     const { container } = render(<Calendar onCalendarClick={() => {}} locale={nl} currentDate={currentDate} />);

package/src/index.tsx

@@ -12,6 +12,7 @@ import {
   isBefore,
   isSameDay,
   isSameMonth,
+  isWeekend,
   Locale,
   parseISO,
   setMonth,
@@ -36,14 +37,14 @@ import { IconArrowLeftDouble } from './IconArrowLeftDouble';
 import { IconArrowRight } from './IconArrowRight';
 import { IconArrowRightDouble } from './IconArrowRightDouble';
 
-function createCalendar(today: Date): Date[] {
+function createCalendar(today: Date, displayWeekend: boolean): Date[] {
   const start = startOfWeek(startOfMonth(today), {
     weekStartsOn: 1 /* Monday */,
   });
   const end = endOfWeek(addWeeks(start, 5), {
     weekStartsOn: 1 /* Monday */,
   });
-  return eachDayOfInterval({ start, end });
+  return eachDayOfInterval({ start, end }).filter((date) => displayWeekend || !isWeekend(date));
 }
 
 export type Events = {
@@ -81,6 +82,8 @@ export interface CalendarProps {
   nextMonthButtonTitle?: string;
   minDate?: Date;
   maxDate?: Date;
+  displayWeekend?: boolean;
+  displayYearNavigation?: boolean;
 }
 
 /**
@@ -97,16 +100,18 @@ export const Calendar = ({
   nextYearButtonTitle = 'Next year',
   previousMonthButtonTitle = 'Previous month',
   nextMonthButtonTitle = 'Next month',
+  displayWeekend = true,
+  displayYearNavigation = true,
   minDate,
   maxDate,
 }: CalendarProps) => {
   const [visibleMonth, setVisibleMonth] = useState(currentDate || new Date());
   const [selectedDate, setSelectedDate] = useState(currentDate);
-  const calendar = createCalendar(visibleMonth);
+  const calendar = createCalendar(visibleMonth, displayWeekend);
   const start = startOfWeek(visibleMonth, { weekStartsOn: 1 });
   const end = endOfWeek(visibleMonth, { weekStartsOn: 1 });
 
-  const currentWeek = eachDayOfInterval({ start, end }).map((day) => day);
+  const currentWeek = eachDayOfInterval({ start, end }).filter((day) => displayWeekend || !isWeekend(day));
   const chunksWeeks = chunk(calendar, calendar.length / 6);
 
   const weeks = chunksWeeks.map((week) =>
@@ -131,26 +136,34 @@ export const Calendar = ({
     }),
   );
 
+  const monthNavigation = (
+    <CalendarNavigationButtons
+      previousIcon={<IconArrowLeft title={previousMonthButtonTitle} />}
+      nextIcon={<IconArrowRight title={nextMonthButtonTitle} />}
+      onPreviousClick={() => setVisibleMonth(setMonth(visibleMonth, visibleMonth.getMonth() - 1))}
+      onNextClick={() => setVisibleMonth(addMonths(visibleMonth, 1))}
+    >
+      <CalendarNavigationLabel dateTime={format(visibleMonth, 'yyyy-mm')}>
+        {format(visibleMonth, 'LLLL y', { locale })}
+      </CalendarNavigationLabel>
+    </CalendarNavigationButtons>
+  );
+
   return (
     <div className="utrecht-calendar">
       <CalendarNavigation>
-        <CalendarNavigationButtons
-          previousIcon={<IconArrowLeftDouble title={previousYearButtonTitle} />}
-          nextIcon={<IconArrowRightDouble title={nextYearButtonTitle} />}
-          onPreviousClick={() => setVisibleMonth(setYear(visibleMonth, getYear(visibleMonth) - 1))}
-          onNextClick={() => setVisibleMonth(addYears(visibleMonth, 1))}
-        >
+        {!displayYearNavigation ? (
+          monthNavigation
+        ) : (
           <CalendarNavigationButtons
-            previousIcon={<IconArrowLeft title={previousMonthButtonTitle} />}
-            nextIcon={<IconArrowRight title={nextMonthButtonTitle} />}
-            onPreviousClick={() => setVisibleMonth(setMonth(visibleMonth, visibleMonth.getMonth() - 1))}
-            onNextClick={() => setVisibleMonth(addMonths(visibleMonth, 1))}
+            previousIcon={<IconArrowLeftDouble title={previousYearButtonTitle} />}
+            nextIcon={<IconArrowRightDouble title={nextYearButtonTitle} />}
+            onPreviousClick={() => setVisibleMonth(setYear(visibleMonth, getYear(visibleMonth) - 1))}
+            onNextClick={() => setVisibleMonth(addYears(visibleMonth, 1))}
           >
-            <CalendarNavigationLabel dateTime={format(visibleMonth, 'yyyy-mm')}>
-              {format(visibleMonth, 'LLLL y', { locale })}
-            </CalendarNavigationLabel>
+            {monthNavigation}
           </CalendarNavigationButtons>
-        </CalendarNavigationButtons>
+        )}
       </CalendarNavigation>
       <table className="utrecht-calendar__table" role="grid">
         <CalendarTableWeeksContainer>