HelpBot Assistant

How can I help you?

Header rows in Vue Schedule component

3 Feb 202624 minutes to read

Timeline views in the Vue Schedule component support additional header rows beyond the default date and time headers. Using the headerRows property, multiple header rows can be displayed to represent different calendar units such as year, month, week, and date. This feature is applicable only to timeline views.

The following header row types are supported:

  • Year
  • Month
  • Week
  • Date
  • Hour

The Hour row is not applicable for Timeline month view.

Check out this video to learn about customizing header rows of the timeline views in Vue Scheduler.

The following example demonstrates a timeline Scheduler configured with all available header rows.

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


const height = '550px';
const width = '100%';
const startHour = '09:00';
const endHour = '13:00';
const headerRows = [
  { option: 'Year' },
  { option: 'Month' },
  { option: 'Week' },
  { option: 'Date' },
  { option: 'Hour' }
];
const views = ['TimelineWeek'];
const selectedDate = new Date(2018, 11, 31);
const eventSettings = { dataSource: scheduleData };

provide('schedule', [TimelineViews]);


</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' :width='width' :selectedDate='selectedDate' :eventSettings='eventSettings'
        :views='views' :startHour='startHour' :endHour='endHour' :headerRows='headerRows'></ejs-schedule>
    </div>
  </div>
</template>
<script>
import { ScheduleComponent, TimelineViews } from '@syncfusion/ej2-vue-schedule';
import { scheduleData } from './datasource.js';

export default {
  name: "App",
  components: {
    "ejs-schedule": ScheduleComponent
  },
  data() {
    return {
      height: '550px',
      width: '100%',
      startHour: '09:00',
      endHour: '13:00',
      headerRows: [
        { option: 'Year' },
        { option: 'Month' },
        { option: 'Week' },
        { option: 'Date' },
        { option: 'Hour' }
      ],
      views: ['TimelineWeek'],
      selectedDate: new Date(2018, 11, 31),
      eventSettings: { dataSource: scheduleData }
    }
  },
  provide: {
    schedule: [TimelineViews]
  }
}

</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>

Display year and month rows in timeline views

To display only the Year and Month header rows in timeline views, include the Year and Month options in the headerRows property.

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

const width = '100%';
const height = '550px';
const selectedDate = new Date(2018, 11, 31);
const headerRows = [{ option: 'Year' }, { option: 'Month' }];
const currentView = 'TimelineMonth';
const views = [{ option: 'TimelineMonth', interval: 24 }];
const eventSettings = { dataSource: scheduleData };

