Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions _contentTemplates/scheduler/views.md
Original file line number Diff line number Diff line change
Expand Up @@ -556,6 +556,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>
Expand Down
8 changes: 1 addition & 7 deletions components/scheduler/resource-grouping.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down Expand Up @@ -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>
Expand Down
114 changes: 114 additions & 0 deletions components/scheduler/views/agenda.md
Original file line number Diff line number Diff line change
@@ -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&nbsp;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%})

16 changes: 4 additions & 12 deletions components/scheduler/views/day.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand All @@ -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>
Expand Down Expand Up @@ -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%})
16 changes: 4 additions & 12 deletions components/scheduler/views/month.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ In this article:

* [View Parameters](#view-parameters)
* [Example](#example)
* [Resource Grouping](#resource-grouping-in-the-month-view)

## View Parameters

Expand All @@ -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>
Expand Down Expand Up @@ -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%})
22 changes: 7 additions & 15 deletions components/scheduler/views/multiday.md
Original file line number Diff line number Diff line change
Expand Up @@ -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` - how many days will be rendered side-by-side in the view.
Expand All @@ -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>
Expand Down Expand Up @@ -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%})

3 changes: 2 additions & 1 deletion components/scheduler/views/overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -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).

Expand Down
17 changes: 5 additions & 12 deletions components/scheduler/views/timeline.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -17,7 +17,6 @@ In this article:
* [View Parameters](#view-parameters)
* [Slots](#slots)
* [Example](#example)
* [Resource Grouping](#resource-grouping-in-the-timeline-view)

@[template](/_contentTemplates/scheduler/views.md#day-views-common-properties)
| `ColumnWidth` | `decimal` | The width of each time column in pixels.
Expand All @@ -29,9 +28,9 @@ In this article:

## 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. *@
Expand Down Expand Up @@ -98,16 +97,10 @@ In this article:
}
````

## 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%})

Loading
Loading