Scheduler New View - MultiDay (#1852)

* Scheduler New View - MultiDay

* Clean up. Remove comment marker

Radzen.Blazor/RadzenMultiDayView.razor

@@ -0,0 +1,15 @@
+@using Radzen.Blazor
+@using Radzen.Blazor.Rendering
+
+@inherits SchedulerViewBase
+
+@code {
+    public override RenderFragment Render()
+    {
+        var appointments = Scheduler.GetAppointmentsInRange(StartDate, EndDate).ToList();
+
+        return @<CascadingValue Value=@Scheduler>
+                <WeekView HeaderFormat=@HeaderFormat MinutesPerSlot=@MinutesPerSlot StartDate=@StartDate EndDate=@EndDate StartTime=@StartTime EndTime=@EndTime Appointments=@appointments TimeFormat="@TimeFormat" AppointmentMove=OnAppointmentMove />
+            </CascadingValue>;
+    }
+}

Radzen.Blazor/RadzenMultiDayView.razor.cs

@@ -0,0 +1,105 @@
+using Microsoft.AspNetCore.Components;
+using Radzen.Blazor.Rendering;
+using System;
+
+namespace Radzen.Blazor
+{
+    /// <summary>
+    /// Displays the appointments in a multi-day view in <see cref="RadzenScheduler{TItem}" />
+    /// </summary>
+    /// <code>
+    /// &lt;RadzenScheduler Data="@appointments"&gt;
+    ///     &lt;RadzenMultiDayView /&gt;
+    /// &lt;/RadzenScheduler&gt;
+    /// </code>
+    public partial class RadzenMultiDayView : SchedulerViewBase
+    {
+        /// <inheritdoc />
+        public override string Icon => "calendar_view_week";
+
+        /// <inheritdoc />
+        [Parameter]
+        public override string Text { get; set; } = "Multi-Day";
+
+        /// <summary>
+        /// Gets or sets the time format.
+        /// </summary>
+        /// <value>The time format. Set to <c>h tt</c> by default.</value>
+        [Parameter]
+        public string TimeFormat { get; set; } = "h tt";
+
+        /// <summary>
+        /// Gets or sets the format used to display the header text.
+        /// </summary>
+        /// <value>The header text format. Set to <c>ddd</c> by default.</value>
+        [Parameter]
+        public string HeaderFormat { get; set; } = "ddd";
+
+        /// <summary>
+        /// Gets or sets the start time.
+        /// </summary>
+        /// <value>The start time.</value>
+        [Parameter]
+        public TimeSpan StartTime { get; set; } = TimeSpan.FromHours(8);
+
+        /// <summary>
+        /// Gets or sets the end time.
+        /// </summary>
+        /// <value>The end time.</value>
+        [Parameter]
+        public TimeSpan EndTime { get; set; } = TimeSpan.FromHours(24);
+
+        /// <summary>
+        /// Gets or sets slot size in minutes. Set to <c>30</c> by default.
+        /// </summary>
+        /// <value>The slot size in minutes.</value>
+        [Parameter]
+        public int MinutesPerSlot { get; set; } = 30;
+
+        /// <summary>
+        /// Gets or sets number of days to view. Set to <c>2</c> by default.
+        /// </summary>
+        /// <value>The number of days.</value>
+        [Parameter]
+        public int NumberOfDays { get; set; } = 2;
+        /// <inheritdoc />
+        public override DateTime StartDate
+        {
+            get
+            {
+                return Scheduler.CurrentDate.Date;
+            }
+        }
+
+        /// <inheritdoc />
+        public override DateTime EndDate
+        {
+            get
+            {
+                return StartDate.AddDays(NumberOfDays);
+            }
+        }
+
+        /// <inheritdoc />
+        public override string Title
+        {
+            get
+            {
+                return $"{StartDate.ToString(Scheduler.Culture.DateTimeFormat.ShortDatePattern)} - {EndDate.AddDays(-1).ToString(Scheduler.Culture.DateTimeFormat.ShortDatePattern)}";
+            }
+        }
+
+
+        /// <inheritdoc />
+        public override DateTime Next()
+        {
+            return Scheduler.CurrentDate.Date.AddDays(NumberOfDays);
+        }
+
+        /// <inheritdoc />
+        public override DateTime Prev()
+        {
+            return Scheduler.CurrentDate.Date.AddDays(-NumberOfDays);
+        }
+    }
+}

RadzenBlazorDemos/Pages/SchedulerMultiDay.razor

@@ -0,0 +1,128 @@
+@inject DialogService DialogService
+
+<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);height:4rem;">
+    <RadzenLabel Text="Number of days to view:" />
+    <RadzenSlider @bind-Value=@sliderNumberOfDays TValue="int" Min="1" Max="14" Style="margin-left:1.5rem;margin-right:1.5rem;" Change="NumberOfDaysChange" />
+    <RadzenLabel Text="@($"{sliderNumberOfDays}")" />
+    @if(sliderNumberOfDays==2)
+    {
+        <RadzenText TextStyle="TextStyle.Caption" Text="@($"(default)")" Style="margin-left:0.1rem;margin-top:0.5rem;" />
+    }
+</RadzenStack>
+
+<RadzenScheduler @ref=@scheduler SlotRender=@OnSlotRender style="height: 768px;" TItem="Appointment" Data=@appointments StartProperty="Start" EndProperty="End"
+TextProperty="Text" SelectedIndex="2"
+SlotSelect=@OnSlotSelect AppointmentSelect=@OnAppointmentSelect AppointmentRender=@OnAppointmentRender
+AppointmentMove=@OnAppointmentMove >
+    <RadzenDayView />
+    <RadzenWeekView />
+    <RadzenMultiDayView NumberOfDays="@sliderNumberOfDays" />
+    <RadzenMonthView />
+</RadzenScheduler>
+
+<EventConsole @ref=@console />
+
+@code {
+    RadzenScheduler<Appointment> scheduler;
+    EventConsole console;
+    Dictionary<DateTime, string> events = new Dictionary<DateTime, string>();
+
+    int sliderNumberOfDays { get; set; } = 2;
+
+    IList<Appointment> appointments = new List<Appointment>
+    {
+        new Appointment { Start = DateTime.Today.AddDays(-2), End = DateTime.Today.AddDays(-2), Text = "Birthday" },
+        new Appointment { Start = DateTime.Today.AddDays(-11), End = DateTime.Today.AddDays(-10), Text = "Day off" },
+        new Appointment { Start = DateTime.Today.AddDays(-10), End = DateTime.Today.AddDays(-8), Text = "Work from home" },
+        new Appointment { Start = DateTime.Today.AddHours(10), End = DateTime.Today.AddHours(12), Text = "Online meeting" },
+        new Appointment { Start = DateTime.Today.AddHours(10), End = DateTime.Today.AddHours(13), Text = "Skype call" },
+        new Appointment { Start = DateTime.Today.AddHours(14), End = DateTime.Today.AddHours(14).AddMinutes(30), Text = "Dentist appointment" },
+        new Appointment { Start = DateTime.Today.AddDays(1), End = DateTime.Today.AddDays(12), Text = "Vacation" },
+    };
+
+    async Task NumberOfDaysChange()
+    {
+        await scheduler.Reload();
+    }
+
+    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
+        };
+
+        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;
+        }
+
+        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();
+        }
+    }
+}

RadzenBlazorDemos/Pages/SchedulerPage.razor

@@ -31,6 +31,14 @@
     <SchedulerTooltips />
 </RadzenExample>
 
+<RadzenText Anchor="scheduler#multiday" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12 rz-mb-6">
+    Display any number of days side-by-side
+</RadzenText>
+
+<RadzenExample ComponentName="Scheduler" Example="SchedulerMultiDay" AdditionalSourceCodePages=@(new [] { "../Models/Appointment.cs" })>
+    <SchedulerMultiDay />
+</RadzenExample>
+
 <RadzenText Anchor="scheduler#keyboard-navigation" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
     Keyboard Navigation
 </RadzenText>