Header bar in Vue Schedule component

3 Feb 202624 minutes to read

The header bar of the Vue Schedule component provides navigation controls such as date navigation, view switching, and action buttons. It can be customized extensively using built-in properties, templates, and events.

Show or Hide header bar

By default, the header bar displays navigation elements like Previous, Next, Today, date range text, and view options. The header bar can be hidden by setting the showHeaderBar property to false. The default value of this property is true.

<template>
  <div id='app'>
    <div id='container'>
      <ejs-schedule :height='height' :selectedDate='selectedData' :eventSettings='eventSettings'
        :showHeaderBar='showHeaderBar'></ejs-schedule>
    </div>
  </div>
</template>
<script setup>
import { provide } from "vue";
import { ScheduleComponent as EjsSchedule, Day, Week, WorkWeek } from '@syncfusion/ej2-vue-schedule';
import { scheduleData } from './datasource.js';


const height = '550px';
const width = '100%';
const showHeaderBar = false;
const eventSettings = { dataSource: scheduleData };
const selectedData = new Date(2018, 1, 15);
const views = ['Day', 'Week', 'WorkWeek'];

provide('schedule', [Day, Week, WorkWeek]);

</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-schedule/styles/material3.css";
</style>
<template>
  <div id='app'>
    <div id='container'>
      <ejs-schedule :height='height' :selectedDate='selectedData' :eventSettings='eventSettings'
        :showHeaderBar='showHeaderBar'></ejs-schedule>
    </div>
  </div>
</template>
<script>
import { ScheduleComponent, Day, Week, WorkWeek } from '@syncfusion/ej2-vue-schedule';
import { scheduleData } from './datasource.js';

