Search results

Header bar customization

Show/Hide header bar

By default, the header bar holds the date and view navigation options, to which the user can add their own custom items onto it. Schedule header bar can be enabled / disabled by setting true / false to the showHeaderBar property. It’s default value is true.

razor
data.cs
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Schedule

@section ControlsSection{
    <div class="control-section">
        <div class="content-wrapper">
            @Html.EJS().Schedule("schedule").Width("100%").Height("550px").Views(ViewBag.view).EventSettings(new ScheduleEventSettings { DataSource = ViewBag.datasource }).ShowHeaderbar(false).SelectedDate(new DateTime(2018, 2, 15)).Render()
        </div>
    </div>
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public partial class ScheduleController : Controller
    {
        public ActionResult show-hide-headerbar()
        {
            ViewBag.datasource = new ScheduleData().GetScheduleData();
            List<ScheduleViewsModel> viewOption = new List<ScheduleViewsModel>()
            {
                new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Day },
                new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Week },
                new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.WorkWeek }
            };
            ViewBag.view = viewOption;
            return View();
        }
    }
}

Customizing header bar

Below demo shows the way of adding custom items into the Schedule header bar. Here, an employee image is added to the header bar, clicking on which will open the popup showing that person’s short profile information.

[src/app/app.ts]

Now, run the application in the browser using the following command.

razor
data.cs
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Schedule

@section ControlsSection{
    <div class="col-lg-9 control-section">
        <div class="content-wrapper">
            @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()
        </div>
    </div>
    <style>
        .e-schedule .e-schedule-toolbar .user-icon {
            background-image: url('./content/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('./content/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>
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public partial class ScheduleController : Controller
    {
        public ActionResult custom-headerbar()
        {
            ViewBag.datasource = new ScheduleData().GetScheduleData();
            List<ScheduleViewsModel> viewOption = new List<ScheduleViewsModel>()
            {
                new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Month }
            };
            ViewBag.view = viewOption;
            return View();
        }
    }
}

Customizing date header

The dateHeaderTemplate option is used to customize the date header cells of day, week and work-week views. In month view, the date header is not applicable and therefore the same customization can be added beside the date text in the month cells by making use of the renderCells event.

razor
data.cs
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Schedule

@section ControlsSection{
    <div class="control-section">
        <div class="content-wrapper">
            @Html.EJS().Schedule("schedule").Width("100%").Height("550px").Views(ViewBag.view).RenderCell("onRenderCell").EventSettings(new ScheduleEventSettings { DataSource = ViewBag.datasource }).CssClass("schedule-date-header-template").DateHeaderTemplate("#template").SelectedDate(new DateTime(2018, 2, 15)).Render()
        </div>
    </div>
    <style>
        .schedule-date-header-template.e-schedule .e-vertical-view .e-header-cells {
            padding: 0;
            text-align: center !important;
        }

        .schedule-date-header-template.e-schedule .date-text {
            font-size: 14px;
        }

        .schedule-date-header-template.e-schedule.e-device .date-text {
            font-size: 12px;
        }

        .schedule-date-header-template.e-schedule .weather-image {
            width: 20px;
            height: 20px;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
        }

        .schedule-date-header-template.e-schedule .weather-text {
            font-size: 11px;
        }

        .schedule-date-header-template.e-schedule .e-month-view .weather-image {
            float: right;
            margin: -20px 2px 0 0;
            width: 20px;
            height: 20px;
        }
    </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;
            }
        }
        function onRenderCell(args) {
            if (args.elementType === 'monthCells') {
                var ele = document.createElement('div');
                ele.innerHTML = getWeather(args.date);
                (args.element).appendChild(ele.firstChild);
            }
        }
    </script>
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public partial class ScheduleController : Controller
    {
        public ActionResult custom-dateheader()
        {
            ViewBag.datasource = new ScheduleData().GetScheduleData();
            List<ScheduleViewsModel> viewOption = new List<ScheduleViewsModel>()
            {
                new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Day },
                new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Week },
                new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.WorkWeek },
                new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Month }
            };
            ViewBag.view = viewOption;
            return View();
        }
    }
}