From 9277bd2249845c27e64f3cb77d91d4afcdfd455c Mon Sep 17 00:00:00 2001
From: matteo <>
Date: Wed, 31 Jan 2024 00:08:22 +0100
Subject: [PATCH 1/2] calendar restricted dates

---
 .../dateTimePicker/DateTimePicker.tsx         | 24 ++++++++++++++++++-
 .../dateTimePicker/IDateTimePickerProps.ts    |  6 +++++
 .../controlsTest/components/ControlsTest.tsx  |  2 ++
 3 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/src/controls/dateTimePicker/DateTimePicker.tsx b/src/controls/dateTimePicker/DateTimePicker.tsx
index 247a228f0..033e3e4e3 100644
--- a/src/controls/dateTimePicker/DateTimePicker.tsx
+++ b/src/controls/dateTimePicker/DateTimePicker.tsx
@@ -1,6 +1,7 @@
 import * as React from "react";
 import { isEqual } from '@microsoft/sp-lodash-subset';
 import { TimeConvention, DateConvention } from "./DateTimeConventions";
+import { Calendar } from "@fluentui/react";
 import { DatePicker } from "@fluentui/react/lib/DatePicker";
 import { Label } from "@fluentui/react/lib/Label";
 import { IconButton } from "@fluentui/react/lib/Button";
@@ -246,7 +247,8 @@ export class DateTimePicker extends React.Component<IDateTimePickerProps, IDateT
       maxDate,
       minutesIncrementStep,
       showClearDate = false,
-      showClearDateIcon = 'RemoveEvent'
+      showClearDateIcon = 'RemoveEvent',
+      restrictedDates = []
     } = this.props;
 
     const { textErrorMessage } = dateStrings;
@@ -254,6 +256,25 @@ export class DateTimePicker extends React.Component<IDateTimePickerProps, IDateT
     const minutes: number = value !== null ? value.getMinutes() : this.state.minutes;
     const seconds: number = value !== null ? value.getSeconds() : this.state.seconds;
 
+    const CalendarView = (): JSX.Element => {
+      return (
+        <Calendar
+          value={initialPickerDate}
+          strings={dateStrings}
+          isMonthPickerVisible={isMonthPickerVisible}
+          onSelectDate={this.onSelectDate}
+          firstDayOfWeek={firstDayOfWeek}
+          firstWeekOfYear={firstWeekOfYear}
+          showGoToToday={showGoToToday}
+          showMonthPickerAsOverlay={showMonthPickerAsOverlay}
+          showWeekNumbers={showWeekNumbers}
+          minDate={minDate}
+          maxDate={maxDate}
+          restrictedDates={restrictedDates}
+        />
+      );
+    };
+
     // Check if the time element needs to be rendered
     let timeElm: JSX.Element = <div className="hidden" />;
 
@@ -341,6 +362,7 @@ export class DateTimePicker extends React.Component<IDateTimePickerProps, IDateT
                 initialPickerDate={initialPickerDate}
                 minDate={minDate}
                 maxDate={maxDate}
+                calendarAs={restrictedDates.length ? CalendarView : undefined}
                 textField={{
                   onChange: (e, newValue) => this.handleTextChange(e, newValue, textErrorMessage)
                 }}
diff --git a/src/controls/dateTimePicker/IDateTimePickerProps.ts b/src/controls/dateTimePicker/IDateTimePickerProps.ts
index 1cd15fd7e..67b73557c 100644
--- a/src/controls/dateTimePicker/IDateTimePickerProps.ts
+++ b/src/controls/dateTimePicker/IDateTimePickerProps.ts
@@ -153,4 +153,10 @@ export interface IDateTimePickerProps {
    * Icon used for clearDate iconbutton. Defaults to RemoveEvent
    */
   showClearDateIcon?: string;
+
+  /**
+   * If set the Calendar will not allow selection of dates in this array.
+   */
+  restrictedDates?: Date[];
+
 }
diff --git a/src/webparts/controlsTest/components/ControlsTest.tsx b/src/webparts/controlsTest/components/ControlsTest.tsx
index 1c726f203..ac0146eca 100644
--- a/src/webparts/controlsTest/components/ControlsTest.tsx
+++ b/src/webparts/controlsTest/components/ControlsTest.tsx
@@ -1449,6 +1449,8 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
           />
 
           <DateTimePicker label="DateTime Picker (disabled)" disabled={true} />
