зеркало из https://github.com/telerik/blazor-docs.git
Add Agenda view documentation article (#2432)
* docs(Scheduler): add Agenda view documentation article * docs(Scheduler): apply requested changes * docs(Scheduler): apply recommendations
This commit is contained in:
Tsvetomir Hristov
GitHub
Родитель
60d1c6f5ff
Коммит
0a97ff9d5c
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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%})
|
||||
|
||||
|
|
@ -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%})
|
||||
|
|
|
|||
|
|
@ -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%})
|
||||
|
|
|
|||
|
|
@ -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%})
|
||||
|
||||
|
|
|
|||
|
|
@ -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).
|
||||
|
||||
|
|
|
|||
|
|
@ -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%})
|
||||
|
||||
|
|
|
|||
|
|
@ -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. *@
|
||||
|
||||
<TelerikScheduler Data="@Appointments" @bind-Date="@StartDate" Height="600px" Width="800px">
|
||||
<SchedulerViews>
|
||||
|
|
@ -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%})
|
||||
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче