[DatePicker] Add 'PickerMonthChanged' event and 'DaysTemplate' parame…

…ter (#2336) * add 'PickerMonthChanged' event and 'DaysTemplate' property to date picker * add xml document for properties * change type of DaysTemplate of FluentDatePicker to nullable
microsoft · Jul 8, 2024 · ac91e57 · ac91e57
1 parent 49d7a18
commit ac91e57
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 1 deletion.
diff --git a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml
@@ -2644,6 +2644,21 @@
             Gets or sets the design of this input.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDatePicker.OnCalendarOpen">
+            <summary>
+            raised when calendar popup opened
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDatePicker.DaysTemplate">
+            <summary>
+            Defines the appearance of a Day cell.
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDatePicker.PickerMonthChanged">
+            <summary>
+            Fired when the display month changes.
+            </summary>
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentTimePicker.StyleValue">
             <summary />
         </member>

diff --git a/src/Core/Components/DateTime/FluentDatePicker.razor b/src/Core/Components/DateTime/FluentDatePicker.razor
@@ -36,6 +36,8 @@
                         DisabledDateFunc="@DisabledDateFunc"
                         DisabledSelectable="@DisabledSelectable"
                         Value="@Value"
-                        ValueChanged="@OnSelectedDateAsync" />
+                        ValueChanged="@OnSelectedDateAsync"
+                        DaysTemplate="@DaysTemplate"
+                        PickerMonthChanged="@PickerMonthChanged" />
     </FluentAnchoredRegion>
 }
diff --git a/src/Core/Components/DateTime/FluentDatePicker.razor.cs b/src/Core/Components/DateTime/FluentDatePicker.razor.cs
@@ -32,9 +32,24 @@ protected override string? ClassValue
     [Parameter]
     public virtual FluentInputAppearance Appearance { get; set; } = FluentInputAppearance.Outline;
 
+    /// <summary>
+    /// raised when calendar popup opened
+    /// </summary>
     [Parameter]
     public EventCallback<bool> OnCalendarOpen { get; set; }
 
+    /// <summary>
+    /// Defines the appearance of a Day cell.
+    /// </summary>
+    [Parameter]
+    public RenderFragment<FluentCalendarDay>? DaysTemplate { get; set; }
+
+    /// <summary>
+    /// Fired when the display month changes.
+    /// </summary>
+    [Parameter]
+    public virtual EventCallback<DateTime> PickerMonthChanged { get; set; }
+
     public bool Opened { get; set; } = false;
 
     protected override string? FormatValueAsString(DateTime? value)