export default {
  name: "App",
  components: {
    "ejs-schedule": ScheduleComponent
  },
  data() {
    return {
      height: '550px',
      width: '100%',
      showHeaderBar: false,
      eventSettings: { dataSource: scheduleData },
      selectedData: new Date(2018, 1, 15),
      views: ['Day', 'Week', 'WorkWeek'],
    }
  },
  provide: {
    schedule: [Day, Week, WorkWeek]
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-schedule/styles/material3.css";
</style>

Customizing header bar using template

Apart from the default date navigation and view options In addition to the built-in navigation elements, custom items can be added to the header bar using the toolbarItems property.

To display the default items, it’s Essential® to assign a name field to each item. Supported default item names include:

  • Previous
  • Next
  • Today
  • DateRangeText
  • NewEvent
  • Views

For custom toolbar items, use Custom as the name value. In the following example, default navigation items are combined with custom toolbar items that include external icons.

<template>
  <div id='app'>
    <div id='container'>
      <ejs-schedule ref='scheduleObj' :height='height' :selectedDate='selectedData' :eventSettings='eventSettings'
        :views='views'>
        <e-resources>
          <e-resource field="OwnerId" title="Owners" :dataSource="resourceDataSource" :query='resourceQuery'
            :allowMultiple="allowMultiple" name="Owners" textField="OwnerText" idField="OwnerId" colorField='Color'>
          </e-resource>
        </e-resources>
        <e-toolbaritems>
          <e-toolbaritem name='Previous' align='Left'></e-toolbaritem>
          <e-toolbaritem name='Next' align='Left'></e-toolbaritem>
          <e-toolbaritem name='DateRangeText' align='Left'></e-toolbaritem>
          <e-toolbaritem :template="'Template'">
            <template v-slot:Template>
              <ejs-dropdownlist id='dropdownlist' :value="dropdownvalue" :change="onResourceChange" width="125px"
                :showClearButton=false :dataSource='resourceDataSource' :fields='fields'></ejs-dropdownlist>
            </template>
          </e-toolbaritem>
          <e-toolbaritem name='Today' align='Right'></e-toolbaritem>
        </e-toolbaritems>
      </ejs-schedule>
    </div>
  </div>
</template>
<script setup>
import { provide, ref } from "vue";
import { ScheduleComponent as EjsSchedule, ResourcesDirective as EResources, ResourceDirective as EResource, ToolbarItemsDirective as EToolbaritems, ToolbarItemDirective as EToolbaritems, Month, ToolbarItemsDirective, ToolbarItemDirective, ResourceDirective, ResourcesDirective } from '@syncfusion/ej2-vue-schedule';
import { scheduleData } from './datasource.js';
import { DropDownListComponent as EjsDropdownlist } from "@syncfusion/ej2-vue-dropdowns";
import { Predicate, Query } from '@syncfusion/ej2-data';

const scheduleObj = ref(null);
const height = '550px';
const width = '100%';
const eventSettings = { dataSource: scheduleData, query: new Query().where('OwnerId', 'equal', 1) };
const selectedData = new Date(2023, 10, 15);
const views = ['Month'];
const currentView = 'Month';
const resourceDataSource = [
  { OwnerText: 'Margaret', OwnerId: 1, Color: '#ea7a57' },
  { OwnerText: 'Robert', OwnerId: 2, Color: '#df5286' },
  { OwnerText: 'Laura', OwnerId: 3, Color: '#865fcf' }
];
const fields = { text: 'OwnerText', value: 'OwnerId' };
const dropdownvalue = 1;
const resourceQuery = new Query().where('OwnerId', 'equal', 1);
const allowMultiple = true;

provide('schedule', [Month]);

const onResourceChange = function (args) {
  let scheduleObj = scheduleObj.value.ej2Instances;
  let resourcePredicate;
  let value = args.value;
  resourcePredicate = new Predicate('OwnerId', 'equal', value)
  scheduleObj.resources[0].query = resourcePredicate ? new Query().where(resourcePredicate) :
    new Query().where('OwnerId', 'equal', 1);
  scheduleObj.eventSettings.query = new Query().where('OwnerId', 'equal', value);
}

</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-schedule/styles/material3.css";
</style>
<template>
  <div id='app'>
    <div id='container'>
      <ejs-schedule ref='scheduleObj' :height='height' :selectedDate='selectedData' :eventSettings='eventSettings'
        :views='views'>
        <e-resources>
          <e-resource field="OwnerId" title="Owners" :dataSource="resourceDataSource" :query='resourceQuery'
            :allowMultiple="allowMultiple" name="Owners" textField="OwnerText" idField="OwnerId" colorField='Color'>
          </e-resource>
        </e-resources>
        <e-toolbaritems>
          <e-toolbaritem name='Previous' align='Left'></e-toolbaritem>
          <e-toolbaritem name='Next' align='Left'></e-toolbaritem>
          <e-toolbaritem name='DateRangeText' align='Left'></e-toolbaritem>
          <e-toolbaritem :template="'Template'">
            <template v-slot:Template>
              <ejs-dropdownlist id='dropdownlist' :value="dropdownvalue" :change="onResourceChange" width="125px"
                :showClearButton=false :dataSource='resourceDataSource' :fields='fields'></ejs-dropdownlist>
            </template>
          </e-toolbaritem>
          <e-toolbaritem name='Today' align='Right'></e-toolbaritem>
        </e-toolbaritems>
      </ejs-schedule>
    </div>
  </div>
</template>
<script>
import { ScheduleComponent, Month, ToolbarItemsDirective, ToolbarItemDirective, ResourceDirective, ResourcesDirective } from '@syncfusion/ej2-vue-schedule';
import { scheduleData } from './datasource.js';
import { DropDownListComponent } from "@syncfusion/ej2-vue-dropdowns";
import { Predicate, Query } from '@syncfusion/ej2-data';

export default {
  name: "App",
  components: {
    'ejs-schedule': ScheduleComponent,
    'e-resource': ResourceDirective,
    'e-resources': ResourcesDirective,
    'e-toolbaritems': ToolbarItemsDirective,
    'e-toolbaritem': ToolbarItemDirective,
    'ejs-dropdownlist': DropDownListComponent
  },
  data() {
    return {
      height: '550px',
      width: '100%',
      eventSettings: { dataSource: scheduleData, query: new Query().where('OwnerId', 'equal', 1) },
      selectedData: new Date(2023, 10, 15),
      views: ['Month'],
      currentView: 'Month',
      resourceDataSource: [
        { OwnerText: 'Margaret', OwnerId: 1, Color: '#ea7a57' },
        { OwnerText: 'Robert', OwnerId: 2, Color: '#df5286' },
        { OwnerText: 'Laura', OwnerId: 3, Color: '#865fcf' }
      ],
      fields: { text: 'OwnerText', value: 'OwnerId' },
      dropdownvalue: 1,
      resourceQuery: new Query().where('OwnerId', 'equal', 1),
      allowMultiple: true,
    }
  },
  provide: {
    schedule: [Month]
  },
  methods: {
    onResourceChange(args) {
      let scheduleObj = this.$refs.scheduleObj.ej2Instances;
      let resourcePredicate;
      let value = args.value;
      resourcePredicate = new Predicate('OwnerId', 'equal', value)
      scheduleObj.resources[0].query = resourcePredicate ? new Query().where(resourcePredicate) :
        new Query().where('OwnerId', 'equal', 1);
      scheduleObj.eventSettings.query = new Query().where('OwnerId', 'equal', value);
    },
  },
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-schedule/styles/material3.css";
</style>

Customizing header bar using events

Custom elements can also be added to the header bar dynamically using the actionBegin event. This approach allows injecting UI elements programmatically based on scheduler actions.

In the example below, an employee image is added to the header bar. Selecting the image opens a popup that displays profile details.

<template>
  <div id='app'>
    <div id='container'>
      <ejs-schedule ref='scheduleObj' :height='height' :selectedDate='selectedData' :eventSettings='eventSettings'
        :views='views' :actionBegin='onActionBegin' :actionComplete='onActionComplete'>
      </ejs-schedule>
    </div>
  </div>
</template>
<script setup>
import { provide, ref } from "vue";
import { createElement } from '@syncfusion/ej2-base';
import { Popup } from '@syncfusion/ej2-popups';
import { ScheduleComponent as EjsSchedule, Month } from '@syncfusion/ej2-vue-schedule';
import { scheduleData } from './datasource.js';

const scheduleObj = ref(null);
const height = '550px';
const width = '100%';
const eventSettings = { dataSource: scheduleData };
const selectedData = new Date(2018, 1, 15);
const views = ['Month'];
const currentView = 'Month';

const onActionBegin = function (args) {
  if (args.requestType === 'toolbarItemRendering') {
    let userIconItem = {
      align: 'Right', prefixIcon: 'user-icon', text: 'Nancy', cssClass: 'e-schedule-user-icon'
    };
    args.items.push(userIconItem);
  }
}
const onActionComplete = function (args) {
  console.log(scheduleObj.value);
  let scheduleElement = scheduleObj.value.$el;
  if (args.requestType === 'toolBarItemRendered') {
    let userIconEle = scheduleElement.querySelector('.e-schedule-user-icon');
    userIconEle.onclick = () => {
      profilePopup.relateTo = userIconEle;
      profilePopup.dataBind();
      if (profilePopup.element.classList.contains('e-popup-close')) {
        profilePopup.show();
      } else {
        profilePopup.hide();
      }
    };
  }
  let userContentEle = createElement('div', {
    className: 'e-profile-wrapper'
  });
  scheduleElement.parentElement.appendChild(userContentEle);
  let userIconEle = scheduleElement.querySelector('.e-schedule-user-icon');
  let templateContent = createElement('div', {
    className: 'profile-container', innerHTML: `<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>` });
  const profilePopup = new Popup(userContentEle, {
    content: templateContent,
    relateTo: userIconEle,
    position: { X: 'left', Y: 'bottom' },
    collision: { X: 'flip', Y: 'flip' },
    targetType: 'relative',
    viewPortElement: scheduleElement,
    width: 210,
    height: 80
  });
  profilePopup.hide();
}

provide('schedule', [Month]);

</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-schedule/styles/material3.css";

.e-schedule .e-schedule-toolbar .user-icon,
.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%;
}

/* csslint ignore:start */
.e-schedule .e-schedule-toolbar .user-icon {
  height: 24px;
  min-width: 24px !important;
  width: 24px !important;
}

/* csslint ignore:end */

.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;
}

/* csslint ignore:start */
.e-schedule .e-schedule-toolbar .e-toolbar-pop .e-schedule-user-icon .e-tbar-btn-text {
  padding-left: 8px !important;
}

/* csslint ignore:end */

.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 {
  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>
<template>
  <div id='app'>
    <div id='container'>
      <ejs-schedule ref='scheduleObj' :height='height' :selectedDate='selectedData' :eventSettings='eventSettings'
        :views='views' :actionBegin='onActionBegin' :actionComplete='onActionComplete'>
      </ejs-schedule>
    </div>
  </div>
</template>
<script>
import { createElement } from '@syncfusion/ej2-base';
import { Popup } from '@syncfusion/ej2-popups';
import { ScheduleComponent, Month } from '@syncfusion/ej2-vue-schedule';
import { scheduleData } from './datasource.js';

export default {
  name: "App",
  components: {
    "ejs-schedule": ScheduleComponent
  },
  data() {
    return {
      height: '550px',
      width: '100%',
      eventSettings: { dataSource: scheduleData },
      selectedData: new Date(2018, 1, 15),
      views: ['Month'],
      currentView: 'Month'
    }
  },
  methods: {
    onActionBegin: function (args) {
      if (args.requestType === 'toolbarItemRendering') {
        let userIconItem = {
          align: 'Right', prefixIcon: 'user-icon', text: 'Nancy', cssClass: 'e-schedule-user-icon'
        };
        args.items.push(userIconItem);
      }
    },
    onActionComplete: function (args) {
      let scheduleElement = this.$refs.scheduleObj.$el;
      if (args.requestType === 'toolBarItemRendered') {
        let userIconEle = scheduleElement.querySelector('.e-schedule-user-icon');
        userIconEle.onclick = () => {
          this.profilePopup.relateTo = userIconEle;
          this.profilePopup.dataBind();
          if (this.profilePopup.element.classList.contains('e-popup-close')) {
            this.profilePopup.show();
          } else {
            this.profilePopup.hide();
          }
        };
      }
      let userContentEle = createElement('div', {
        className: 'e-profile-wrapper'
      });
      scheduleElement.parentElement.appendChild(userContentEle);
      let userIconEle = scheduleElement.querySelector('.e-schedule-user-icon');
      let templateContent = createElement('div', {
        className: 'profile-container', innerHTML: `<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>` });
      this.profilePopup = new Popup(userContentEle, {
        content: templateContent,
        relateTo: userIconEle,
        position: { X: 'left', Y: 'bottom' },
        collision: { X: 'flip', Y: 'flip' },
        targetType: 'relative',
        viewPortElement: scheduleElement,
        width: 210,
        height: 80
      });
      this.profilePopup.hide();
    }
  },
  provide: {
    schedule: [Month]
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-schedule/styles/material3.css";

.e-schedule .e-schedule-toolbar .user-icon,
.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%;
}

/* csslint ignore:start */
.e-schedule .e-schedule-toolbar .user-icon {
  height: 24px;
  min-width: 24px !important;
  width: 24px !important;
}

/* csslint ignore:end */

.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;
}

/* csslint ignore:start */
.e-schedule .e-schedule-toolbar .e-toolbar-pop .e-schedule-user-icon .e-tbar-btn-text {
  padding-left: 8px !important;
}

/* csslint ignore:end */

.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 {
  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>

How to display the view options within the header bar popup

By default, the view-switching options are shown directly in the header bar. To move these options into a popup (commonly used for adaptive or compact layouts), set the enableAdaptiveUI property to true.

<template>
  <div id='app'>
    <div id='container'>
      <ejs-schedule :height='height' :selectedDate='selectedData' :eventSettings='eventSettings'
        :enableAdaptiveUI='enableAdaptiveUI'></ejs-schedule>
    </div>
  </div>
</template>
<script setup>
import { provide } from "vue";
import { ScheduleComponent as EjsSchedule, Day, Week, WorkWeek, Month, Agenda } from '@syncfusion/ej2-vue-schedule';
import { scheduleData } from './datasource.js';

const height = '550px';
const width = '100%';
const enableAdaptiveUI = true;
const eventSettings = { dataSource: scheduleData };
const selectedData = new Date(2018, 1, 15);
const views = ['Day', 'Week', 'WorkWeek', 'Month', 'Agenda,'];

provide('schedule', [Day, Week, WorkWeek, Month, Agenda]);

</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-schedule/styles/material3.css";
</style>
<template>
  <div id='app'>
    <div id='container'>
      <ejs-schedule :height='height' :selectedDate='selectedData' :eventSettings='eventSettings'
        :enableAdaptiveUI='enableAdaptiveUI'></ejs-schedule>
    </div>
  </div>
</template>
<script>

import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda } from '@syncfusion/ej2-vue-schedule';
import { scheduleData } from './datasource.js';

export default {
  name: "App",
  components: {
    "ejs-schedule": ScheduleComponent
  },
  data() {
    return {
      height: '550px',
      width: '100%',
      enableAdaptiveUI: true,
      eventSettings: { dataSource: scheduleData },
      selectedData: new Date(2018, 1, 15),
      views: ['Day', 'Week', 'WorkWeek', 'Month', 'Agenda,'],
    }
  },
  provide: {
    schedule: [Day, Week, WorkWeek, Month, Agenda]
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-schedule/styles/material3.css";
</style>

Refer here to know more about adaptive UI in resources scheduler.

Date header customization

The Scheduler UI that displays the date text on all views are considered as the date header cells. These cells can be customized using either dateHeaderTemplate or renderCell events.

Using date header template

The dateHeaderTemplate property customizes date header cells in Day, Week, and WorkWeek views.

<template>
    <div id='app'>
        <div id='container'>
            <ejs-schedule height='550px' width='100%' :selectedDate='selectedDate' :eventSettings='eventSettings'
                :dateHeaderTemplate="'dateHeaderTemplate'" :cssClass='cssClass'>
                <e-views>
                    <e-view option='Day'></e-view>
                    <e-view option='Week'></e-view>
                    <e-view option='Agenda'></e-view>
                    <e-view option='TimelineWorkWeek'></e-view>
                    <e-view option='TimelineMonth'></e-view>
                </e-views>
                <template v-slot:dateHeaderTemplate="{ data }">
                    <div>
                        <div class="date-text"></div>
                        <div v-html=getWeather(data.date)></div>
                    </div>
                </template>
            </ejs-schedule>
        </div>
    </div>
</template>
<script setup>
import { provide } from "vue";
import { Internationalization } from '@syncfusion/ej2-base';
import { scheduleData } from './datasource.js';
import { ScheduleComponent as EjsSchedule, ViewDirective as EView, ViewsDirective as EViews, Day, Week, Agenda, TimelineViews, TimelineMonth } from '@syncfusion/ej2-vue-schedule';

var instance = new Internationalization();

const eventSettings = { dataSource: scheduleData };
const cssClass = 'schedule-date-header-template';
const selectedDate = new Date(2018, 1, 15);

provide('schedule', [Day, Week, Agenda, TimelineViews, TimelineMonth]);

const getDateHeaderText = function (value) {
    return instance.formatDate(value, { skeleton: 'Ed' });
}
const getWeather = function (Date) {
    switch (Date.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>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-schedule/styles/material3.css";
</style>
<template>
    <div id='app'>
        <div id='container'>
            <ejs-schedule height='550px' width='100%' :selectedDate='selectedDate' :eventSettings='eventSettings'
                :dateHeaderTemplate="'dateHeaderTemplate'" :cssClass='cssClass'>
                <e-views>
                    <e-view option='Day'></e-view>
                    <e-view option='Week'></e-view>
                    <e-view option='Agenda'></e-view>
                    <e-view option='TimelineWorkWeek'></e-view>
                    <e-view option='TimelineMonth'></e-view>
                </e-views>
                <template v-slot:dateHeaderTemplate="{ data }">
                    <div>
                        <div class="date-text"></div>
                        <div v-html=getWeather(data.date)></div>
                    </div>
                </template>
            </ejs-schedule>
        </div>
    </div>
</template>
<script>
import { Internationalization } from '@syncfusion/ej2-base';
import { scheduleData } from './datasource.js';
import { ScheduleComponent, ViewsDirective, ViewDirective, Day, Week, Agenda, TimelineViews, TimelineMonth } from '@syncfusion/ej2-vue-schedule';

var instance = new Internationalization();

export default {
    name: "App",
    components: {
        "ejs-schedule": ScheduleComponent,
        "e-views": ViewsDirective,
        "e-view": ViewDirective
    },
    data() {
        return {
            eventSettings: { dataSource: scheduleData },
            cssClass: 'schedule-date-header-template',
            selectedDate: new Date(2018, 1, 15)
        }
    },
    provide: {
        schedule: [Day, Week, Agenda, TimelineViews, TimelineMonth]
    },
    methods: {
        getDateHeaderText: function (value) {
            return instance.formatDate(value, { skeleton: 'Ed' });
        },
        getWeather: function (Date) {
            switch (Date.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>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-schedule/styles/material3.css";
</style>

Using renderCell event

In month view, the date header template is not applicable and therefore the same customization can be added beside the date text in month cells by making use of the renderCell event.

<template>
  <div id='app'>
    <div id='container'>
      <ejs-schedule :height='height' :selectedDate='selectedData' :eventSettings='eventSettings' :views='views'
        :renderCell='onRenderCell'>
      </ejs-schedule>
    </div>
  </div>
</template>
<script setup>
import { provide } from "vue";
import { ScheduleComponent as EjsSchedule, Month } from '@syncfusion/ej2-vue-schedule';
import { scheduleData } from './datasource.js';

const height = '550px';
const width = '100%';
const eventSettings = { dataSource: scheduleData };
const selectedData = new Date(2018, 1, 15);
const views = ['Month'];
const currentView = 'Month';

const onRenderCell = function (args) {
  if (args.elementType === 'monthCells') {
    let ele = document.createElement('div');
    ele.innerHTML = getWeather(args.date);
    (args.element).appendChild(ele.firstChild);
  }
}
const getWeather = function (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;
  }
}

provide('schedule', [Month]);

</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-schedule/styles/material3.css";

.weather-text {
  float: right;
  margin: -20px 12px 0 0;
  width: 20px;
  height: 20px;
}
</style>
<template>
  <div id='app'>
    <div id='container'>
      <ejs-schedule :height='height' :selectedDate='selectedData' :eventSettings='eventSettings' :views='views'
        :renderCell='onRenderCell'>
      </ejs-schedule>
    </div>
  </div>
</template>
<script>
import { ScheduleComponent, Month } from '@syncfusion/ej2-vue-schedule';
import { scheduleData } from './datasource.js';

export default {
  name: "App",
  components: {
    "ejs-schedule": ScheduleComponent
  },
  data() {
    return {
      height: '550px',
      width: '100%',
      eventSettings: { dataSource: scheduleData },
      selectedData: new Date(2018, 1, 15),
      views: ['Month'],
      currentView: 'Month'
    }
  },
  methods: {
    onRenderCell: function (args) {
      if (args.elementType === 'monthCells') {
        let ele = document.createElement('div');
        ele.innerHTML = this.getWeather(args.date);
        (args.element).appendChild(ele.firstChild);
      }
    },
    getWeather: function (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;
      }
    }
  },
  provide: {
    schedule: [Month]
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-schedule/styles/material3.css";

.weather-text {
  float: right;
  margin: -20px 12px 0 0;
  width: 20px;
  height: 20px;
}
</style>

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 scheduler view being used. However, you can use the dateRangeTemplate option to override the default text and specify your own custom text to be displayed.

The dateRangeTemplate property includes startDate, endDate and currentView options, you can customize the date range text using these available options.

<template>
    <div id='app'>
        <div id='container'>
            <ejs-schedule height='550px' width='100%' :selectedDate='selectedDate'
                :dateRangeTemplate="'dateRangeTemplate'">
                <template v-slot:dateRangeTemplate="{ data }">
                    <div class="date-text">-</div>
                </template>
                <e-views>
                    <e-view option='Day'></e-view>
                    <e-view option='Week'></e-view>
                    <e-view option='Agenda'></e-view>
                    <e-view option='TimelineWorkWeek'></e-view>
                    <e-view option='TimelineMonth'></e-view>
                </e-views>
            </ejs-schedule>
        </div>
    </div>
</template>
<script setup>
import { provide } from "vue";
import { Internationalization } from '@syncfusion/ej2-base';
import { ScheduleComponent as EjsSchedule, ViewDirective as EView, ViewsDirective as EViews, Day, Week, Agenda, TimelineViews, TimelineMonth } from '@syncfusion/ej2-vue-schedule';

var instance = new Internationalization();

const selectedDate = new Date(2018, 1, 15)

provide('schedule', [Day, Week, Agenda, TimelineViews, TimelineMonth]);

const getDateRange = function (value) {
    return instance.formatDate(value, { skeleton: 'Ed' });
}

</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-schedule/styles/material3.css";
</style>
<template>
    <div id='app'>
        <div id='container'>
            <ejs-schedule height='550px' width='100%' :selectedDate='selectedDate'
                :dateRangeTemplate="'dateRangeTemplate'">
                <template v-slot:dateRangeTemplate="{ data }">
                    <div class="date-text">-</div>
                </template>
                <e-views>
                    <e-view option='Day'></e-view>
                    <e-view option='Week'></e-view>
                    <e-view option='Agenda'></e-view>
                    <e-view option='TimelineWorkWeek'></e-view>
                    <e-view option='TimelineMonth'></e-view>
                </e-views>
            </ejs-schedule>
        </div>
    </div>
</template>
<script>

import { Internationalization } from '@syncfusion/ej2-base';
import { ScheduleComponent, ViewDirective, ViewsDirective, Day, Week, Agenda, TimelineViews, TimelineMonth } from '@syncfusion/ej2-vue-schedule';


var instance = new Internationalization();

export default {
    name: "App",
    components: {
        "ejs-schedule": ScheduleComponent,
        "e-views": ViewsDirective,
        "e-view": ViewDirective
   },
    data() {
        return {
            selectedDate: new Date(2018, 1, 15)
        }
    },
    provide: {
        schedule: [Day, Week, Agenda, TimelineViews, TimelineMonth]
    },
    methods: {
        getDateRange: function (value) {
            return instance.formatDate(value, { skeleton: 'Ed' });
        }
    }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-schedule/styles/material3.css";
</style>

Customizing header indent cells

Header indent cells can be customized using the headerIndentTemplate property. This is applicable to both vertical and timeline views.

  • In vertical views, header indent cells can be customized at each resource hierarchy level.
  • In timeline views, the resource header left indent cell can be customized using the same template.

Example: Display custom resource text in the header left indent cell.

<template>
  <div id='app'>
    <div id='container'>
      <ejs-schedule width='100%' height='550px' :headerIndentTemplate="'headerIndentTemplate'"
        :eventSettings='eventSettings' :selectedDate='selectedDate' :group='group'>
        <e-views>
          <e-view option='Day'></e-view>
          <e-view option='Week'></e-view>
          <e-view option='TimelineWeek'></e-view>
          <e-view option='TimelineMonth'></e-view>
        </e-views>
        <template v-slot:headerIndentTemplate="{ data }">
          <div class='e-resource-text'>
            <div class="text">Resources</div>
          </div>
        </template>
        <e-resources>
          <e-resource field='OwnerId' title='Owner' name='Owners' :allowMultiple='allowMultiple'
            :dataSource='ownerDataSource' textField='OwnerText' idField='Id' colorField='OwnerColor'>
          </e-resource>
        </e-resources>
      </ejs-schedule>
    </div>
  </div>
</template>
<script setup>
import { provide } from "vue";
import { ScheduleComponent as EjsSchedule, ViewDirective as EView, ViewsDirective as EViews, ResourcesDirective as EResources, ResourceDirective as EResource, Week, Day, TimelineViews, TimelineMonth } from '@syncfusion/ej2-vue-schedule';
import { resourceData } from './datasource.js';

const width = '100%';
const height = '550px';
const currentView = 'Week';
const selectedDate = new Date(2018, 3, 1);
const group = {
  resources: ['Owners']
};
const allowMultiple = true;
const ownerDataSource = [
  { OwnerText: 'Nancy', Id: 1, OwnerColor: '#ffaa00' },
  { OwnerText: 'Steven', Id: 2, OwnerColor: '#f8a398' },
  { OwnerText: 'Michael', Id: 3, OwnerColor: '#7499e1' }
];
const eventSettings = { dataSource: resourceData };

provide('schedule', [Day, Week, TimelineViews, TimelineMonth]);

</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-schedule/styles/material3.css";

.e-schedule .e-timeline-view .e-resource-left-td {
  vertical-align: bottom;
}

.e-schedule .e-timeline-view .e-resource-left-td .e-resource-text,
.e-schedule .e-timeline-month-view .e-resource-left-td .e-resource-text {
  font-weight: 500;
  padding: 0;
}

.e-schedule .e-timeline-view .e-resource-left-td .e-resource-text>div {
  border-right: 1px solid rgba(0, 0, 0, 0.12);
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  flex: 0 0 33.3%;
  font-weight: 500;
  height: 36px;
  line-height: 34px;
  padding-left: 50px;
}

.e-schedule .e-timeline-month-view .e-resource-left-td .e-resource-text>div {
  border-right: 1px solid rgba(0, 0, 0, 0.12);
  flex: 0 0 33.3%;
  font-weight: 500;
  height: 36px;
  line-height: 34px;
  padding-left: 50px;
}

/* csslint ignore:start */
.e-schedule .e-vertical-view .e-left-indent-wrap table tbody td.e-resource-cells {
  border-bottom-color: rgba(0, 0, 0, 0.12);
}

.e-schedule .e-vertical-view .e-left-indent-wrap table tbody td.e-resource-cells .e-resource-text {
  font-weight: 500;
}

.e-schedule .e-vertical-view .e-left-indent-wrap table tbody td.e-header-cells .e-resource-text,
.e-schedule .e-vertical-view .e-left-indent-wrap table tbody td.e-all-day-cells .e-resource-text {
  display: none;
}

/* csslint ignore:end */
</style>
<template>
  <div id='app'>
    <div id='container'>
      <ejs-schedule width='100%' height='550px' :headerIndentTemplate="'headerIndentTemplate'"
        :eventSettings='eventSettings' :selectedDate='selectedDate' :group='group'>
        <e-views>
          <e-view option='Day'></e-view>
          <e-view option='Week'></e-view>
          <e-view option='TimelineWeek'></e-view>
          <e-view option='TimelineMonth'></e-view>
        </e-views>
        <template v-slot:headerIndentTemplate="{ data }">
          <div class='e-resource-text'>
            <div class="text">Resources</div>
          </div>
        </template>
        <e-resources>
          <e-resource field='OwnerId' title='Owner' name='Owners' :allowMultiple='allowMultiple'
            :dataSource='ownerDataSource' textField='OwnerText' idField='Id' colorField='OwnerColor'>
          </e-resource>
        </e-resources>
      </ejs-schedule>
    </div>
  </div>
</template>
<script>
import { ScheduleComponent, ViewDirective, ViewsDirective, ResourceDirective, ResourcesDirective, Week, Day, TimelineViews, TimelineMonth } from '@syncfusion/ej2-vue-schedule';
import { resourceData } from './datasource.js';

export default {
  name: "App",
  components: {
    "ejs-schedule": ScheduleComponent,
    "e-views": ViewsDirective,
    "e-view": ViewDirective,
    "e-resources": ResourcesDirective,
    "e-resource": ResourceDirective
  },

  data() {
    return {
      width: '100%',
      height: '550px',
      currentView: 'Week',
      selectedDate: new Date(2018, 3, 1),
      group: {
        resources: ['Owners']
      },
      allowMultiple: true,
      ownerDataSource: [
        { OwnerText: 'Nancy', Id: 1, OwnerColor: '#ffaa00' },
        { OwnerText: 'Steven', Id: 2, OwnerColor: '#f8a398' },
        { OwnerText: 'Michael', Id: 3, OwnerColor: '#7499e1' }
      ],
      eventSettings: { dataSource: resourceData },
    }
  },
  provide: {
    schedule: [Day, Week, TimelineViews, TimelineMonth]
  }
}
</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-schedule/styles/material3.css";

.e-schedule .e-timeline-view .e-resource-left-td {
  vertical-align: bottom;
}

.e-schedule .e-timeline-view .e-resource-left-td .e-resource-text,
.e-schedule .e-timeline-month-view .e-resource-left-td .e-resource-text {
  font-weight: 500;
  padding: 0;
}

.e-schedule .e-timeline-view .e-resource-left-td .e-resource-text>div {
  border-right: 1px solid rgba(0, 0, 0, 0.12);
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  flex: 0 0 33.3%;
  font-weight: 500;
  height: 36px;
  line-height: 34px;
  padding-left: 50px;
}

.e-schedule .e-timeline-month-view .e-resource-left-td .e-resource-text>div {
  border-right: 1px solid rgba(0, 0, 0, 0.12);
  flex: 0 0 33.3%;
  font-weight: 500;
  height: 36px;
  line-height: 34px;
  padding-left: 50px;
}

/* csslint ignore:start */
.e-schedule .e-vertical-view .e-left-indent-wrap table tbody td.e-resource-cells {
  border-bottom-color: rgba(0, 0, 0, 0.12);
}

.e-schedule .e-vertical-view .e-left-indent-wrap table tbody td.e-resource-cells .e-resource-text {
  font-weight: 500;
}

.e-schedule .e-vertical-view .e-left-indent-wrap table tbody td.e-header-cells .e-resource-text,
.e-schedule .e-vertical-view .e-left-indent-wrap table tbody td.e-all-day-cells .e-resource-text {
  display: none;
}

/* csslint ignore:end */
</style>

Visit the Vue Scheduler feature tour page for a complete overview. Explore live examples at Vue Scheduler example to see the header bar customization in action