Header rows in Vue Schedule component
12 Jul 202423 minutes to read
The Timeline views can have additional header rows other than its default date and time header rows. It is possible to show individual header rows for displaying year, month and week separately using the headerRows
property. This property is applicable only on the timeline views. The possible rows which can be added using headerRows
property are as follows.
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 shows the Scheduler displaying all the available header rows on timeline views.
<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/material.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-schedule/styles/material.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/material.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-schedule/styles/material.css";
</style>
Display year and month rows in timeline views
To display the timeline Scheduler simply with year and month names alone, define the option Year
and Month
within 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/material.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-schedule/styles/material.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/material.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-schedule/styles/material.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/material.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-schedule/styles/material.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/material.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-schedule/styles/material.css";
</style>
Timeline view displaying dates of a complete year
It is possible to display a complete year in a timeline view by setting interval
interval
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/material.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-schedule/styles/material.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/material.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-schedule/styles/material.css";
</style>
Customizing the header rows using template
You can customize the text of the header rows and display any images or formatted text on each individual header rows using the built-in template
option available within the headerRows
property.
<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/material.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-schedule/styles/material.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/material.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-schedule/styles/material.css";
</style>
You can refer to our Vue Scheduler feature tour page for its groundbreaking feature representations. You can also explore our Vue Scheduler example to knows how to present and manipulate data.