egwcorelib/EgwCoreLib.BlazorTest/Pages/TestRadzenSched.razor

@page "/TestRadzenSched"
@inject DialogService DialogService

<PageTitle>Test Radzen  Scheduler</PageTitle>

<div class="card">
    <div class="card-header">
        <h1>Test Radzen Scheduler</h1>
    </div>
    <div class="card-body">
        @if (currView == "year" || currView == "planner")
        {
            <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem" class="rz-p-4 rz-mb-6 rz-border-radius-1" Style="border: var(--rz-grid-cell-border);">
                <RadzenLabel Text="Schedule Start Month:" />
                <RadzenSelectBar @bind-Value="@startMonth" TextProperty="Text" ValueProperty="Value" Data="@(Enum.GetValues(typeof(Month)).Cast<Month>().Select(t => new { Text = $"{t}", Value = t }))" Size="ButtonSize.Small" class="rz-display-none rz-display-xl-flex" />
                <RadzenDropDown @bind-Value="@startMonth" Change="StartMonthChange" TextProperty="Text" ValueProperty="Value" Data="@(Enum.GetValues(typeof(Month)).Cast<Month>().Select(t => new { Text = $"{t}", Value = t }))" class="rz-display-inline-flex rz-display-xl-none" />
            </RadzenStack>
        }
        else
        {
            <h3>@currView</h3>
        }
        <div style="@schedHeight">
            <RadzenScheduler @ref=@scheduler SlotRender=@OnSlotRender style="height: 100%;" TItem="Appointment" Data=@appointments StartProperty="Start" EndProperty="End"
                             TextProperty="Text" SelectedIndex="2"
                             SlotSelect=@OnSlotSelect AppointmentSelect=@OnAppointmentSelect AppointmentRender=@OnAppointmentRender
                             AppointmentMove=@OnAppointmentMove LoadData=OnLoadData>
                <Template Context="appointments">
                    <div>
                        <strong>@appointments.Text</strong>
                    </div>
                    <small>
                        @appointments.Detail
                    </small>
                </Template>
                <ChildContent>
                    <RadzenDayView />
                    <RadzenWeekView />
                    <RadzenMonthView />
                    <RadzenYearPlannerView StartMonth="@startMonth" />
                    @* <RadzenYearTimelineView StartMonth="@startMonth" /> *@
                    <RadzenYearView StartMonth="@startMonth" />
                </ChildContent>
            </RadzenScheduler>
        </div>
        <EventConsole @ref=@console />
    </div>
</div>

