[BOOKINGSG-6107][JH] add optional showCurrentMonthOnly prop for Calendar

src/shared/internal-calendar/day-cell/day-cell.style.tsx

@@ -221,6 +221,10 @@ export const Label = styled(Text.H5)<LabelStyleProps>`
                 return css`
                     color: ${Color.Neutral[4]};
                 `;
+            case "hidden":
+                return css`
+                    visibility: hidden;
+                `;
             case "available":
             default:
                 return css`

src/shared/internal-calendar/day-cell/types.tsx

@@ -9,7 +9,12 @@ export type CellType =
     | "hover-dash"
     | "hover-current";
 
-export type LabelType = "available" | "unavailable" | "current" | "selected";
+export type LabelType =
+    | "available"
+    | "unavailable"
+    | "current"
+    | "selected"
+    | "hidden";
 
 export interface CellStyleProps {
     bgLeft?: CellType | undefined;

src/shared/internal-calendar/internal-calendar.tsx

@@ -30,6 +30,7 @@ export const Component = (
         selectWithinRange = true,
         initialCalendarDate,
         numberOfDays,
+        showActiveMonthDaysOnly = false,
     }: InternalCalendarProps,
     ref: React.ForwardedRef<InternalCalendarRef>
 ) => {
@@ -171,6 +172,7 @@ export const Component = (
                         maxDate={maxDate}
                         isNewSelection={selectWithinRange}
                         allowDisabledSelection={allowDisabledSelection}
+                        showActiveMonthDaysOnly={showActiveMonthDaysOnly}
                         onSelect={handleDateSelect}
                         onHover={handleDateHover}
                     />

src/shared/internal-calendar/standard/standard-calendar-day-view.tsx

@@ -38,6 +38,7 @@ export const StandardCalendarDayView = ({
     minDate,
     maxDate,
     allowDisabledSelection,
+    showActiveMonthDaysOnly,
 }: CalendarDayViewProps) => {
     // =============================================================================
     // CONST, STATE, REF
@@ -99,6 +100,9 @@ export const StandardCalendarDayView = ({
                                 disabledDates={disabledDates}
                                 allowDisabledSelection={allowDisabledSelection}
                                 isNewSelection={isNewSelection}
+                                showActiveMonthDaysOnly={
+                                    showActiveMonthDaysOnly
+                                }
                                 onSelect={handleDayClick}
                                 onHover={handleHoverCell}
                             />

src/shared/internal-calendar/standard/standard-cell.tsx

@@ -16,6 +16,7 @@ interface Props {
     allowDisabledSelection?: boolean | undefined;
     isNewSelection?: boolean | undefined;
     currentFocus?: FocusType | undefined;
+    showActiveMonthDaysOnly?: boolean | undefined;
     onSelect: (value: Dayjs, disabled: boolean) => void;
     onHover: (value: string, disabled: boolean) => void;
 }
@@ -32,6 +33,7 @@ export const StandardCell = ({
     disabledDates,
     allowDisabledSelection,
     isNewSelection,
+    showActiveMonthDaysOnly,
     onSelect,
     onHover,
 }: Props) => {
@@ -64,7 +66,9 @@ export const StandardCell = ({
         const props: CellStyleProps = {};
 
         if (calendarDate.month() !== date.month()) {
-            props.labelType = "unavailable";
+            props.labelType = showActiveMonthDaysOnly
+                ? "hidden"
+                : "unavailable";
         } else if (dayjs().isSame(date, "day") && !disabled) {
             props.labelType = "current";
             props.circleLeft = "current";
@@ -89,6 +93,11 @@ export const StandardCell = ({
         const isStart = date.isSame(startDate, "day");
         const isEnd = date.isSame(endDate, "day");
 
+        if (showActiveMonthDaysOnly && calendarDate.month() !== date.month()) {
+            props.labelType = "hidden";
+            return props;
+        }
+
         if ((startDate && isStart) || (endDate && isEnd)) {
             props.labelType = "selected";
             props.circleLeft = "selected-outline";

src/shared/internal-calendar/types.ts

@@ -13,6 +13,8 @@ export interface CommonCalendarProps {
     disabledDates?: string[] | undefined;
     /** Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable */
     allowDisabledSelection?: boolean | undefined;
+    /** Specifies if the calendar should display only dates for the selected month */
+    showActiveMonthDaysOnly?: boolean | undefined;
 }
 
 // =============================================================================

stories/calendar/calendar.mdx

@@ -37,6 +37,12 @@ When `allowDisabledSelection` is set, dates are visually disabled, but still sel
 
 <Canvas of={CalendarStories.AllowDisabledSelection} />
 
+<Heading3>Show active month days only</Heading3>
+
+You can use `showActiveMonthDaysOnly` to display only dates for the selected month.
+
+<Canvas of={CalendarStories.ShowActiveMonthDaysOnly} />
+
 <Secondary>Component API</Secondary>
 
 <PropsTable />

stories/calendar/calendar.stories.tsx

@@ -69,3 +69,13 @@ export const AllowDisabledSelection: StoryObj<Component> = {
         );
     },
 };
+
+export const ShowActiveMonthDaysOnly: StoryObj<Component> = {
+    render: () => {
+        return (
+            <FullWidthStoryContainer>
+                <Calendar showActiveMonthDaysOnly={true} />
+            </FullWidthStoryContainer>
+        );
+    },
+};

stories/calendar/props-table.tsx

@@ -81,6 +81,13 @@ const DATA: ApiTableSectionProps[] = [
                     "Called when there is a change in the current visible month and year",
                 propTypes: ["(value: YearMonthDisplay) => void"],
             },
+            {
+                name: "showActiveMonthDaysOnly",
+                description:
+                    "Specifies if the calendar should display only dates for the selected month",
+                propTypes: ["boolean"],
+                defaultValue: `false`,
+            },
             {
                 name: "onHover",
                 description: (