Skip to content

996709: Documentation for the Scheduler custom toolbar feature. #7270

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
VijayakumarRSF4470 wants to merge 1 commit into
base: development
Choose a base branch
from
+205 −0
Open

996709: Documentation for the Scheduler custom toolbar feature. #7270

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
205 changes: 205 additions & 0 deletions blazor/scheduler/header-bar.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,210 @@ By default, the header bar holds the date and view navigation options, through w

![Hide Header Bar in Blazor Scheduler](images/blazor-scheduler-hide-header-bar.png)

## Customizing header bar using template

Apart from the default date navigation and view options available on the header bar, you can add custom items into the Scheduler header bar by making use of the `ScheduleToolBar` child component along with `ScheduleToolBarCustom` for custom toolbar items. The Scheduler provides built-in toolbar components such as `ScheduleToolBarPrevious`, `ScheduleToolBarNext`, `ScheduleToolBarDateRange`, `ScheduleToolBarToday`, and `ScheduleToolBarViews` to display the default navigation and view options. For custom items, you can use the `ScheduleToolBarCustom` component to add any custom content or controls. In this example, the default items such as Previous, Next, Date Range Text, and Today have been used along with a dropdown list control as a custom toolbar item to filter appointments by owner.

```cshtml
@using Syncfusion.Blazor.Schedule
@using Syncfusion.Blazor.DropDowns

<div class="col-lg-12 property-section">
<SfSchedule TValue="AppointmentData"
@ref="ScheduleObj"
Width="100%"
Height="650px"
@bind-SelectedDate="@CurrentDate">
<ScheduleEventSettings DataSource="@FilteredAppointments"></ScheduleEventSettings>
<ScheduleResources>
<ScheduleResource TItem="OwnerData"
TValue="int[]"
DataSource="@FilteredOwnerData"
Field="OwnerId"
Title="Owner"
Name="Owners"
TextField="OwnerText"
IdField="OwnerId"
ColorField="Color">
</ScheduleResource>
</ScheduleResources>
<ScheduleToolBar>
<ScheduleToolBarPrevious />
<ScheduleToolBarNext />
<ScheduleToolBarDateRange />
<ScheduleToolBarCustom>
<SfDropDownList TValue="int"
TItem="OwnerData"
@bind-Value="@SelectedOwner"
ShowClearButton="false"
Width="125px"
DataSource="@OwnerCollections">
<DropDownListFieldSettings Text="OwnerText" Value="OwnerId"></DropDownListFieldSettings>
<DropDownListEvents TValue="int" TItem="OwnerData" ValueChange="OnOwnerChange"></DropDownListEvents>
</SfDropDownList>
</ScheduleToolBarCustom>
<ScheduleToolBarToday />
</ScheduleToolBar>
<ScheduleViews>
<ScheduleView Option="View.Week"></ScheduleView>
<ScheduleView Option="View.Month"></ScheduleView>
<ScheduleView Option="View.TimelineMonth"></ScheduleView>
</ScheduleViews>
</SfSchedule>
</div>

@code {
private SfSchedule<AppointmentData> ScheduleObj;
private DateTime CurrentDate { get; set; }
private int SelectedOwner = 1;

private List<OwnerData> OwnerCollections = new List<OwnerData>();
private List<AppointmentData> DataSource = new List<AppointmentData>();

private List<AppointmentData> FilteredAppointments = new List<AppointmentData>();
private List<OwnerData> FilteredOwnerData = new List<OwnerData>();

protected override void OnInitialized()
{
CurrentDate = DateTime.Today;
OwnerCollections = new List<OwnerData>
{
new OwnerData { OwnerId = 1, OwnerText = "Nancy", Color = "#ea7a57" },
new OwnerData { OwnerId = 2, OwnerText = "Steven", Color = "#7fa900" },
new OwnerData { OwnerId = 3, OwnerText = "Michael", Color = "#5978ee" }
};
InitializeAppointments();
UpdateFilteredData(SelectedOwner);
}
private void InitializeAppointments()
{
DataSource = new List<AppointmentData>
{
new AppointmentData
{
Id = 1,
Subject = "Project Meeting",
StartTime = new DateTime(CurrentDate.Year, CurrentDate.Month, CurrentDate.Day, 9, 0, 0),
EndTime = new DateTime(CurrentDate.Year, CurrentDate.Month, CurrentDate.Day, 10, 30, 0),
OwnerId = 1,
Description = "Project discussion with Nancy"
},
new AppointmentData
{
Id = 2,
Subject = "Client Call",
StartTime = new DateTime(CurrentDate.Year, CurrentDate.Month, CurrentDate.Day, 13, 0, 0),
EndTime = new DateTime(CurrentDate.Year, CurrentDate.Month, CurrentDate.Day, 14, 0, 0),
OwnerId = 1,
Description = "Client presentation with Nancy"
},
new AppointmentData
{
Id = 3,
Subject = "Team Review",
StartTime = new DateTime(CurrentDate.Year, CurrentDate.Month, CurrentDate.Day, 15, 30, 0),
EndTime = new DateTime(CurrentDate.Year, CurrentDate.Month, CurrentDate.Day, 16, 30, 0),
OwnerId = 1,
Description = "Weekly review with Nancy"
},
new AppointmentData
{
Id = 4,
Subject = "Design Discussion",
StartTime = new DateTime(CurrentDate.Year, CurrentDate.Month, CurrentDate.Day, 10, 0, 0),
EndTime = new DateTime(CurrentDate.Year, CurrentDate.Month, CurrentDate.Day, 11, 30, 0),
OwnerId = 2,
Description = "Design review with Steven"
},
new AppointmentData
{
Id = 5,
Subject = "Sprint Planning",
StartTime = new DateTime(CurrentDate.Year, CurrentDate.Month, CurrentDate.Day, 12, 0, 0),
EndTime = new DateTime(CurrentDate.Year, CurrentDate.Month, CurrentDate.Day, 13, 30, 0),
OwnerId = 2,
Description = "Sprint planning with Steven"
},
new AppointmentData
{
Id = 6,
Subject = "Code Review",
StartTime = new DateTime(CurrentDate.Year, CurrentDate.Month, CurrentDate.Day, 14, 30, 0),
EndTime = new DateTime(CurrentDate.Year, CurrentDate.Month, CurrentDate.Day, 15, 30, 0),
OwnerId = 2,
Description = "Code review session with Steven"
},
new AppointmentData
{
Id = 7,
Subject = "Budget Meeting",
StartTime = new DateTime(CurrentDate.Year, CurrentDate.Month, CurrentDate.Day, 9, 30, 0),
EndTime = new DateTime(CurrentDate.Year, CurrentDate.Month, CurrentDate.Day, 11, 0, 0),
OwnerId = 3,
Description = "Budget discussion with Michael"
},
new AppointmentData
{
Id = 8,
Subject = "Stakeholder Update",
StartTime = new DateTime(CurrentDate.Year, CurrentDate.Month, CurrentDate.Day, 13, 30, 0),
EndTime = new DateTime(CurrentDate.Year, CurrentDate.Month, CurrentDate.Day, 14, 30, 0),
OwnerId = 3,
Description = "Update meeting with Michael"
},
new AppointmentData
{
Id = 9,
Subject = "Strategy Session",
StartTime = new DateTime(CurrentDate.Year, CurrentDate.Month, CurrentDate.Day, 16, 0, 0),
EndTime = new DateTime(CurrentDate.Year, CurrentDate.Month, CurrentDate.Day, 17, 30, 0),
OwnerId = 3,
Description = "Strategy planning with Michael"
}
};
}
private async void OnOwnerChange(ChangeEventArgs<int, OwnerData> args)
{
int value = args.Value;
SelectedOwner = value;
UpdateFilteredData(value);
if (ScheduleObj != null)
{
await ScheduleObj.RefreshAsync();
}
}
private void UpdateFilteredData(int ownerId)
{
FilteredAppointments = DataSource
.Where(e => e.OwnerId == ownerId)
.ToList();

FilteredOwnerData = OwnerCollections
.Where(o => o.OwnerId == ownerId)
.ToList();
}
public class OwnerData
{
public int OwnerId { get; set; }
public string OwnerText { get; set; }
public string Color { get; set; }
}
public class AppointmentData
{
public int Id { get; set; }
public string Subject { get; set; }
public DateTime StartTime { get; set; }
public DateTime EndTime { get; set; }
public string Description { get; set; }
public int OwnerId { get; set; }
}
}
```

The Scheduler with custom toolbar items alongside the default navigation and view options in the header bar will be rendered as shown in the following image.

![Hide Header Bar in Blazor Scheduler](images/blazor-scheduler-toolbar-template.png)

## How to display the view options within the header bar popup

By default, the header bar holds the view navigation options, through which the user can switch between various views. You can move this view options to the header bar popup by setting `true` to the [`EnableAdaptiveUI`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_EnableAdaptiveUI) property.
Expand Down Expand Up @@ -90,6 +294,7 @@ By default, the header bar holds the view navigation options, through which the

The Scheduler with view options within the header bar popup will be rendered as shown in the following image.


![Displaying Header Bar Popup in Blazor Scheduler](images/blazor-scheduler-header-bar-popup.png)

N> Refer [here](./resources#adaptive-ui-in-desktop) to know more about adaptive UI in resources scheduler.
Expand Down
Binary file added blazor/scheduler/images/blazor-scheduler-toolbar-template.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.