diff --git a/BlazorFluentUI/Components/Layout/NavMenu.razor b/BlazorFluentUI/Components/Layout/NavMenu.razor
index 6f10621..6d02fc4 100644
--- a/BlazorFluentUI/Components/Layout/NavMenu.razor
+++ b/BlazorFluentUI/Components/Layout/NavMenu.razor
@@ -38,6 +38,8 @@
                 <FluentNavLink Href="forminputswitch" Icon="@(new Icons.Regular.Size20.ToggleLeft())" IconColor="Color.Accent">Switch</FluentNavLink>
                 <FluentNavLink Href="forminputtextarea" Icon="@(new Icons.Regular.Size20.EditLineHorizontal3())" IconColor="Color.Accent">TextArea</FluentNavLink>
                 <FluentNavLink Href="forminputtexfield" Icon="@(new Icons.Regular.Size20.ColorLine())" IconColor="Color.Accent">TextField</FluentNavLink>
+                <FluentNavLink Href="forminputcalendar" Icon="@(new Icons.Regular.Size20.CalendarDate())" IconColor="Color.Accent">Calendar</FluentNavLink>
+                <FluentNavLink Href="forminputdatetimepicker" Icon="@(new Icons.Regular.Size20.Clock())" IconColor="Color.Accent">Date & Time Picker</FluentNavLink>
             </FluentNavGroup>
 
         </FluentNavMenu>
