Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
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
7 changes: 0 additions & 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
115 changes: 115 additions & 0 deletions components/scheduler/views/agenda.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@
---
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. Also the Agenda view can be configured to display the events that are [grouped by resource]({%slug scheduler-resource-grouping%})


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 (a week)`) | Represents the number of days shown in the view. |
| `HideEmptyAgendaDays` | `bool` <br /> (`true`) | Defines whether dates with no appointments are rendered. |

## Example

>caption Declare the Agenda View in the markup
>tip You can declare other views as well, this example adds only the Agenda view for brevity.
````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 Example]({%slug scheduler-resource-grouping%}#resource-grouping-by-one-resource)

12 changes: 2 additions & 10 deletions components/scheduler/views/day.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ position: 1

# Day View

The Day view of the Scheduler for Blazor shows a single day to the user.
The Agenda view of the Scheduler for Blazor shows a weekly summary (or a custom period set by the user) in a table format. Also the Day view can be configured to display the events that are [grouped by resource]({%slug scheduler-resource-grouping%}).

The `Date` parameter of the scheduler controls which date is displayed.

Expand All @@ -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 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 Example]({%slug scheduler-resource-grouping%}#resource-grouping-by-one-resource)
12 changes: 2 additions & 10 deletions components/scheduler/views/month.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ position: 4

# Month View

The Month view of the Scheduler for Blazor shows an entire month to the user.
The Month view of the Scheduler for Blazor shows an entire month to the user. Also the Month view can be configured to display the events that are [grouped by resource]({%slug scheduler-resource-grouping%}).

The `Date` parameter of the Scheduler controls which month is displayed. It's the one containing the date.

Expand All @@ -19,7 +19,6 @@ In this article:

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

## View Parameters

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 Example]({%slug scheduler-resource-grouping%}#resource-grouping-by-one-resource)
17 changes: 5 additions & 12 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 MultiDay view of the Scheduler for Blazor shows several days at once to the user. Also the MultiDay view can be configured to display the events that are [grouped by resource]({%slug scheduler-resource-grouping%}).

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 Down Expand Up @@ -98,16 +97,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 Example]({%slug scheduler-resource-grouping%}#resource-grouping-by-one-resource)

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
15 changes: 4 additions & 11 deletions components/scheduler/views/timeline.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,18 @@ 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

The Timeline view displays appointments in a continuous horizontal direction.
The Timeline view displays appointments in a continuous horizontal direction. Also the Timeline view can be configured to display the events that are [grouped by resource]({%slug scheduler-resource-grouping%})

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 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 Example]({%slug scheduler-resource-grouping%}#resource-grouping-by-one-resource)

15 changes: 4 additions & 11 deletions components/scheduler/views/week.md
Original file line number Diff line number Diff line change
Expand Up @@ -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. Also the Week view can be configured to display the events that are [grouped by resource]({%slug scheduler-resource-grouping%})

The `Date` parameter of the scheduler controls which week is displayed. The first day depends on the current culture's `FirstDayOfWeek`.

Expand All @@ -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)

Expand Down Expand Up @@ -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 Example]({%slug scheduler-resource-grouping%}#resource-grouping-by-one-resource)

Loading