Add Agenda view documentation article (#2432)

* docs(Scheduler): add Agenda view documentation article

* docs(Scheduler): apply requested changes

* docs(Scheduler): apply recommendations

_contentTemplates/scheduler/views.md

@@ -557,6 +557,7 @@ public class Appointment
             <SchedulerMultiDayView></SchedulerMultiDayView>
             <SchedulerMonthView></SchedulerMonthView>
             <SchedulerTimelineView ColumnWidth="30"></SchedulerTimelineView>
+            <SchedulerAgendaView></SchedulerAgendaView>
         </SchedulerViews>
         <SchedulerResources>
             <SchedulerResource Field="Room" Title="Edit Room" Data="@SchedulerResources"></SchedulerResource>

components/scheduler/resource-grouping.md

@@ -35,13 +35,6 @@ The settings tag will have the following Parameters:
 * `Resources(List<string>)` - provides a list of one or more resource names, which will be used to group the events.
 * `Orientation(SchedulerGroupOrientation)` - has two values: `Horizontal` (default) and `Vertical`. Determines the direction in which the resource tables are rendered.
 
-For more information on grouping by resources in each view, refer to the following sections:
-
-* [**Day** view grouping]({%slug scheduler-views-day%}#resource-grouping-in-the-day-view)
-* [**MultiDay** view grouping]({%slug scheduler-views-multiday%}#resource-grouping-in-the-multiday-view)
-* [**Week** view grouping]({%slug scheduler-views-week%}#resource-grouping-in-the-week-view)
-* [**Month** view grouping]({%slug scheduler-views-month%}#resource-grouping-in-the-month-view)
-
 ## Examples
 The examples below showcase [resource grouping by one resource](#resource-grouping-by-one-resource) and [resource grouping by multiple resources](#resource-grouping-by-multiple-resources) respectively.
 
@@ -80,6 +73,7 @@ The examples below showcase [resource grouping by one resource](#resource-groupi
             <SchedulerWeekView></SchedulerWeekView>
             <SchedulerMultiDayView></SchedulerMultiDayView>
             <SchedulerMonthView></SchedulerMonthView>
+            <SchedulerAgendaView></SchedulerAgendaView>
         </SchedulerViews>
         <SchedulerResources>
             <SchedulerResource Field="Manager" Title="Manager" Data="@SchedulerManagers"></SchedulerResource>

components/scheduler/views/agenda.md

@@ -0,0 +1,114 @@
+---
+title: Agenda
+page_title: Scheduler - Agenda View
+description: Agenda View in the Scheduler for Blazor.
+slug: scheduler-views-agenda
+tags: telerik,blazor,scheduler,view,agenda
+published: True
+position: 6
+---
+
+# Agenda View
+
+The Agenda view of the Scheduler for Blazor shows a weekly summary (or a custom period set by the user) in a table format.
+
+In this article:
+
+* [View Parameters](#view-parameters)
+* [Example](#example)
+
+## View Parameters
+
+The following parameters allow you to configure the Agenda view:
+
+@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
+
+| Attribute | Type and Default Value | Description |
+| --- | --- | --- |
+| `NumberOfDays` | `int` <br /> (`7`) | Represents the number of days shown in the view. |
+| `HideEmptyAgendaDays` | `bool` <br /> (`true`) | Defines whether dates with no appointments are rendered. |
+
+## Example
+
+>tip You can declare other views as well, this example adds only the Agenda view for brevity.
+
+>caption Declare the Agenda view in the markup
+
+````CSHTML
+@* Define the Agenda view. *@
+
+<TelerikScheduler Data="@Appointments" @bind-Date="@StartDate" Width="800px">
+    <SchedulerViews>
+        <SchedulerAgendaView HideEmptyAgendaDays="@HideEmptyDays" />
+    </SchedulerViews>
+</TelerikScheduler>
+
+@code {
+    private DateTime StartDate { get; set; } = new DateTime(2024, 10, 22);
+
+    private bool HideEmptyDays { get; set; }
+
+    private List<SchedulerAppointment> Appointments = new List<SchedulerAppointment>()
+{
+    new SchedulerAppointment
+    {
+        Title = "Team Meeting",
+        Description = "Discuss the project progress.",
+        Start = new DateTime(2024, 10, 14, 10, 00, 0),
+        End = new DateTime(2024, 10, 14, 11, 00, 0)
+    },
+    new SchedulerAppointment
+    {
+        Title = "Doctor Appointment",
+        Description = "Routine check-up.",
+        Start = new DateTime(2024, 10, 16, 9, 30, 0),
+        End = new DateTime(2024, 10, 16, 10, 00, 0)
+    },
+    new SchedulerAppointment
+    {
+        Title = "Client Call",
+        Description = "Quarterly review with the client.",
+        Start = new DateTime(2024, 10, 22, 14, 00, 0),
+        End = new DateTime(2024, 10, 22, 15, 00, 0)
+    },
+    new SchedulerAppointment
+    {
+        Title = "Team Outing",
+        Description = "Lunch with the team.",
+        Start = new DateTime(2024, 10, 23, 12, 30, 0),
+        End = new DateTime(2024, 10, 23, 14, 00, 0)
+    },
+    new SchedulerAppointment
+    {
+        Title = "Webinar",
+        Description = "Industry trends and insights.",
+        Start = new DateTime(2024, 10, 24, 16, 00, 0),
+        End = new DateTime(2024, 10, 24, 17, 30, 0)
+    },
+    new SchedulerAppointment
+    {
+        Title = "Project Deadline",
+        Description = "Final submission of deliverables.",
+        Start = new DateTime(2024, 10, 29, 9, 00, 0),
+        End = new DateTime(2024, 10, 29, 12, 00, 0)
+    }
+};
+
+    public class SchedulerAppointment
+    {
+        public string Title { get; set; }
+        public string Description { get; set; }
+        public DateTime Start { get; set; }
+        public DateTime End { get; set; }
+        public bool IsAllDay { get; set; }
+    }
+}
+````
+
+## See Also
+
+* [Views]({%slug scheduler-views-overview%})
+* [Navigation]({%slug scheduler-navigation%})
+* [Live Demo: Scheduler Agenda View](https://demos.telerik.com/blazor-ui/scheduler/agenda-view)
+* [Resource Grouping]({%slug scheduler-resource-grouping%})
+

components/scheduler/views/day.md

@@ -19,7 +19,6 @@ In this article:
 * [View Parameters](#view-parameters)
 	* [Slots](#slots)
 * [Example](#example)
-* [Resource Grouping](#resource-grouping-in-the-day-view)
 
 @[template](/_contentTemplates/scheduler/views.md#day-views-common-properties)
 
@@ -29,12 +28,12 @@ In this article:
 
 ## Example
 
->caption Declare the Day View in the markup
+>tip You can declare other views as well, this example adds only the Day view for brevity.
 
->tip You can declare other views as well, this example adds only the day view for brevity.
+>caption Declare the Day view in the markup
 
 ````CSHTML
-@* Define the day view. *@
+@* Define the Day view. *@
 
 <TelerikScheduler Data="@Appointments" @bind-Date="@StartDate" Height="600px">
     <SchedulerViews>
@@ -96,16 +95,9 @@ In this article:
 }
 ````
 
-## Resource Grouping in the Day View
-
-You can configure the Day view to display events that are [grouped by a resource]({%slug scheduler-resource-grouping%}).
-
->caption Resource Grouping in a Day view.
-
-@[template](/_contentTemplates/scheduler/views.md#resource-grouping-code-snippet-for-examples)
-
 ## See Also
 
 * [Views]({%slug scheduler-views-overview%})
 * [Navigation]({%slug scheduler-navigation%})
 * [Live Demo: Scheduler Day View](https://demos.telerik.com/blazor-ui/scheduler/day-view)
+* [Resource Grouping]({%slug scheduler-resource-grouping%})

components/scheduler/views/month.md

@@ -19,7 +19,6 @@ In this article:
 
 * [View Parameters](#view-parameters)
 * [Example](#example)
-* [Resource Grouping](#resource-grouping-in-the-month-view)
 
 ## View Parameters
 
@@ -38,12 +37,12 @@ If the `ItemsPerSlot` parameter is a zero or a negative value, an `ArgumentOutOf
 
 ## Example
 
->caption Declare the Month and Day Views in the markup
+>tip You can declare other views as well, this example adds only the Month and Day views for brevity.
 
->tip You can declare other views as well, this example adds only the month and day views for brevity.
+>caption Declare the Month and Day views in the markup
 
 ````CSHTML
-@* Define the month view. *@
+@* Define the Month view. *@
 
 <TelerikScheduler Data="@Appointments" @bind-Date="@StartDate" @bind-View="@SelectedView" Height="600px">
     <SchedulerViews>
@@ -140,16 +139,9 @@ If the `ItemsPerSlot` parameter is a zero or a negative value, an `ArgumentOutOf
 }
 ````
 
-## Resource Grouping in the Month View
-
-You can configure the Month view to display appointments that are [grouped by a resource]({%slug scheduler-resource-grouping%}).
-
->caption Resource Grouping in a Month view.
-
-@[template](/_contentTemplates/scheduler/views.md#resource-grouping-code-snippet-for-examples)
-
 ## See Also
 
 * [Views]({%slug scheduler-views-overview%})
 * [Navigation]({%slug scheduler-navigation%})
 * [Live Demo: Scheduler Month View](https://demos.telerik.com/blazor-ui/scheduler/month-view)
+* [Resource Grouping]({%slug scheduler-resource-grouping%})

components/scheduler/views/multiday.md

@@ -5,21 +5,20 @@ description: MultiDay View in the Scheduler for Blazor.
 slug: scheduler-views-multiday
 tags: telerik,blazor,scheduler,view,multiday
 published: True
-position: 2
+position: 3
 ---
 
 # MultiDay View
 
 The MultiDay view of the Scheduler for Blazor shows several days at once to the user.
 
-The `Date` parameter of the scheduler controls which is the first rendered date, and the `NumberOfDays` parameter of the View controls how many days will be rendered.
+The `Date` parameter of the Scheduler controls which is the first rendered date, and the `NumberOfDays` parameter of the View controls how many days will be rendered.
 
 In this article:
 
 * [View Parameters](#view-parameters)
 	* [Slots](#slots)
 * [Example](#example)
-* [Resource Grouping](#resource-grouping-in-the-multiday-view)
 
 @[template](/_contentTemplates/scheduler/views.md#day-views-common-properties)
 | `NumberOfDays` | `int` <br/> `1` | How many days to show side by side in the view.
@@ -30,13 +29,12 @@ In this article:
 
 ## Example
 
->caption Declare the MultiDay View in the markup
-
->tip You can declare other views as well, this example adds only the multiday view for brevity.
+>tip You can declare other views as well, this example adds only the Multiday view for brevity.
 
+>caption Declare the MultiDay view in the markup
 
 ````CSHTML
-@* Define the multiday view. *@
+@* Define the Multiday view. *@
 
 <TelerikScheduler Data="@Appointments" @bind-Date="@StartDate" Height="600px" Width="800px">
     <SchedulerViews>
@@ -98,16 +96,10 @@ In this article:
 }
 ````
 
-## Resource Grouping in the MultiDay View
-
-You can configure the MultiDay view to display events that are [grouped by a resource]({%slug scheduler-resource-grouping%}).
-
->caption Resource Grouping in a MultiDay view.
-
-@[template](/_contentTemplates/scheduler/views.md#resource-grouping-code-snippet-for-examples)
-
 ## See Also
 
 * [Views]({%slug scheduler-views-overview%})
 * [Navigation]({%slug scheduler-navigation%})
 * [Live Demo: Scheduler MultiDay View](https://demos.telerik.com/blazor-ui/scheduler/multiday-view)
+* [Resource Grouping]({%slug scheduler-resource-grouping%})
+

components/scheduler/views/overview.md

@@ -21,10 +21,11 @@ You can read more about this in the [Navigation]({%slug scheduler-navigation%})
 The available views are:
 
 * [Scheduler**Day**View]({%slug scheduler-views-day%})
-* [Scheduler**MultiDay**View]({%slug scheduler-views-multiday%})
 * [Scheduler**Week**View]({%slug scheduler-views-week%})
+* [Scheduler**MultiDay**View]({%slug scheduler-views-multiday%})
 * [Scheduler**Month**View]({%slug scheduler-views-month%})
 * [Scheduler**Timeline**View]({%slug scheduler-views-timeline%})
+* [Scheduler**Agenda**View]({%slug scheduler-views-agenda%})
 
 >caption Allow the user to navigate between Day and Week views only by defining only them. Example how to choose starting View (Week) and Date (29 Nov 2019).
 

components/scheduler/views/timeline.md

@@ -5,7 +5,7 @@ description: Timeline View in the Scheduler for Blazor.
 slug: scheduler-views-timeline
 tags: telerik,blazor,scheduler,view,timeline
 published: True
-position: 1
+position: 5
 ---
 
 # Timeline View
@@ -17,7 +17,6 @@ In this article:
 * [View Parameters](#view-parameters)
 	* [Slots](#slots)
 * [Example](#example)
-* [Resource Grouping](#resource-grouping-in-the-timeline-view)
 
 ## View Parameters
 
@@ -42,9 +41,9 @@ Generally, the views are designed around the timeframe that they show and the da
 
 ## Example
 
->caption Declare the Timeline View in the markup
+>tip You can declare other views as well, this example adds only the Тimeline view for brevity.
 
->tip You can declare other views as well, this example adds only the timeline view for brevity.
+>caption Declare the Timeline view in the markup
 
 ````CSHTML
 @* Define the Timeline view. *@
@@ -111,16 +110,10 @@ Generally, the views are designed around the timeframe that they show and the da
 }
 ````
 
-## Resource Grouping in the Timeline View
-
-You can configure the Timeline view to display events that are [grouped by a resource]({%slug scheduler-resource-grouping%}).
-
->caption Resource Grouping in a Timeline view.
-
-@[template](/_contentTemplates/scheduler/views.md#resource-grouping-vertical-code-snippet-for-examples)
-
 ## See Also
 
 * [Views]({%slug scheduler-views-overview%})
 * [Navigation]({%slug scheduler-navigation%})
 * [Live Demo: Scheduler Timeline View](https://demos.telerik.com/blazor-ui/scheduler/timeline-view)
+* [Resource Grouping]({%slug scheduler-resource-grouping%})
+