diff --git a/BlazorFluentUI/Components/Pages/FormInputs/FormInputCalendar.razor b/BlazorFluentUI/Components/Pages/FormInputs/FormInputCalendar.razor
new file mode 100644
index 0000000..bbc657b
--- /dev/null
+++ b/BlazorFluentUI/Components/Pages/FormInputs/FormInputCalendar.razor
@@ -0,0 +1,197 @@
+@page "/forminputcalendar"
+@using Microsoft.FluentUI.AspNetCore.Components.Extensions
+@using System.Globalization
+
+@rendermode RenderMode.InteractiveServer
+
+<FluentLabel Typo="Typography.H3">Date & Time</FluentLabel>
+<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
+<FluentLabel Typo="Typography.Body">
+    The <code>FluentDateCalendar</code> allows for setting selected and/or disabled dates and can handle event.
+</FluentLabel>
+
+<FluentLabel class="my-3" Typo="Typography.H4">Default Example</FluentLabel>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <FluentStack Orientation="Orientation.Vertical">
+        <div>
+            <h4>Day</h4>
+            <FluentCalendar DisabledDateFunc="@DisabledDay" @bind-Value="eselectedDay" @bind-PickerMonth="epickerDay" 
+                            View="CalendarViews.Days"/>
+            <p>Selected: @(eselectedDay?.ToString("yyyy-MM-dd"))</p>
+            <p>Panel: @(epickerDay.ToString("yyyy-MM-dd"))</p>
+        </div>
+        <div>
+            <h4>Month</h4>
+            <FluentCalendar DisabledDateFunc="@DisabledMonth" @bind-Value="eselectedMonth" @bind-PickerMonth="epickerMonth"
+                            View="CalendarViews.Months"/>
+            <p>Selected: @(eselectedMonth?.ToString("yyyy-MM-dd"))</p>
+            <p>Panel: @(epickerMonth.ToString("yyyy-MM-dd"))</p>
+        </div
+         <div>
+            <h4>Year</h4>
+            <FluentCalendar DisabledDateFunc="@DisabledYear" @bind-Value="eselectedYear" @bind-PickerMonth="epickerYear"
+                            View="CalendarViews.Years"/>
+            <p>Selected: @(eselectedMonth?.ToString("yyyy-MM-dd"))</p>
+            <p>Panel: @(epickerMonth.ToString("yyyy-MM-dd"))</p>
+        </div>
+    </FluentStack>
+</FluentCard>
+
+<FluentLabel class="my-3" Typo="Typography.H4">Customized</FluentLabel>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <FluentCalendar DisabledDateFunc="@DisabledDay" @bind-Value="cval">
+        <DaysTemplate>
+            @if (!context.IsInactive && (context.Date.Day == 5 || context.Date.Day == 15))
+            {
+                <div style="color:orangered; font-weight:bold">
+                    @context.DayNumber
+                </div>
+            }
+            else
+            {
+                @context.DayNumber
+            }
+        </DaysTemplate>
+    </FluentCalendar>
+    <p>Selected: @(cval?.ToString("yyyy-MM-dd"))</p>
+</FluentCard>
+
+<FluentLabel class="my-3" Typo="Typography.H4">Selection</FluentLabel>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <FluentStack Orientation="Orientation.Vertical">
+        <div>
+            <h4>Single</h4>
+            <FluentCalendar DisabledDateFunc="@DisabledDay"
+                            @bind-Value="sselectedDay"
+                            SelectMode="CalendarSelectMode.Single"/>
+            <p>Selected days: @(sselectedDay?.ToShortDateString())</p>
+        </div>
+        <div>
+            <h4>Range</h4>
+            <FluentCalendar DisabledDateFunc="@DisabledDay"
+                            @bind-SelectedDates="sselectedRange"
+                            SelectMode="CalendarSelectMode.Range"/>
+            <p>Selected days: @(DisplaySelectedDays(sselectedRange))</p>
+        </div>
+        <div>
+            <h4>Range with Oneweek</h4>
+            <FluentCalendar DisabledDateFunc="@DisabledDay"
+                            @bind-SelectedDates="sselectedRangeCustomized"
+                            SelectDatesHover="@SelectOneWeek"
+                            SelectMode="CalendarSelectMode.Range"/>
+            <p>Selected days: @(DisplaySelectedDays(sselectedRangeCustomized))</p>
+        </div>
+        <div>
+            <h4>Multiple (max 5 days)</h4>
+            <FluentCalendar DisabledDateFunc="@DisabledDay"
+                            @bind-SelectedDates="sselectedDays"
+                            @bind-SelectedDates:after="ValidateSelectedDays"
+                            SelectMode="CalendarSelectMode.Multiple"/>
+            <FluentMessageBar Visible="@sdisplayError" Intent="MessageIntent.Error">
+                You can select a maximum of 5 days. Delete a day to select a new one.
+            </FluentMessageBar>
+            <p>Selected days: @(DisplaySelectedDays(sselectedDays))</p>
+        </div>
+        <div>
+            <h4>Multiple with 3 days</h4>
+            <FluentCalendar DisabledDateFunc="@DisabledDay"
+                            @bind-SelectedDates="sselectedDaysCustomized"
+                            SelectDatesHover="@Select3Days"
+                            SelectMode="CalendarSelectMode.Multiple"/>
+            <p>Selected days: @(DisplaySelectedDays(sselectedDaysCustomized))</p>
+        </div>
+    </FluentStack>
+</FluentCard>
+
+<FluentLabel class="my-3" Typo="Typography.H4">Culture</FluentLabel>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <FluentGrid>
+        <FluentGridItem>
+            <FluentCalendar Culture="selectedCulture" @bind-Value="culVal"/>
+            <p>Selected days: @culVal?.ToString("yyyy-MM-dd")</p>
+            <FluentAutocomplete TOption="CultureInfo"
+                                AutoComplete="off"
+                                Label="Select Culture"
+                                Width="250px"
+                                OnOptionsSearch="OnSearch"
+                                Placeholder="Select country"
+                                MaximumOptionsSearch="int.MaxValue"
+                                MaximumSelectedOptions="1"
+                                Virtualize="true"
+                                OptionText="@(item => $"{item.DisplayName} - {item.Name}")"
+                                @bind-SelectedOptions="@selectedCultures"/>
+        </FluentGridItem>
+        <FluentGridItem>
+            <FluentCalendar @bind-Value="culVal"/>
+            <p>Selected days: @culVal?.ToString("yyyy-MM-dd")</p>
+        </FluentGridItem>
+    </FluentGrid>
+</FluentCard>
+
+@code {
+    DateTime? eselectedDay;
+    DateTime epickerDay = DateTime.Now;
+    DateTime? eselectedMonth;
+    DateTime epickerMonth = DateTime.Now;
+    DateTime? eselectedYear;
+    DateTime epickerYear = DateTime.Now;
+
+    bool DisabledDay(DateTime date) => date.Day == 3 || date.Day == 8 || date.Day == 20;
+    bool DisabledMonth(DateTime date) => date.Month == 3 || date.Month == 8;
+    bool DisabledYear(DateTime date) => date.Year == 2026 || date.Year == 2027;
+
+    DateTime? cval;
+
+    DateTime? sselectedDay;
+    IEnumerable<DateTime> sselectedRange = new List<DateTime>();
+    IEnumerable<DateTime> sselectedRangeCustomized = new List<DateTime>();
+    IEnumerable<DateTime> sselectedDays = new List<DateTime>();
+    IEnumerable<DateTime> sselectedDaysCustomized = new List<DateTime>();
+    private bool sdisplayError = false;
+
+    void ValidateSelectedDays()
+    {
+        if (sselectedDays.Count() > 5)
+        {
+            sselectedDays = sselectedDays.Except(new[] { sselectedDays.Last() });
+            sdisplayError = true;
+        }
+        else
+        {
+            sdisplayError = false;
+        }
+    }
+
+    IEnumerable<DateTime> SelectOneWeek(DateTime date)
+    {
+        return new[] { date.StartOfWeek(), date.StartOfWeek().AddDays(6) };
+    }
+
+    IEnumerable<DateTime> Select3Days(DateTime date)
+    {
+        return Enumerable.Range(0, 3).Select(v => date.AddDays(v));
+    }
+
+    private RenderFragment DisplaySelectedDays(IEnumerable<DateTime> days) => builder =>
+    {
+        builder.OpenElement(0, "ul");
+        foreach (var day in days)
+        {
+            builder.OpenElement(1, "li");
+            builder.AddContent(2, day.ToShortDateString());
+            builder.CloseElement();
+        }
+        builder.CloseElement();
+    };
+
+    DateTime? culVal;
+    IEnumerable<CultureInfo> selectedCultures = [new CultureInfo("fa-IR")];
+    CultureInfo selectedCulture => selectedCultures.FirstOrDefault() ?? CultureInfo.CurrentCulture;
+    CultureInfo[] Cultures = CultureInfo.GetCultures(CultureTypes.AllCultures);
+    void OnSearch(OptionsSearchEventArgs<CultureInfo> e)
+    {
+        e.Items = Cultures.Where(c =>
+            c.Name.Contains(e.Text, StringComparison.OrdinalIgnoreCase) ||
+            c.DisplayName.Contains(e.Text, StringComparison.OrdinalIgnoreCase));
+    }
+}
diff --git a/BlazorFluentUI/Components/Pages/FormInputs/FromInputDateTimePicker.razor b/BlazorFluentUI/Components/Pages/FormInputs/FromInputDateTimePicker.razor
new file mode 100644
index 0000000..542a3a5
--- /dev/null
+++ b/BlazorFluentUI/Components/Pages/FormInputs/FromInputDateTimePicker.razor
@@ -0,0 +1,33 @@
+@page "/forminputdatetimepicker"
+
+@rendermode RenderMode.InteractiveServer
+
+<FluentLabel Typo="Typography.H3">Date & Time</FluentLabel>
+<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
+<FluentLabel Typo="Typography.Body">
+    The <code>FluentDatePicker</code> allows for selecting dates from dropdown calendar.
+</FluentLabel>
+<FluentLabel Typo="Typography.Body">
+    The <code>FluentTimePicker</code> allows for picking a specific time of day.
+</FluentLabel>
+
+<FluentLabel class="my-3" Typo="Typography.H4">Default Example</FluentLabel>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <div>
+        <h4>DatePicker</h4>
+        <FluentDatePicker Label="Default" @bind-Value="eval" />
+        <FluentDatePicker Label="Days view" @bind-Value="eval" View="CalendarViews.Days" />
+        <FluentDatePicker Label="Months view" @bind-Value="eval" View="CalendarViews.Months" />
+        <FluentDatePicker Label="Years view" @bind-Value="eval" View="CalendarViews.Years" />
+        <p>Selected Date: @eval?.ToString("yyyy-MM-dd")</p>
+    </div>
+    <div>
+        <h4>TimePicker</h4>
+        <FluentTimePicker Label="Default" @bind-Value="eval"/>
+        <p>Selected Time: @eval?.ToString("T")</p>
+    </div>
+</FluentCard>
+
+@code {
+    private DateTime? eval = DateTime.Now;
+}