diff --git a/_contentTemplates/scheduler/views.md b/_contentTemplates/scheduler/views.md index 36674fa76..fe47d95de 100644 --- a/_contentTemplates/scheduler/views.md +++ b/_contentTemplates/scheduler/views.md @@ -557,6 +557,7 @@ public class Appointment + diff --git a/components/scheduler/resource-grouping.md b/components/scheduler/resource-grouping.md index 8c9ef5907..a6c7e4af5 100644 --- a/components/scheduler/resource-grouping.md +++ b/components/scheduler/resource-grouping.md @@ -35,13 +35,6 @@ The settings tag will have the following Parameters: * `Resources(List)` - 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 + diff --git a/components/scheduler/views/agenda.md b/components/scheduler/views/agenda.md new file mode 100644 index 000000000..7f0c8ca5b --- /dev/null +++ b/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`
(`7`) | Represents the number of days shown in the view. | +| `HideEmptyAgendaDays` | `bool`
(`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. *@ + + + + + + + +@code { + private DateTime StartDate { get; set; } = new DateTime(2024, 10, 22); + + private bool HideEmptyDays { get; set; } + + private List Appointments = new List() +{ + 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%}) + diff --git a/components/scheduler/views/day.md b/components/scheduler/views/day.md index 9ce75e887..125e1e575 100644 --- a/components/scheduler/views/day.md +++ b/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. *@ @@ -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%}) diff --git a/components/scheduler/views/month.md b/components/scheduler/views/month.md index 0776aa3f3..da03554bb 100644 --- a/components/scheduler/views/month.md +++ b/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. *@ @@ -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%}) diff --git a/components/scheduler/views/multiday.md b/components/scheduler/views/multiday.md index 1617d2d27..5b37a416f 100644 --- a/components/scheduler/views/multiday.md +++ b/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`
`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. *@ @@ -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%}) + diff --git a/components/scheduler/views/overview.md b/components/scheduler/views/overview.md index d19f4258a..2f797bf9b 100644 --- a/components/scheduler/views/overview.md +++ b/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). diff --git a/components/scheduler/views/timeline.md b/components/scheduler/views/timeline.md index a8fb6cf32..1c0bd9da2 100644 --- a/components/scheduler/views/timeline.md +++ b/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%}) + diff --git a/components/scheduler/views/week.md b/components/scheduler/views/week.md index ba5c053d8..eee5d99c9 100644 --- a/components/scheduler/views/week.md +++ b/components/scheduler/views/week.md @@ -5,12 +5,12 @@ description: Week View in the Scheduler for Blazor. slug: scheduler-views-week tags: telerik,blazor,scheduler,view,week published: True -position: 3 +position: 2 --- # Week View -The Week view of the scheduler shows the entire week to the user. +The Week view of the Scheduler shows the entire week to the user. The `Date` parameter of the scheduler controls which week is displayed. The first day depends on the current culture's `FirstDayOfWeek`. @@ -19,7 +19,6 @@ In this article: * [View Parameters](#view-parameters) * [Slots](#slots) * [Example](#example) -* [Resource Grouping](#resource-grouping-in-the-week-view) @[template](/_contentTemplates/scheduler/views.md#day-views-common-properties) @@ -29,12 +28,12 @@ In this article: ## Example ->caption Declare the Week View in the markup +>tip You can declare other views as well, this example adds only the Week view for brevity. ->tip You can declare other views as well, this example adds only the week view for brevity. +>caption Declare the Week view in the markup ````CSHTML -@* Define the week view. *@ +@* Define the Week view. *@ @@ -96,16 +95,10 @@ In this article: } ```` -## Resource Grouping in the Week View - -You can configure the Week view to display events that are [grouped by a resource]({%slug scheduler-resource-grouping%}). - ->caption Resource Grouping in a Week 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 Week View](https://demos.telerik.com/blazor-ui/scheduler/week-view) +* [Resource Grouping]({%slug scheduler-resource-grouping%}) +