provide('schedule', [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";
</style>
<template>
  <div id='app'>
    <div id='container'>
      <ejs-schedule :height='height' :width='width' :selectedDate='selectedDate' :eventSettings='eventSettings'
        :views='views' :currentView='currentView' :headerRows='headerRows'></ejs-schedule>
    </div>
  </div>
</template>
<script>
import { ScheduleComponent, TimelineMonth } from '@syncfusion/ej2-vue-schedule';
import { scheduleData } from './datasource.js';

export default {
  name: "App",
  components: {
    "ejs-schedule": ScheduleComponent
  },
  data() {
    return {
      width: '100%',
      height: '550px',
      selectedDate: new Date(2018, 11, 31),
      headerRows: [{ option: 'Year' }, { option: 'Month' }],
      currentView: 'TimelineMonth',
      views: [{ option: 'TimelineMonth', interval: 24 }],
      eventSettings: { dataSource: scheduleData }
    }
  },
  provide: {
    schedule: [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";
</style>

Display week numbers in timeline views

The week number can be displayed in a separate header row of the timeline Scheduler by setting Week option within headerRows property.

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

const width = '100%', height = '550px';
const selectedDate = new Date(2018, 11, 31);
const headerRows = [{ option: 'Week' }, { option: 'Date' }, { option: 'Hour' }];
const currentView = 'TimelineMonth';
const views = [
  { option: 'TimelineMonth', interval: 24 },
  { option: 'TimelineWeek', interval: 3 },
  { option: 'TimelineDay', interval: 4 }
];
const eventSettings = { dataSource: scheduleData }

provide('schedule', [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";
</style>
<template>
  <div id='app'>
    <div id='container'>
      <ejs-schedule :height='height' :width='width' :selectedDate='selectedDate' :eventSettings='eventSettings'
        :views='views' :currentView='currentView' :headerRows='headerRows'></ejs-schedule>
    </div>
  </div>
</template>
<script>
import { ScheduleComponent, TimelineMonth, TimelineViews } from '@syncfusion/ej2-vue-schedule';
import { scheduleData } from './datasource.js';

export default {
  name: "App",
  components: {
    "ejs-schedule": ScheduleComponent
  },
  data() {
    return {
      width: '100%', height: '550px',
      selectedDate: new Date(2018, 11, 31),
      headerRows: [{ option: 'Week' }, { option: 'Date' }, { option: 'Hour' }],
      currentView: 'TimelineMonth',
      views: [
        { option: 'TimelineMonth', interval: 24 },
        { option: 'TimelineWeek', interval: 3 },
        { option: 'TimelineDay', interval: 4 }
      ],
      eventSettings: { dataSource: scheduleData }
    }
  },
  provide: {
    schedule: [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";
</style>

Timeline view displaying dates of a complete year

It is possible to display a complete year in a timeline view by setting intervalinterval value as 12 and defining TimelineMonth view option within the views property of Scheduler.

<template>
  <div id='app'>
    <div id='container'>
      <ejs-schedule :height='height' :width='width' :selectedDate='selectedDate' :eventSettings='eventSettings'
        :views='views' :headerRows='headerRows'></ejs-schedule>
    </div>
  </div>
</template>
<script setup>
import { provide } from "vue";
import { ScheduleComponent as EjsSchedule, TimelineMonth, TimelineViews } from '@syncfusion/ej2-vue-schedule';
import { eventData } from './datasource.js';

const width = '100%', height = '550px';
const selectedDate = new Date(2018, 0, 1);
const headerRows = [{ option: 'Month' }, { option: 'Date' }];
const views = [{ option: 'TimelineMonth', interval: 12 }];
const eventSettings = { dataSource: eventData }

provide('schedule', [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";
</style>
<template>
  <div id='app'>
    <div id='container'>
      <ejs-schedule :height='height' :width='width' :selectedDate='selectedDate' :eventSettings='eventSettings'
        :views='views' :headerRows='headerRows'></ejs-schedule>
    </div>
  </div>
</template>
<script>
import { ScheduleComponent, TimelineMonth, TimelineViews } from '@syncfusion/ej2-vue-schedule';
import { eventData } from './datasource.js';

export default {
  name: "App",
  components: {
    "ejs-schedule": ScheduleComponent
  },
  data() {
    return {
      width: '100%', height: '550px',
      selectedDate: new Date(2018, 0, 1),
      headerRows: [{ option: 'Month' }, { option: 'Date' }],
      views: [{ option: 'TimelineMonth', interval: 12 }],
      eventSettings: { dataSource: eventData }
    }
  },
  provide: {
    schedule: [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";
</style>

Customizing header rows using template

The appearance and content of individual header rows can be customized using the template option within the headerRows property. Templates allow inserting formatted text, images, or custom markup for each header row.

<template>
  <div id='app'>
    <div id='container'>
      <ejs-schedule :height='height' :width='width' :selectedDate='selectedDate' :eventSettings='eventSettings'
        :views='views'>
        <e-header-rows>
          <e-header-row option="Month" :template="'monthHeaderTemplate'"></e-header-row>
          <template v-slot:monthHeaderTemplate="{ data }">
            <span class="month"></span>
          </template>
          <e-header-row option="Week" :template="'weekHeaderTemplate'"></e-header-row>
          <template v-slot:weekHeaderTemplate="{ data }">
            <span class="week"></span>
          </template>
          <e-header-row option="Week" :template="'yearHeaderTemplate'"></e-header-row>
          <template v-slot:yearHeaderTemplate="{ data }">
            <span class="year"></span>
          </template>
        </e-header-rows>
      </ejs-schedule>
    </div>
  </div>
</template>
<script setup>
import { provide } from "vue";
import { ScheduleComponent as EjsSchedule, HeaderRowsDirective as EHeaderRows, HeaderRowDirective as EHeaderRow, TimelineMonth, getWeekNumber } from '@syncfusion/ej2-vue-schedule';
import { Internationalization } from '@syncfusion/ej2-base';
import { eventData } from './datasource.js';

var instance = new Internationalization();

const width = '100%';
const height = '550px';
const selectedDate = new Date(2018, 0, 1);
const views = [{ option: 'TimelineMonth' }];
const eventSettings = { dataSource: eventData }

provide('schedule', [TimelineMonth]);
const getWeekDetails = function (value) {
  return 'Week: ' + getWeekNumber(value.date);
}
const getMonthDetails = function (value) {
  return 'Month ' + instance.formatDate(value.date, { skeleton: 'M' });
}
const getYearDetails = function (value) {
  return 'Year: ' + instance.formatDate(value.date, { skeleton: 'y' });
}

</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' :width='width' :selectedDate='selectedDate' :eventSettings='eventSettings'
        :views='views'>
        <e-header-rows>
          <e-header-row option="Month" :template="'monthHeaderTemplate'"></e-header-row>
          <template v-slot:monthHeaderTemplate="{ data }">
            <span class="month"></span>
          </template>
          <e-header-row option="Week" :template="'weekHeaderTemplate'"></e-header-row>
          <template v-slot:weekHeaderTemplate="{ data }">
            <span class="week"></span>
          </template>
          <e-header-row option="Week" :template="'yearHeaderTemplate'"></e-header-row>
          <template v-slot:yearHeaderTemplate="{ data }">
            <span class="year"></span>
          </template>
        </e-header-rows>
      </ejs-schedule>
    </div>
  </div>
</template>
<script>
import { ScheduleComponent, HeaderRowDirective, HeaderRowsDirective, TimelineMonth, getWeekNumber } from '@syncfusion/ej2-vue-schedule';
import { Internationalization } from '@syncfusion/ej2-base';
import { eventData } from './datasource.js';

var instance = new Internationalization();

export default {
  name: "App",
  components: {
    "ejs-schedule": ScheduleComponent,
    "e-header-rows": HeaderRowsDirective,
    "e-header-row": HeaderRowDirective
  },
  data() {
    return {
      width: '100%',
      height: '550px',
      selectedDate: new Date(2018, 0, 1),
      views: [{ option: 'TimelineMonth' }],
      eventSettings: { dataSource: eventData }
    }
  },
  provide: {
    schedule: [TimelineMonth]
  },
  methods: {
    getWeekDetails: function (value) {
      return 'Week: ' + getWeekNumber(value.date);
    },
    getMonthDetails: function (value) {
      return 'Month ' + instance.formatDate(value.date, { skeleton: 'M' });
    },
    getYearDetails: function (value) {
      return 'Year: ' + instance.formatDate(value.date, { skeleton: 'y' });
    }
  }
}

</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>

For a comprehensive overview of Scheduler features, visit the Vue Scheduler feature tour page. Explore live examples in the Vue Scheduler example demo to see timeline header rows in action.