@page "/scheduler"
@page "/docs/guides/components/scheduler.html"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    Scheduler
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    Demonstration and configuration of the Radzen Blazor <strong>Scheduler</strong> component.
</RadzenText>

<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
    These demos showcase a full-featured appointment scheduler with multiple view types (day/week/month/year planner/timeline), appointment tooltips, multi-day displays, drag-and-drop appointment management, and inline add/edit dialogs.
</RadzenText>

<RadzenText Anchor="scheduler#views" TextStyle="TextStyle.H5" TagName="TagName.H2">
    Day, week and month views
</RadzenText>
<RadzenExample ComponentName="Scheduler" Example="SchedulerConfig" AdditionalSourceCodePages=@(new [] { "/demos/Models/Appointment.cs", "AddAppointmentPage.razor", "EditAppointmentPage.razor" })>
    <SchedulerConfig />
</RadzenExample>

<RadzenText Anchor="scheduler#timeline" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Year Planner and Timeline views
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Plan out the whole year with <code>&lt;RadzenYearPlannerView /&gt;</code> and <code>&lt;RadzenYearTimelineView /&gt;</code>.
</RadzenText>

<RadzenExample ComponentName="Scheduler" Example="SchedulerPlannerTimeline" AdditionalSourceCodePages=@(new [] { "/demos/Models/Appointment.cs", "AddAppointmentPage.razor", "EditAppointmentPage.razor" })>
    <SchedulerPlannerTimeline />
</RadzenExample>

<RadzenText Anchor="scheduler#tooltips" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Display additional content when the user hovers an appointment
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use the <code>SlotRender</code> event and templates to display tooltips with additional appointment details on hover.
</RadzenText>
<RadzenExample ComponentName="Scheduler" Example="SchedulerTooltips" AdditionalSourceCodePages=@(new [] { "/demos/Models/Appointment.cs" })>
    <SchedulerTooltips />
</RadzenExample>

<RadzenText Anchor="scheduler#multiday" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Display any number of days side-by-side
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Configure the scheduler to display multiple days simultaneously for better week or multi-day planning views.
</RadzenText>
<RadzenExample ComponentName="Scheduler" Example="SchedulerMultiDay" AdditionalSourceCodePages=@(new [] { "/demos/Models/Appointment.cs" })>
    <SchedulerMultiDay />
</RadzenExample>

<RadzenText Anchor="scheduler#keyboard-navigation" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Keyboard Navigation
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    The following keys or key combinations provide a way for users to navigate and interact with Radzen Blazor Scheduler component.
</RadzenText>

<KeyboardNavigationDataGrid Data="@shortcuts" />

@code {
    public List<KeyboardShortcut> shortcuts = new()
    {
        new KeyboardShortcut { Key = "Tab", Action = "Navigate to a Scheduler component." },
        new KeyboardShortcut { Key = "Tab on focused Scheduler", Action = "Navigate forward across available scheduler components." },
        new KeyboardShortcut { Key = "Shift + Tab on focused Scheduler", Action = "Navigate backward across available scheduler components." },
        new KeyboardShortcut { Key = "RightArrow on week/month view or year view selected month", Action = "Focus previous day." },
        new KeyboardShortcut { Key = "LeftArrow on week/month view or year view selected month", Action = "Focus next day." },
        new KeyboardShortcut { Key = "UpArrow on week/month view or year view selected month", Action = "Focus same day from previous week." },
        new KeyboardShortcut { Key = "DownArrow on week/month view or year view selected month", Action = "Focus same day from next week." },
        new KeyboardShortcut { Key = "UpArrow on day view", Action = "Focus previous hour." },
        new KeyboardShortcut { Key = "DownArrow on day view", Action = "Focus next hour." },
        new KeyboardShortcut { Key = "UpArrow on appointment", Action = "Focus previous appointment." },
        new KeyboardShortcut { Key = "DownArrow on appointment", Action = "Focus next appointment." },
        new KeyboardShortcut { Key = "Space on appointment", Action = "Edit appointment." },
        new KeyboardShortcut { Key = "Enter", Action = "Add appointment." }
    };
}
