Header Customization in ASP.NET MVC Scheduler
The header part of Scheduler can be customized easily with the built-in options available.
Show or Hide header bar
By default, the header bar holds the date and view navigation options, through which the user can switch between the dates and various views. This header bar can be hidden from the UI by setting false to the ShowHeaderBar property. Its default value is true.
@using Syncfusion.EJ2.Schedule
@(Html.EJS().Schedule("schedule")
.Width("100%")
.Height("550px")
.EventSettings(new ScheduleEventSettings { DataSource = ViewBag.datasource })
.ShowHeaderBar(false)
.SelectedDate(new DateTime(2018, 2, 15))
.Render()
)public ActionResult Index()
{
ViewBag.datasource = GetScheduleData();
return View();
}
public List<AppointmentData> GetScheduleData()
{
List<AppointmentData> appData = new List<AppointmentData>();
appData.Add(new AppointmentData
{ Id = 1, Subject = "Explosion of Betelgeuse Star", StartTime = new DateTime(2023, 2, 14, 9, 30, 0), EndTime = new DateTime(2023, 2, 14, 11, 0, 0) });
return appData;
}
public class AppointmentData
{
public int Id { get; set; }
public string Subject { get; set; }
public DateTime StartTime { get; set; }
public DateTime EndTime { get; set; }
}Customizing header bar
Apart from the default date navigation and view options available on the header bar, you can add custom items to the Scheduler header bar by handling the ActionBegin event with the toolbarItemRender request type. In the following example, an employee image is added to the header bar; clicking it opens a popup showing that person’s short profile information.
@using Syncfusion.EJ2.Schedule
@(Html.EJS().Schedule("schedule")
.Width("100%")
.Height("550px")
.Views(ViewBag.view)
.ActionComplete("onActionComplete")
.ActionBegin("onActionBegin")
.EventSettings(new ScheduleEventSettings { DataSource = ViewBag.datasource })
.SelectedDate(new DateTime(2018, 2, 15))
.Render()
)
<style>
.e-schedule .e-schedule-toolbar .user-icon {
background-image: url('https://ej2.syncfusion.com/demos/src/schedule/images/nancy.png');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 50%;
height: 24px;
min-width: 24px !important;
width: 24px !important;
}
.e-schedule .e-schedule-toolbar .e-toolbar-items span.e-btn-icon.user-icon.e-icons {
line-height: 24px !important;
min-height: 24px !important;
}
.e-schedule .e-schedule-toolbar .e-toolbar-items .e-schedule-user-icon .e-tbar-btn:hover {
background-color: inherit;
}
.e-schedule .e-schedule-toolbar .e-toolbar-items .e-schedule-user-icon .e-tbar-btn-text {
display: none;
}
.e-schedule .e-schedule-toolbar .e-toolbar-pop .e-schedule-user-icon .e-tbar-btn-text {
padding-left: 8px !important;
}
.e-profile-wrapper {
width: 210px;
height: 80px;
background-color: #fafafa;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
overflow: hidden;
}
.e-profile-wrapper .profile-container {
display: flex;
padding: 10px;
}
.e-profile-wrapper .profile-image {
background-image: url('https://ej2.syncfusion.com/demos/src/schedule/images/nancy.png');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 50%;
box-shadow: inset 0 0 1px #e0e0e0, inset 0 0 14px rgba(0, 0, 0, 0.2);
width: 60px;
height: 60px;
}
.e-profile-wrapper .content-wrap {
padding-left: 10px;
}
.e-profile-wrapper .name {
font-size: 14px;
line-height: 20px;
font-weight: 500;
margin-top: 2px;
}
.e-profile-wrapper .destination {
font-size: 12px;
}
.e-profile-wrapper .status-icon {
height:6px;
width:6px;
background:green;
border-radius:100%;
float:left;
margin-right:4px;
margin-top:4px;
}
.e-profile-wrapper .status {
font-size: 11px;
}
</style>
<script type="text/javascript">
var profilePopup;
function onActionBegin(args) {
if (args.requestType === 'toolbarItemRendering') {
var userIconItem = {
align: 'Right', prefixIcon: 'user-icon', text: 'Nancy', cssClass: 'e-schedule-user-icon'
};
args.items.push(userIconItem);
}
}
function onActionComplete(args) {
var scheduleElement = document.getElementById('schedule');
if (args.requestType === 'toolBarItemRendered') {
var userIconEle = scheduleElement.querySelector('.e-schedule-user-icon');
userIconEle.onclick = function () {
profilePopup.relateTo = userIconEle;
profilePopup.dataBind();
if (profilePopup.element.classList.contains('e-popup-close')) {
profilePopup.show();
} else {
profilePopup.hide();
}
};
}
var userContentEle = ej.base.createElement('div', {
className: 'e-profile-wrapper'
});
scheduleElement.parentElement.appendChild(userContentEle);
var userIconEle = scheduleElement.querySelector('.e-schedule-user-icon');
var getDOMString = ej.base.compile('<div class="profile-container"><div class="profile-image">' +
'</div><div class="content-wrap"><div class="name">Nancy</div>' +
'<div class="destination">Product Manager</div><div class="status">' +
'<div class="status-icon"></div>Online</div></div></div>');
var output = getDOMString({});
profilePopup = new ej.popups.Popup(userContentEle, {
content: output[0],
relateTo: userIconEle,
position: { X: 'left', Y: 'bottom' },
collision: { X: 'flip', Y: 'flip' },
targetType: 'relative',
viewPortElement: scheduleElement,
width: 210,
height: 80
});
profilePopup.hide();
}
</script>public ActionResult Index()
{
ViewBag.datasource = GetScheduleData();
List<ScheduleView> viewOption = new List<ScheduleView>()
{
new ScheduleView {Option = Syncfusion.EJ2.Schedule.View.Month }
};
ViewBag.view = viewOption;
return View();
}
public List<AppointmentData> GetScheduleData()
{
List<AppointmentData> appData = new List<AppointmentData>();
appData.Add(new AppointmentData
{ Id = 1, Subject = "Explosion of Betelgeuse Star", StartTime = new DateTime(2023, 2, 14, 9, 30, 0), EndTime = new DateTime(2023, 2, 14, 11, 0, 0) });
return appData;
}
public class AppointmentData
{
public int Id { get; set; }
public string Subject { get; set; }
public DateTime StartTime { get; set; }
public DateTime EndTime { get; set; }
}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 these view options into the header bar popup by setting true to the EnableAdaptiveUI property.
@using Syncfusion.EJ2.Schedule
@(Html.EJS().Schedule("schedule")
.Width("100%")
.Height("550px")
.EventSettings(new ScheduleEventSettings { DataSource = ViewBag.datasource })
.EnableAdaptiveUI(true)
.SelectedDate(new DateTime(2018, 2, 15))
.Render()
)public ActionResult Index()
{
ViewBag.datasource = GetScheduleData();
return View();
}
public List<AppointmentData> GetScheduleData()
{
List<AppointmentData> appData = new List<AppointmentData>();
appData.Add(new AppointmentData
{ Id = 1, Subject = "Explosion of Betelgeuse Star", StartTime = new DateTime(2023, 2, 14, 9, 30, 0), EndTime = new DateTime(2023, 2, 14, 11, 0, 0) });
return appData;
}
public class AppointmentData
{
public int Id { get; set; }
public string Subject { get; set; }
public DateTime StartTime { get; set; }
public DateTime EndTime { get; set; }
}NOTE
Refer here to know more about adaptive UI in the resources view of the Scheduler.
Date header customization
The Scheduler UI that displays the date text on all views is considered as the date header cells. You can customize the date header cells of the Scheduler using either the DateHeaderTemplate option or the RenderCell event.
Using the date header template
The DateHeaderTemplate option is used to customize the date header cells of day, week, and work-week views.
@using Syncfusion.EJ2.Schedule
@(Html.EJS().Schedule("schedule")
.Width("100%")
.Height("550px")
.Views(ViewBag.view)
.EventSettings(new ScheduleEventSettings { DataSource = ViewBag.datasource })
.DateHeaderTemplate("#template")
.SelectedDate(new DateTime(2018, 2, 15))
.Render()
)
<style>
.weather-text {
font-size: 11px;
}
</style>
<script id="template" type="text/template">
<div class="date-text">${getDateHeaderText(data.date)}</div>
${getWeather(data.date)}
</script>
<script type="text/javascript">
var instance = new ej.base.Internationalization();
window.getDateHeaderText = function (value) {
return instance.formatDate(value, { skeleton: 'Ed' });
};
function getWeather(value) {
switch (value.getDay()) {
case 0:
return '<div class="weather-text">25°C</div>';
case 1:
return '<div class="weather-text">18°C</div>';
case 2:
return '<div class="weather-text">10°C</div>';
case 3:
return '<div class="weather-text">16°C</div>';
case 4:
return '<div class="weather-text">8°C</div>';
case 5:
return '<div class="weather-text">27°C</div>';
case 6:
return '<div class="weather-text">17°C</div>';
default:
return null;
}
}
</script>public ActionResult Index()
{
ViewBag.datasource = GetScheduleData();
List<ScheduleView> viewOption = new List<ScheduleView>()
{
new ScheduleView { Option = Syncfusion.EJ2.Schedule.View.Day },
new ScheduleView { Option = Syncfusion.EJ2.Schedule.View.Week },
new ScheduleView { Option = Syncfusion.EJ2.Schedule.View.WorkWeek }
};
ViewBag.view = viewOption;
return View();
}
public List<AppointmentData> GetScheduleData()
{
List<AppointmentData> appData = new List<AppointmentData>();
appData.Add(new AppointmentData
{ Id = 1, Subject = "Explosion of Betelgeuse Star", StartTime = new DateTime(2023, 2, 14, 9, 30, 0), EndTime = new DateTime(2023, 2, 14, 11, 0, 0) });
return appData;
}
public class AppointmentData
{
public int Id { get; set; }
public string Subject { get; set; }
public DateTime StartTime { get; set; }
public DateTime EndTime { get; set; }
}Using the RenderCell event
In month view, the date header template is not applicable. The same customization can be added beside the date text in month cells by using the RenderCell event.
@using Syncfusion.EJ2.Schedule
@(Html.EJS().Schedule("schedule")
.Width("100%")
.Height("550px")
.Views(ViewBag.view)
.RenderCell("onRenderCell")
.EventSettings(new ScheduleEventSettings { DataSource = ViewBag.datasource })
.SelectedDate(new DateTime(2018, 2, 15))
.Render()
)
<style>
.weather-text {
font-size: 11px;
}
</style>
<script type="text/javascript">
function getWeather(value) {
switch (value.getDay()) {
case 0:
return '<div class="weather-text">25°C</div>';
case 1:
return '<div class="weather-text">18°C</div>';
case 2:
return '<div class="weather-text">10°C</div>';
case 3:
return '<div class="weather-text">16°C</div>';
case 4:
return '<div class="weather-text">8°C</div>';
case 5:
return '<div class="weather-text">27°C</div>';
case 6:
return '<div class="weather-text">17°C</div>';
default:
return null;
}
}
function onRenderCell(args) {
if (args.elementType === 'monthCells') {
var ele = document.createElement('div');
ele.innerHTML = getWeather(args.date);
(args.element).appendChild(ele.firstChild);
}
}
</script>public ActionResult Index()
{
ViewBag.datasource = GetScheduleData();
List<ScheduleView> viewOption = new List<ScheduleView>()
{
new ScheduleView {Option = Syncfusion.EJ2.Schedule.View.Month }
};
ViewBag.view = viewOption;
return View();
}
public List<AppointmentData> GetScheduleData()
{
List<AppointmentData> appData = new List<AppointmentData>();
appData.Add(new AppointmentData
{ Id = 1, Subject = "Explosion of Betelgeuse Star", StartTime = new DateTime(2023, 2, 14, 9, 30, 0), EndTime = new DateTime(2023, 2, 14, 11, 0, 0) });
return appData;
}
public class AppointmentData
{
public int Id { get; set; }
public string Subject { get; set; }
public DateTime StartTime { get; set; }
public DateTime EndTime { get; set; }
}Customizing the date range text
The DateRangeTemplate option allows you to customize the text content of the date range displayed in the Scheduler. By default, the date range text is determined by the current Scheduler view. You can use the DateRangeTemplate option to override the default text and specify your own custom text.
The DateRangeTemplate template includes the startDate, endDate, and currentView options that you can use to customize the date range text.
@using Syncfusion.EJ2.Schedule
@(Html.EJS().Schedule("schedule")
.Width("100%")
.Height("550px")
.Views(ViewBag.view)
.EventSettings(new ScheduleEventSettings { DataSource = ViewBag.datasource })
.DateRangeTemplate("#template")
.Render()
)
<script id="template" type="text/template">
<div class="date-text">${getDateRange(data.date)}</div>
</script>
<script type="text/javascript">
var instance = new ej.base.Internationalization();
window.getDateRange = function (value) {
return value.toLocaleString('en-us', { month: 'long' }) + ' ' + value.getFullYear();
};
</script>public ActionResult Index()
{
ViewBag.datasource = GetScheduleData();
List<ScheduleView> viewOption = new List<ScheduleView>()
{
new ScheduleView { Option = Syncfusion.EJ2.Schedule.View.Day },
new ScheduleView { Option = Syncfusion.EJ2.Schedule.View.Week },
new ScheduleView { Option = Syncfusion.EJ2.Schedule.View.WorkWeek }
};
ViewBag.view = viewOption;
return View();
}
public List<AppointmentData> GetScheduleData()
{
List<AppointmentData> appData = new List<AppointmentData>();
appData.Add(new AppointmentData
{ Id = 1, Subject = "Explosion of Betelgeuse Star", StartTime = new DateTime(2023, 2, 14, 9, 30, 0), EndTime = new DateTime(2023, 2, 14, 11, 0, 0) });
return appData;
}
public class AppointmentData
{
public int Id { get; set; }
public string Subject { get; set; }
public DateTime StartTime { get; set; }
public DateTime EndTime { get; set; }
}NOTE
You can refer to our ASP.NET MVC Scheduler feature tour page for its groundbreaking feature representations. You can also explore our ASP.NET MVC Scheduler example to know how to present and manipulate data.