@code {

    /* ------------------------------------------------
     * Radzen Blazor
     * https://www.radzen.com/blazor-components/
     *
     * dettagli installazione:
     * NET6: https://blazor.radzen.com/get-started/net6-server
     * NET8: https://blazor.radzen.com/get-started/net8
     *
     * Test componente Scheduler:
     * https://blazor.radzen.com/scheduler?theme=material3
     * https://blazor.radzen.com/docs/guides/components/scheduler.html
     * ------------------------------------------------*/

    RadzenScheduler<Appointment> scheduler;
    EventConsole console;
    Dictionary<DateTime, string> events = new Dictionary<DateTime, string>();

    Month startMonth = Month.January;

    bool showSelMonth { get; set; } = true;

    async Task StartMonthChange()
    {
        await scheduler.Reload();
    }


    IList<Appointment> appointments = new List<Appointment>
    {
        new Appointment { Start = DateTime.Today.AddDays(-2), End = DateTime.Today.AddDays(-2), Text = "Birthday", Detail="My Birthday" },
        new Appointment { Start = DateTime.Today.AddDays(-11), End = DateTime.Today.AddDays(-10), Text = "Day off", Detail="Rest required" },
        new Appointment { Start = DateTime.Today.AddDays(-10), End = DateTime.Today.AddDays(-8), Text = "Work from home", Detail="WIP from remote" },
        new Appointment { Start = DateTime.Today.AddHours(10), End = DateTime.Today.AddHours(12), Text = "Online meeting", Detail="Teams" },
        new Appointment { Start = DateTime.Today.AddHours(10), End = DateTime.Today.AddHours(13), Text = "Skype call", Detail="Google Meet?" },
        new Appointment { Start = DateTime.Today.AddHours(14), End = DateTime.Today.AddHours(14).AddMinutes(30), Text = "Dentist appointment", Detail="Anestetics" },
        new Appointment { Start = DateTime.Today.AddDays(1), End = DateTime.Today.AddDays(12), Text = "Vacation", Detail="Long awaited!!!" },
    };

    void OnSlotRender(SchedulerSlotRenderEventArgs args)
    {
        // Highlight today in month view
        if (args.View.Text == "Month" && args.Start.Date == DateTime.Today)
        {
            args.Attributes["style"] = "background: var(--rz-scheduler-highlight-background-color, rgba(255,220,40,.2));";
        }

        // Highlight working hours (9-18)
        if ((args.View.Text == "Week" || args.View.Text == "Day") && args.Start.Hour > 8 && args.Start.Hour < 19)
        {
            args.Attributes["style"] = "background: var(--rz-scheduler-highlight-background-color, rgba(255,220,40,.2));";
        }
    }

    async Task OnSlotSelect(SchedulerSlotSelectEventArgs args)
    {
        console.Log($"SlotSelect: Start={args.Start} End={args.End}");

        if (args.View.Text != "Year")
        {
            Appointment data = await DialogService.OpenAsync<AddAppointmentPage>("Add Appointment",
                new Dictionary<string, object> { { "Start", args.Start }, { "End", args.End } });

            if (data != null)
            {
                appointments.Add(data);
                // Either call the Reload method or reassign the Data property of the Scheduler
                await scheduler.Reload();
            }
        }
    }

    async Task OnAppointmentSelect(SchedulerAppointmentSelectEventArgs<Appointment> args)
    {
        console.Log($"AppointmentSelect: Appointment={args.Data.Text}");

        var copy = new Appointment
            {
                Start = args.Data.Start,
                End = args.Data.End,
                Text = args.Data.Text,
                Detail = args.Data.Detail
            };

        var data = await DialogService.OpenAsync<EditAppointmentPage>("Edit Appointment", new Dictionary<string, object> { { "Appointment", copy } });

        if (data != null)
        {
            // Update the appointment
            args.Data.Start = data.Start;
            args.Data.End = data.End;
            args.Data.Text = data.Text;
            args.Data.Detail = data.Detail;
        }

        await scheduler.Reload();
    }

    void OnAppointmentRender(SchedulerAppointmentRenderEventArgs<Appointment> args)
    {
        // Never call StateHasChanged in AppointmentRender - would lead to infinite loop

        if (args.Data.Text == "Birthday")
        {
            args.Attributes["style"] = "background: red";
        }
    }

    async Task OnAppointmentMove(SchedulerAppointmentMoveEventArgs args)
    {
        var draggedAppointment = appointments.FirstOrDefault(x => x == args.Appointment.Data);

        if (draggedAppointment != null)
        {
            draggedAppointment.Start = draggedAppointment.Start + args.TimeSpan;

            draggedAppointment.End = draggedAppointment.End + args.TimeSpan;

            await scheduler.Reload();
        }
    }

    async Task OnLoadData(SchedulerLoadDataEventArgs args)
    {
        await Task.Delay(1);
        currView = scheduler.SelectedView.Text.ToLowerInvariant();

        schedHeight = (currView == "year" || currView == "planner") ? "height: 50rem;" : "height: 40rem;";
        // // Get the appointments for between the Start and End
        // data = await MyAppointmentService.GetData(args.Start, args.End);
    }
    private string currView { get; set; } = "";
    private string schedHeight { get; set; } = "height: 40rem;";
}