+
+          <DateTimePicker label="DateTime Picker (restricted dates)" isMonthPickerVisible={false} showSeconds={false} onChange={(value) => console.log("DateTimePicker value:", value)} placeholder="Pick a date" restrictedDates={[new Date(2024,1,15), new Date(2024,1,16), new Date(2024,1,17)]}/>
         </div>
         <div id="RichTextDiv" className={styles.container} hidden={!isRichTextDivVisible}>
           {/* <RichText isEditMode={this.props.displayMode === DisplayMode.Edit} onChange={value => { this.richTextValue = value; return value; }} /> */}

From 2013506c97f97cf051428141cbbf4742ced9e8ba Mon Sep 17 00:00:00 2001
From: Joel Rodrigues <jrodrigues@storm.ie>
Date: Mon, 12 Feb 2024 22:13:39 +0000
Subject: [PATCH 2/2] update import and DateTimePicker docs

---
 docs/documentation/docs/controls/DateTimePicker.md | 10 ++++++----
 src/controls/dateTimePicker/DateTimePicker.tsx     |  2 +-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/docs/documentation/docs/controls/DateTimePicker.md b/docs/documentation/docs/controls/DateTimePicker.md
index d5a91f926..4cdb1891e 100644
--- a/docs/documentation/docs/controls/DateTimePicker.md
+++ b/docs/documentation/docs/controls/DateTimePicker.md
@@ -27,6 +27,7 @@ Here are some examples of the control:
 ```TypeScript
 import { DateTimePicker, DateConvention, TimeConvention } from '@pnp/spfx-controls-react/lib/DateTimePicker';
 ```
+
 - Use the `DateTimePicker` control in your code as follows, either as an uncontrolled or a controlled component:
 
 ```TypeScript
@@ -47,7 +48,6 @@ import { DateTimePicker, DateConvention, TimeConvention } from '@pnp/spfx-contro
 
 The `DateTimePicker` control can be configured with the following properties:
 
-
 | Property | Type | Required | Description |
 | ---- | ---- | ---- | ---- |
 | label | string | no | Property field label displayed on top. |
@@ -72,12 +72,13 @@ The `DateTimePicker` control can be configured with the following properties:
 | timeDisplayControlType | TimeDisplayControlType | no | Specifies what type of control to use when rendering time part. |
 | showLabels | boolean | no | Specifies if labels in front of date and time parts should be rendered. |
 | placeholder | string | no | Placeholder text for the DatePicker. |
-| initialPickerDate | Date | no | The initially highlighted date in the calendar picker
+| initialPickerDate | Date | no | The initially highlighted date in the calendar picker |
 | maxDate | Date | no | The maximum allowable date. |
 | minDate | Date | no | The minimum allowable date. |
 | minutesIncrementStep | MinutesIncrement | no | Specifies minutes' increment step for `TimeDisplayControlType.Dropdow` |
-| showClearDate | boolean | no | Controls whether the clearDate iconbutton must be available when date is selected, default to false
-| showClearDateIcon | string | no | Controls the icon used for clearDate iconbutton. Defaults to 'RemoveEvent'
+| showClearDate | boolean | no | Controls whether the clearDate iconbutton must be available when date is selected, default to false |
+| showClearDateIcon | string | no | Controls the icon used for clearDate iconbutton. Defaults to 'RemoveEvent' |
+| restrictedDates | Date[] | no | If set the Calendar will not allow selection of dates in this array. |
 
 Enum `TimeDisplayControlType`
 
@@ -112,6 +113,7 @@ Interface `IDateTimePickerStrings` extends [IDatePickerStrings](https://develope
 | textErrorMessage | string | no | Error message when text is entered in the date picker. |
 
 Type `MinutesIncrement`
+
 ```typescript
 type MinutesIncrement = 1 | 5 | 10 | 15 | 30;
 ```
diff --git a/src/controls/dateTimePicker/DateTimePicker.tsx b/src/controls/dateTimePicker/DateTimePicker.tsx
index 033e3e4e3..2a3ee644d 100644
--- a/src/controls/dateTimePicker/DateTimePicker.tsx
+++ b/src/controls/dateTimePicker/DateTimePicker.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import { isEqual } from '@microsoft/sp-lodash-subset';
 import { TimeConvention, DateConvention } from "./DateTimeConventions";
-import { Calendar } from "@fluentui/react";
+import { Calendar } from "@fluentui/react/lib/Calendar";
 import { DatePicker } from "@fluentui/react/lib/DatePicker";
 import { Label } from "@fluentui/react/lib/Label";
 import { IconButton } from "@fluentui/react/lib/Button";