Calendar

@using System.ComponentModel.DataAnnotations

<Form Model="Model" FormName="calendar-limits" OnValidSubmit="Save">
    <Calendar @bind-Value="Model!.Delivery" Hint="In March 2027." />
    <Calendar @bind-Value="Model!.Pickup" Min="@(new DateOnly(2027, 3, 8))" Max="@(new DateOnly(2027, 3, 19))" Hint="From March 8 to 19." />
    <Row><Button Submit>Book</Button></Row>
    @if (_saved is { } saved)
    {
        <Alert Status="Status.Success">Booked: delivery @saved.Delivery, pickup @saved.Pickup.</Alert>
    }
</Form>

@code {
    [SupplyParameterFromForm(FormName = "calendar-limits")]
    private Booking? Model { get; set; }

    // What was saved, not the fields: on an interactive page they follow typing.
    private (DateOnly? Delivery, DateOnly Pickup)? _saved;

    protected override void OnInitialized() => Model ??= new();

    private void Save() => _saved = (Model!.Delivery, Model.Pickup);

    public sealed class Booking
    {
        [Range(typeof(DateOnly), "2027-03-01", "2027-03-31", ErrorMessage = "Pick a day in March 2027.")]
        public DateOnly? Delivery { get; set; } = new(2027, 3, 3);

        public DateOnly Pickup { get; set; } = new(2027, 3, 10);
    }
}

<style>
    .pay-day {
        font-weight: 600;
        box-shadow: inset 0 0 0 1px currentColor;
    }
</style>

<Form Model="Model" FormName="calendar-days" OnValidSubmit="Save" Columns="2">
    <Calendar @bind-Value="Model!.Visit" DateDisabled="IsWeekend" DateDisabledWindow="TimeSpan.FromDays(90)" Hint="On a weekday, within 90 days." />
    <Calendar @bind-Value="Model!.Transfer" DayClass="@(day => day.Day == 15 ? "pay-day" : null)" Hint="Paydays are outlined." />
    <Row ColSpan="GridSpan.Full"><Button Submit>Save dates</Button></Row>
    @if (_saved is { } saved)
    {
        <Alert ColSpan="GridSpan.Full" Status="Status.Success">Saved: visit on @saved.</Alert>
    }
</Form>

@code {
    [SupplyParameterFromForm(FormName = "calendar-days")]
    private Dates? Model { get; set; }

    // What was saved, not the field: on an interactive page it follows the choice.
    private DateOnly? _saved;

    protected override void OnInitialized() => Model ??= new();

    private void Save() => _saved = Model!.Visit;

    private static bool IsWeekend(DateOnly day) => day.DayOfWeek is DayOfWeek.Saturday or DayOfWeek.Sunday;

    public sealed class Dates
    {
        public DateOnly Visit { get; set; } = new(2027, 3, 10);
        public DateOnly Transfer { get; set; } = new(2027, 3, 10);
    }
}

<Form Model="Model" FormName="calendar-periods" OnValidSubmit="Save" Grow>
    <Calendar @bind-Value="Model!.Starts" Type="DateFieldType.Month" />
    <Row><Button Submit>Save</Button></Row>
    @if (_saved is { } saved)
    {
        <Alert Status="Status.Success">Starts @saved.ToString("MMMM yyyy").</Alert>
    }
</Form>

@code {
    [SupplyParameterFromForm(FormName = "calendar-periods")]
    private Plan? Model { get; set; }

    private DateOnly? _saved;

    protected override void OnInitialized() => Model ??= new();

    private void Save() => _saved = Model!.Starts;

    public sealed class Plan
    {
        public DateOnly? Starts { get; set; } = new DateOnly(2027, 3, 1);
    }
}

@using System.Globalization

<Form Model="Model" FormName="calendar-culture" Columns="2">
    <Calendar @bind-Value="Model!.Day" Label="German, with week numbers" Culture="@(new CultureInfo("de-DE"))" ShowWeekNumbers />
    <Calendar @bind-Value="Model!.Other" Label="Monday first, this month only" FirstDayOfWeek="DayOfWeek.Monday" ShowAdjacentDays="false" />
</Form>

@code {
    [SupplyParameterFromForm(FormName = "calendar-culture")]
    private Dates? Model { get; set; }

    protected override void OnInitialized() => Model ??= new();

    public sealed class Dates
    {
        public DateOnly Day { get; set; } = new(2027, 1, 14);
        public DateOnly Other { get; set; } = new(2027, 1, 14);
    }
}

<Form Model="Model" FormName="calendar-states" Columns="2">
    <Calendar @bind-Value="Model!.Small" Label="Small" Size="ControlSize.Sm" />
    <Calendar @bind-Value="Model!.Large" Label="Large" Size="ControlSize.Lg" />
    <Calendar @bind-Value="Model!.Signed" Label="Signed on" ReadOnly Hint="Read-only: posted, but can't be changed." />
    <Calendar @bind-Value="Model!.Renews" Label="Renews on" Disabled Hint="Disabled: not posted." />
</Form>

@code {
    [SupplyParameterFromForm(FormName = "calendar-states")]
    private Contract? Model { get; set; }

    protected override void OnInitialized() => Model ??= new();

    public sealed class Contract
    {
        public DateOnly Small { get; set; } = new(2027, 5, 12);
        public DateOnly Large { get; set; } = new(2027, 5, 12);
        public DateOnly Signed { get; set; } = new(2027, 5, 12);
        public DateOnly Renews { get; set; } = new(2027, 5, 12);
    }
}