Blazor Scheduler Example - Header Bar

This demo shows how to add a custom toolbar item to the Scheduler header bar. Here, an employee image is added to the header bar. Clicking on it opens a popup showing the employee's short profile information.

The Scheduler toolbar supports both built-in and custom items by placing the appropriate tags inside the ScheduleToolBar component. In this demo, a custom toolbar item is added using the ScheduleToolBarCustom tag to display an employee image. A popup has been designed separately with employee profile info and is initially hidden. It is displayed dynamically when the employee image is clicked.

The following toolbar items can be added inside the ScheduleToolBar component:

• ScheduleToolBarPrevious - Navigates to the previous date range.
• ScheduleToolBarNext - Navigates to the next date range.
• ScheduleToolBarDateRange - Shows the current visible date range.
• ScheduleToolBarToday - Navigates to today's date.
• ScheduleToolBarViews - Renders buttons for each configured Scheduler view.
• ScheduleToolBarCustom - Adds a toolbar item with template content. It supports the following types through the Type property:
  • ItemType.Button - The item is treated as a button element (this is the default when the type is not specified).
  • ItemType.Input - The item is treated as an input element.
  • ItemType.Separator - Renders a separator line between toolbar items.
  • ItemType.Spacer - Creates flexible space between toolbar items.

The Scheduler header bar is made dynamically visible/hidden by setting true/false to the ShowHeaderBar property.