calendar restricted dates

Author: matteo

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,14 +247,34 @@ export class DateTimePicker extends React.Component<IDateTimePickerProps, IDateT
       maxDate,
       minutesIncrementStep,
       showClearDate = false,
-      showClearDateIcon = 'RemoveEvent'
+      showClearDateIcon = 'RemoveEvent',
+      restrictedDates = []
     } = this.props;
 
     const { textErrorMessage } = dateStrings;
     const hours: number = value !== null ? value.getHours() : this.state.hours;
     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)
                 }}

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[];
+
 }

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; }} /> */}