Search results

Header Customization in Vue Schedule component

The header part of Scheduler can be customized easily with the built-in options available.

Show or Hide header bar

By default, the header bar holds the date and view navigation options, through which the user can switch between the dates and various views. This header bar can be hidden from the UI by setting false to the showHeaderBar property. It’s default value is true.

Source
Preview
app.vue
datasource.js
<template>
  <div id='app'>
    <div id='container'>
        <ejs-schedule :height='height' :selectedDate='selectedData' :eventSettings='eventSettings' :showHeaderBar='showHeaderBar'></ejs-schedule>
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
import { SchedulePlugin, Day, Week, WorkWeek } from '@syncfusion/ej2-vue-schedule';
import { scheduleData } from './datasource.js';

Vue.use(SchedulePlugin);
export default {
  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/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>
define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.fifaEventsData = [
        {
            Id: 1,
            Subject: 'RUSSIA vs SAUDI ARABIA',
            Description: 'Group A',
            StartTime: new Date(2018, 5, 14, 15, 0),
            EndTime: new Date(2018, 5, 14, 17, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Moscow',
            CategoryColor: '#1aaa55',
            GroupId: 1
        }, {
            Id: 2,
            Subject: 'EGYPT vs URUGUAY',
            Description: 'Group A',
            StartTime: new Date(2018, 5, 15, 12, 0),
            EndTime: new Date(2018, 5, 15, 14, 0),
            StartTimezone: 'Asia/Yekaterinburg',
            EndTimezone: 'Asia/Yekaterinburg',
            City: 'Ekaterinburg',
            CategoryColor: '#1aaa55',
            GroupId: 1
        }, {
            Id: 3,
            Subject: 'MOROCCO vs IR IRAN',
            Description: 'Group B',
            StartTime: new Date(2018, 5, 15, 15, 0),
            EndTime: new Date(2018, 5, 15, 17, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Saint Petersburg',
            CategoryColor: '#357cd2',
            GroupId: 2
        }, {
            Id: 4,
            Subject: 'PORTUGAL vs SPAIN',
            Description: 'Group B',
            StartTime: new Date(2018, 5, 15, 18, 0),
            EndTime: new Date(2018, 5, 15, 20, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Sochi',
            CategoryColor: '#357cd2',
            GroupId: 2
        }, {
            Id: 5,
            Subject: 'FRANCE vs AUSTRALIA',
            Description: 'Group C',
            StartTime: new Date(2018, 5, 16, 10, 0),
            EndTime: new Date(2018, 5, 16, 12, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Kazan',
            CategoryColor: '#7fa900',
            GroupId: 3
        }, {
            Id: 6,
            Subject: 'ARGENTINA vs ICELAND',
            Description: 'Group D',
            StartTime: new Date(2018, 5, 16, 13, 0),
            EndTime: new Date(2018, 5, 16, 15, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Moscow',
            CategoryColor: '#ea7a57',
            GroupId: 4
        }, {
            Id: 7,
            Subject: 'PERU vs DENMARK',
            Description: 'Group C',
            StartTime: new Date(2018, 5, 16, 16, 0),
            EndTime: new Date(2018, 5, 16, 18, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Saransk',
            CategoryColor: '#7fa900',
            GroupId: 1
        }, {
            Id: 8,
            Subject: 'CROATIA vs NIGERIA',
            Description: 'Group D',
            StartTime: new Date(2018, 5, 16, 19, 0),
            EndTime: new Date(2018, 5, 16, 21, 0),
            StartTimezone: 'Europe/Kaliningrad',
            EndTimezone: 'Europe/Kaliningrad',
            City: 'Kaliningrad',
            CategoryColor: '#ea7a57',
            GroupId: 4
        }, {
            Id: 9,
            Subject: 'COSTA RICA vs SERBIA',
            Description: 'Group E',
            StartTime: new Date(2018, 5, 17, 12, 0),
            EndTime: new Date(2018, 5, 17, 14, 0),
            StartTimezone: 'Europe/Samara',
            EndTimezone: 'Europe/Samara',
            City: 'Samara',
            CategoryColor: '#00bdae',
            GroupId: 5
        }, {
            Id: 10,
            Subject: 'GERMANY vs MEXICO',
            Description: 'Group F',
            StartTime: new Date(2018, 5, 17, 15, 0),
            EndTime: new Date(2018, 5, 17, 17, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Moscow',
            CategoryColor: '#f57f17',
            GroupId: 6
        }, {
            Id: 11,
            Subject: 'BRAZIL vs SWITZERLAND',
            Description: 'Group E',
            StartTime: new Date(2018, 5, 17, 18, 0),
            EndTime: new Date(2018, 5, 17, 20, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Rostov-On-Don',
            CategoryColor: '#00bdae',
            GroupId: 5
        }, {
            Id: 12,
            Subject: 'SWEDEN vs KOREA REPUBLIC',
            Description: 'Group F',
            StartTime: new Date(2018, 5, 18, 12, 0),
            EndTime: new Date(2018, 5, 18, 14, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Nizhny Novgorod',
            CategoryColor: '#f57f17',
            GroupId: 6
        }, {
            Id: 13,
            Subject: 'BELGIUM vs PANAMA',
            Description: 'Group G',
            StartTime: new Date(2018, 5, 18, 15, 0),
            EndTime: new Date(2018, 5, 18, 17, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Sochi',
            CategoryColor: '#8e24aa',
            GroupId: 7
        }, {
            Id: 14,
            Subject: 'TUNISIA vs ENGLAND',
            Description: 'Group G',
            StartTime: new Date(2018, 5, 18, 18, 0),
            EndTime: new Date(2018, 5, 18, 20, 0),
            StartTimezone: 'Europe/Volgograd',
            EndTimezone: 'Europe/Volgograd',
            City: 'Volgograd',
            CategoryColor: '#8e24aa',
            GroupId: 7
        }, {
            Id: 15,
            Subject: 'COLOMBIA vs JAPAN',
            Description: 'Group H',
            StartTime: new Date(2018, 5, 19, 12, 0),
            EndTime: new Date(2018, 5, 19, 14, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Saransk',
            CategoryColor: '#7fa900',
            GroupId: 8
        }, {
            Id: 16,
            Subject: 'POLAND vs SENEGAL',
            Description: 'Group H',
            StartTime: new Date(2018, 5, 19, 15, 0),
            EndTime: new Date(2018, 5, 19, 17, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Moscow',
            CategoryColor: '#7fa900',
            GroupId: 8
        }, {
            Id: 17,
            Subject: 'RUSSIA vs EGYPT',
            Description: 'Group A',
            StartTime: new Date(2018, 5, 19, 18, 0),
            EndTime: new Date(2018, 5, 19, 20, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Saint Petersburg',
            CategoryColor: '#1aaa55',
            GroupId: 1
        }, {
            Id: 18,
            Subject: 'PORTUGAL vs MOROCCO',
            Description: 'Group B',
            StartTime: new Date(2018, 5, 20, 12, 0),
            EndTime: new Date(2018, 5, 20, 14, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Rostov-On-Don',
            CategoryColor: '#357cd2',
            GroupId: 2
        }, {
            Id: 19,
            Subject: 'URUGUAY vs SAUDI ARABIA',
            Description: 'Group A',
            StartTime: new Date(2018, 5, 20, 15, 0),
            EndTime: new Date(2018, 5, 20, 17, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Moscow',
            CategoryColor: '#1aaa55',
            GroupId: 1
        }, {
            Id: 20,
            Subject: 'IR IRAN vs SPAIN',
            Description: 'Group B',
            StartTime: new Date(2018, 5, 20, 18, 0),
            EndTime: new Date(2018, 5, 20, 20, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Kazan',
            CategoryColor: '#357cd2',
            GroupId: 2
        }, {
            Id: 21,
            Subject: 'DENMARK vs AUSTRALIA',
            Description: 'Group C',
            StartTime: new Date(2018, 5, 21, 12, 0),
            EndTime: new Date(2018, 5, 21, 14, 0),
            StartTimezone: 'Europe/Samara',
            EndTimezone: 'Europe/Samara',
            City: 'Samara',
            CategoryColor: '#7fa900',
            GroupId: 3
        }, {
            Id: 22,
            Subject: 'FRANCE vs PERU',
            Description: 'Group D',
            StartTime: new Date(2018, 5, 21, 15, 0),
            EndTime: new Date(2018, 5, 21, 17, 0),
            StartTimezone: 'Asia/Yekaterinburg',
            EndTimezone: 'Asia/Yekaterinburg',
            City: 'Ekaterinburg',
            CategoryColor: '#ea7a57',
            GroupId: 4
        }, {
            Id: 23,
            Subject: 'ARGENTINA vs CROATIA',
            Description: 'Group D',
            StartTime: new Date(2018, 5, 21, 18, 0),
            EndTime: new Date(2018, 5, 21, 20, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Nizhny Novgorod',
            CategoryColor: '#ea7a57',
            GroupId: 4
        }, {
            Id: 24,
            Subject: 'BRAZIL vs COSTA RICA',
            Description: 'Group E',
            StartTime: new Date(2018, 5, 22, 12, 0),
            EndTime: new Date(2018, 5, 22, 14, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Saint Petersburg',
            CategoryColor: '#00bdae',
            GroupId: 5
        }, {
            Id: 25,
            Subject: 'NIGERIA vs ICELAND',
            Description: 'Group D',
            StartTime: new Date(2018, 5, 22, 15, 0),
            EndTime: new Date(2018, 5, 22, 17, 0),
            StartTimezone: 'Europe/Volgograd',
            EndTimezone: 'Europe/Volgograd',
            City: 'Volgograd',
            CategoryColor: '#ea7a57',
            GroupId: 4
        }, {
            Id: 26,
            Subject: 'SERBIA vs SWITZERLAND',
            Description: 'Group E',
            StartTime: new Date(2018, 5, 22, 18, 0),
            EndTime: new Date(2018, 5, 22, 20, 0),
            StartTimezone: 'Europe/Kaliningrad',
            EndTimezone: 'Europe/Kaliningrad',
            City: 'Kaliningrad',
            CategoryColor: '#00bdae',
            GroupId: 5
        }, {
            Id: 27,
            Subject: 'BELGIUM vs TUNISIA',
            Description: 'Group G',
            StartTime: new Date(2018, 5, 23, 12, 0),
            EndTime: new Date(2018, 5, 23, 14, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Moscow',
            CategoryColor: '#8e24aa',
            GroupId: 7
        }, {
            Id: 28,
            Subject: 'KOREA REPUBLIC vs MEXICO',
            Description: 'Group F',
            StartTime: new Date(2018, 5, 23, 15, 0),
            EndTime: new Date(2018, 5, 23, 17, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Rostov-On-Don',
            CategoryColor: '#f57f17',
            GroupId: 6
        }, {
            Id: 29,
            Subject: 'GERMANY vs SWEDEN',
            Description: 'Group F',
            StartTime: new Date(2018, 5, 23, 18, 0),
            EndTime: new Date(2018, 5, 23, 20, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Sochi',
            CategoryColor: '#f57f17',
            GroupId: 6
        }, {
            Id: 30,
            Subject: 'ENGLAND vs PANAMA',
            Description: 'Group G',
            StartTime: new Date(2018, 5, 24, 12, 0),
            EndTime: new Date(2018, 5, 24, 14, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Nizhny Novgorod',
            CategoryColor: '#8e24aa',
            GroupId: 7
        }, {
            Id: 31,
            Subject: 'JAPAN vs SENEGAL',
            Description: 'Group H',
            StartTime: new Date(2018, 5, 24, 15, 0),
            EndTime: new Date(2018, 5, 24, 17, 0),
            StartTimezone: 'Asia/Yekaterinburg',
            EndTimezone: 'Asia/Yekaterinburg',
            City: 'Ekaterinburg',
            CategoryColor: '#7fa900',
            GroupId: 8
        }, {
            Id: 32,
            Subject: 'POLAND vs COLOMBIA',
            Description: 'Group H',
            StartTime: new Date(2018, 5, 24, 18, 0),
            EndTime: new Date(2018, 5, 24, 20, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Kazan',
            CategoryColor: '#7fa900',
            GroupId: 8
        }, {
            Id: 33,
            Subject: 'URUGUAY vs RUSSIA',
            Description: 'Group A',
            StartTime: new Date(2018, 5, 25, 14, 0),
            EndTime: new Date(2018, 5, 25, 16, 0),
            StartTimezone: 'Europe/Samara',
            EndTimezone: 'Europe/Samara',
            City: 'Samara',
            CategoryColor: '#1aaa55',
            GroupId: 1
        }, {
            Id: 34,
            Subject: 'SAUDI ARABIA vs EGYPT',
            Description: 'Group A',
            StartTime: new Date(2018, 5, 25, 14, 0),
            EndTime: new Date(2018, 5, 25, 16, 0),
            StartTimezone: 'Europe/Volgograd',
            EndTimezone: 'Europe/Volgograd',
            City: 'Volgograd',
            CategoryColor: '#1aaa55',
            GroupId: 1
        }, {
            Id: 35,
            Subject: 'IR IRAN vs PORTUGAL',
            Description: 'Group B',
            StartTime: new Date(2018, 5, 25, 18, 0),
            EndTime: new Date(2018, 5, 25, 20, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Saransk',
            CategoryColor: '#357cd2',
            GroupId: 2
        }, {
            Id: 36,
            Subject: 'SPAIN vs MOROCCO',
            Description: 'Group B',
            StartTime: new Date(2018, 5, 25, 18, 0),
            EndTime: new Date(2018, 5, 25, 20, 0),
            StartTimezone: 'Europe/Kaliningrad',
            EndTimezone: 'Europe/Kaliningrad',
            City: 'Kaliningrad',
            CategoryColor: '#357cd2',
            GroupId: 2
        }, {
            Id: 37,
            Subject: 'DENMARK vs FRANCE',
            Description: 'Group C',
            StartTime: new Date(2018, 5, 26, 14, 0),
            EndTime: new Date(2018, 5, 26, 16, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Moscow',
            CategoryColor: '#7fa900',
            GroupId: 2
        }, {
            Id: 38,
            Subject: 'AUSTRALIA vs PERU',
            Description: 'Group C',
            StartTime: new Date(2018, 5, 26, 14, 0),
            EndTime: new Date(2018, 5, 26, 16, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Sochi',
            CategoryColor: '#7fa900',
            GroupId: 3
        }, {
            Id: 39,
            Subject: 'NIGERIA vs ARGENTINA',
            Description: 'Group D',
            StartTime: new Date(2018, 5, 26, 18, 0),
            EndTime: new Date(2018, 5, 26, 20, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Saint Petersburg',
            CategoryColor: '#ea7a57',
            GroupId: 4
        }, {
            Id: 40,
            Subject: 'ICELAND vs CROATIA',
            Description: 'Group D',
            StartTime: new Date(2018, 5, 26, 18, 0),
            EndTime: new Date(2018, 5, 26, 20, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Rostov-On-Don',
            CategoryColor: '#ea7a57',
            GroupId: 4
        }, {
            Id: 41,
            Subject: 'MEXICO vs SWEDEN',
            Description: 'Group F',
            StartTime: new Date(2018, 5, 27, 14, 0),
            EndTime: new Date(2018, 5, 27, 16, 0),
            StartTimezone: 'Asia/Yekaterinburg',
            EndTimezone: 'Asia/Yekaterinburg',
            City: 'Ekaterinburg',
            CategoryColor: '#f57f17',
            GroupId: 6
        }, {
            Id: 42,
            Subject: 'KOREA REPUBLIC vs GERMANY',
            Description: 'Group F',
            StartTime: new Date(2018, 5, 27, 14, 0),
            EndTime: new Date(2018, 5, 27, 16, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Kazan',
            CategoryColor: '#f57f17',
            GroupId: 6
        }, {
            Id: 43,
            Subject: 'SERBIA vs BRAZIL',
            Description: 'Group E',
            StartTime: new Date(2018, 5, 27, 18, 0),
            EndTime: new Date(2018, 5, 27, 20, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Moscow',
            CategoryColor: '#00bdae',
            GroupId: 5
        }, {
            Id: 44,
            Subject: 'SWITZERLAND vs COSTA RICA',
            Description: 'Group E',
            StartTime: new Date(2018, 5, 27, 18, 0),
            EndTime: new Date(2018, 5, 27, 20, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Nizhny Novgorod',
            CategoryColor: '#00bdae',
            GroupId: 5
        }, {
            Id: 45,
            Subject: 'JAPAN vs POLAND',
            Description: 'Group H',
            StartTime: new Date(2018, 5, 28, 14, 0),
            EndTime: new Date(2018, 5, 28, 16, 0),
            StartTimezone: 'Europe/Volgograd',
            EndTimezone: 'Europe/Volgograd',
            City: 'Volgograd',
            CategoryColor: '#7fa900',
            GroupId: 8
        }, {
            Id: 46,
            Subject: 'SENEGAL vs COLOMBIA',
            Description: 'Group H',
            StartTime: new Date(2018, 5, 28, 14, 0),
            EndTime: new Date(2018, 5, 28, 16, 0),
            StartTimezone: 'Europe/Samara',
            EndTimezone: 'Europe/Samara',
            City: 'Samara',
            CategoryColor: '#7fa900',
            GroupId: 8
        }, {
            Id: 47,
            Subject: 'PANAMA vs TUNISIA',
            Description: 'Group G',
            StartTime: new Date(2018, 5, 28, 18, 0),
            EndTime: new Date(2018, 5, 28, 20, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Saransk',
            CategoryColor: '#8e24aa',
            GroupId: 4
        }, {
            Id: 48,
            Subject: 'ENGLAND vs BELGIUM',
            Description: 'Group G',
            StartTime: new Date(2018, 5, 28, 18, 0),
            EndTime: new Date(2018, 5, 28, 20, 0),
            StartTimezone: 'Europe/Kaliningrad',
            EndTimezone: 'Europe/Kaliningrad',
            City: 'Kaliningrad',
            CategoryColor: '#8e24aa',
            GroupId: 4
        },
    ];

    exports.scheduleData = [
        {
            Id: 1,
            Subject: 'Explosion of Betelgeuse Star',
            StartTime: new Date(2018, 1, 11, 9, 30),
            EndTime: new Date(2018, 1, 11, 11, 0),
            CategoryColor: '#1aaa55'
        }, {
            Id: 2,
            Subject: 'Thule Air Crash Report',
            StartTime: new Date(2018, 1, 12, 12, 0),
            EndTime: new Date(2018, 1, 12, 14, 0),
            CategoryColor: '#357cd2'
        }, {
            Id: 3,
            Subject: 'Blue Moon Eclipse',
            StartTime: new Date(2018, 1, 13, 9, 30),
            EndTime: new Date(2018, 1, 13, 11, 0),
            CategoryColor: '#7fa900'
        }, {
            Id: 4,
            Subject: 'Meteor Showers in 2018',
            StartTime: new Date(2018, 1, 14, 13, 0),
            EndTime: new Date(2018, 1, 14, 14, 30),
            CategoryColor: '#ea7a57'
        }, {
            Id: 5,
            Subject: 'Milky Way as Melting pot',
            StartTime: new Date(2018, 1, 15, 12, 0),
            EndTime: new Date(2018, 1, 15, 14, 0),
            CategoryColor: '#00bdae'
        }, {
            Id: 6,
            Subject: 'Mysteries of Bermuda Triangle',
            StartTime: new Date(2018, 1, 15, 9, 30),
            EndTime: new Date(2018, 1, 15, 11, 0),
            CategoryColor: '#f57f17'
        }, {
            Id: 7,
            Subject: 'Glaciers and Snowflakes',
            StartTime: new Date(2018, 1, 16, 11, 0),
            EndTime: new Date(2018, 1, 16, 12, 30),
            CategoryColor: '#1aaa55'
        }, {
            Id: 8,
            Subject: 'Life on Mars',
            StartTime: new Date(2018, 1, 17, 9, 0),
            EndTime: new Date(2018, 1, 17, 10, 0),
            CategoryColor: '#357cd2'
        }, {
            Id: 9,
            Subject: 'Alien Civilization',
            StartTime: new Date(2018, 1, 19, 11, 0),
            EndTime: new Date(2018, 1, 19, 13, 0),
            CategoryColor: '#7fa900'
        }, {
            Id: 10,
            Subject: 'Wildlife Galleries',
            StartTime: new Date(2018, 1, 21, 11, 0),
            EndTime: new Date(2018, 1, 21, 13, 0),
            CategoryColor: '#ea7a57'
        }, {
            Id: 11,
            Subject: 'Best Photography 2018',
            StartTime: new Date(2018, 1, 22, 9, 30),
            EndTime: new Date(2018, 1, 22, 11, 0),
            CategoryColor: '#00bdae'
        }, {
            Id: 12,
            Subject: 'Smarter Puppies',
            StartTime: new Date(2018, 1, 9, 10, 0),
            EndTime: new Date(2018, 1, 9, 11, 30),
            CategoryColor: '#f57f17'
        }, {
            Id: 13,
            Subject: 'Myths of Andromeda Galaxy',
            StartTime: new Date(2018, 1, 7, 10, 30),
            EndTime: new Date(2018, 1, 7, 12, 30),
            CategoryColor: '#1aaa55'
        }, {
            Id: 14,
            Subject: 'Aliens vs Humans',
            StartTime: new Date(2018, 1, 5, 10, 0),
            EndTime: new Date(2018, 1, 5, 11, 30),
            CategoryColor: '#357cd2'
        }, {
            Id: 15,
            Subject: 'Facts of Humming Birds',
            StartTime: new Date(2018, 1, 20, 9, 30),
            EndTime: new Date(2018, 1, 20, 11, 0),
            CategoryColor: '#7fa900'
        }, {
            Id: 16,
            Subject: 'Sky Gazers',
            StartTime: new Date(2018, 1, 23, 11, 0),
            EndTime: new Date(2018, 1, 23, 13, 0),
            CategoryColor: '#ea7a57'
        }, {
            Id: 17,
            Subject: 'The Cycle of Seasons',
            StartTime: new Date(2018, 1, 12, 5, 30),
            EndTime: new Date(2018, 1, 12, 7, 30),
            CategoryColor: '#00bdae'
        }, {
            Id: 18,
            Subject: 'Space Galaxies and Planets',
            StartTime: new Date(2018, 1, 12, 17, 0),
            EndTime: new Date(2018, 1, 12, 18, 30),
            CategoryColor: '#f57f17'
        }, {
            Id: 19,
            Subject: 'Lifecycle of Bumblebee',
            StartTime: new Date(2018, 1, 15, 6, 0),
            EndTime: new Date(2018, 1, 15, 7, 30),
            CategoryColor: '#7fa900'
        }, {
            Id: 20,
            Subject: 'Sky Gazers',
            StartTime: new Date(2018, 1, 15, 16, 0),
            EndTime: new Date(2018, 1, 15, 18, 0),
            CategoryColor: '#ea7a57'
        }
    ];
});

Customizing header bar

Apart from the default date navigation and view options available on the header bar, you can add custom items into the Scheduler header bar by making use of the actionBegin event. Here, an employee image is added to the header bar, clicking on which will open the popup showing that person’s short profile information.

Source
Preview
app.vue
datasource.js
<template>
  <div id='app'>
    <div id='container'>
        <ejs-schedule id='Schedule' :height='height' :selectedDate='selectedData' :eventSettings='eventSettings' :views='views' :actionBegin='onActionBegin' :actionComplete='onActionComplete'></ejs-schedule>
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
import { createElement, compile } from '@syncfusion/ej2-base';
import { Popup } from '@syncfusion/ej2-popups';
import { ItemModel } from '@syncfusion/ej2-navigations';
import { SchedulePlugin, Month } from '@syncfusion/ej2-vue-schedule';
import { scheduleData } from './datasource.js';

Vue.use(SchedulePlugin);

var headerTemplateVue = Vue.component('header-template', {
    template: `<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>`,
    data() {
        return {
            data: {}
        };
    }
});

export default {
  data (){
    return {
      height: '550px',
      width: '100%',
      eventSettings: { dataSource: scheduleData  },
      selectedData: new Date(2018, 1, 15),
      views: ['Month'],
      currentView: 'Month',
      headerTemplate: function () {
        return { template: headerTemplateVue }
      },
    }
  },
  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 = document.getElementById('Schedule');
        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 getDOMString = compile(this.headerTemplate);
        let output = getDOMString({});
        this.profilePopup = new 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
        });
        this.profilePopup.hide();
      }
  },
  provide: {
    schedule: [Month]
  }
}
</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";

.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>
define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.fifaEventsData = [
        {
            Id: 1,
            Subject: 'RUSSIA vs SAUDI ARABIA',
            Description: 'Group A',
            StartTime: new Date(2018, 5, 14, 15, 0),
            EndTime: new Date(2018, 5, 14, 17, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Moscow',
            CategoryColor: '#1aaa55',
            GroupId: 1
        }, {
            Id: 2,
            Subject: 'EGYPT vs URUGUAY',
            Description: 'Group A',
            StartTime: new Date(2018, 5, 15, 12, 0),
            EndTime: new Date(2018, 5, 15, 14, 0),
            StartTimezone: 'Asia/Yekaterinburg',
            EndTimezone: 'Asia/Yekaterinburg',
            City: 'Ekaterinburg',
            CategoryColor: '#1aaa55',
            GroupId: 1
        }, {
            Id: 3,
            Subject: 'MOROCCO vs IR IRAN',
            Description: 'Group B',
            StartTime: new Date(2018, 5, 15, 15, 0),
            EndTime: new Date(2018, 5, 15, 17, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Saint Petersburg',
            CategoryColor: '#357cd2',
            GroupId: 2
        }, {
            Id: 4,
            Subject: 'PORTUGAL vs SPAIN',
            Description: 'Group B',
            StartTime: new Date(2018, 5, 15, 18, 0),
            EndTime: new Date(2018, 5, 15, 20, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Sochi',
            CategoryColor: '#357cd2',
            GroupId: 2
        }, {
            Id: 5,
            Subject: 'FRANCE vs AUSTRALIA',
            Description: 'Group C',
            StartTime: new Date(2018, 5, 16, 10, 0),
            EndTime: new Date(2018, 5, 16, 12, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Kazan',
            CategoryColor: '#7fa900',
            GroupId: 3
        }, {
            Id: 6,
            Subject: 'ARGENTINA vs ICELAND',
            Description: 'Group D',
            StartTime: new Date(2018, 5, 16, 13, 0),
            EndTime: new Date(2018, 5, 16, 15, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Moscow',
            CategoryColor: '#ea7a57',
            GroupId: 4
        }, {
            Id: 7,
            Subject: 'PERU vs DENMARK',
            Description: 'Group C',
            StartTime: new Date(2018, 5, 16, 16, 0),
            EndTime: new Date(2018, 5, 16, 18, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Saransk',
            CategoryColor: '#7fa900',
            GroupId: 1
        }, {
            Id: 8,
            Subject: 'CROATIA vs NIGERIA',
            Description: 'Group D',
            StartTime: new Date(2018, 5, 16, 19, 0),
            EndTime: new Date(2018, 5, 16, 21, 0),
            StartTimezone: 'Europe/Kaliningrad',
            EndTimezone: 'Europe/Kaliningrad',
            City: 'Kaliningrad',
            CategoryColor: '#ea7a57',
            GroupId: 4
        }, {
            Id: 9,
            Subject: 'COSTA RICA vs SERBIA',
            Description: 'Group E',
            StartTime: new Date(2018, 5, 17, 12, 0),
            EndTime: new Date(2018, 5, 17, 14, 0),
            StartTimezone: 'Europe/Samara',
            EndTimezone: 'Europe/Samara',
            City: 'Samara',
            CategoryColor: '#00bdae',
            GroupId: 5
        }, {
            Id: 10,
            Subject: 'GERMANY vs MEXICO',
            Description: 'Group F',
            StartTime: new Date(2018, 5, 17, 15, 0),
            EndTime: new Date(2018, 5, 17, 17, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Moscow',
            CategoryColor: '#f57f17',
            GroupId: 6
        }, {
            Id: 11,
            Subject: 'BRAZIL vs SWITZERLAND',
            Description: 'Group E',
            StartTime: new Date(2018, 5, 17, 18, 0),
            EndTime: new Date(2018, 5, 17, 20, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Rostov-On-Don',
            CategoryColor: '#00bdae',
            GroupId: 5
        }, {
            Id: 12,
            Subject: 'SWEDEN vs KOREA REPUBLIC',
            Description: 'Group F',
            StartTime: new Date(2018, 5, 18, 12, 0),
            EndTime: new Date(2018, 5, 18, 14, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Nizhny Novgorod',
            CategoryColor: '#f57f17',
            GroupId: 6
        }, {
            Id: 13,
            Subject: 'BELGIUM vs PANAMA',
            Description: 'Group G',
            StartTime: new Date(2018, 5, 18, 15, 0),
            EndTime: new Date(2018, 5, 18, 17, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Sochi',
            CategoryColor: '#8e24aa',
            GroupId: 7
        }, {
            Id: 14,
            Subject: 'TUNISIA vs ENGLAND',
            Description: 'Group G',
            StartTime: new Date(2018, 5, 18, 18, 0),
            EndTime: new Date(2018, 5, 18, 20, 0),
            StartTimezone: 'Europe/Volgograd',
            EndTimezone: 'Europe/Volgograd',
            City: 'Volgograd',
            CategoryColor: '#8e24aa',
            GroupId: 7
        }, {
            Id: 15,
            Subject: 'COLOMBIA vs JAPAN',
            Description: 'Group H',
            StartTime: new Date(2018, 5, 19, 12, 0),
            EndTime: new Date(2018, 5, 19, 14, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Saransk',
            CategoryColor: '#7fa900',
            GroupId: 8
        }, {
            Id: 16,
            Subject: 'POLAND vs SENEGAL',
            Description: 'Group H',
            StartTime: new Date(2018, 5, 19, 15, 0),
            EndTime: new Date(2018, 5, 19, 17, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Moscow',
            CategoryColor: '#7fa900',
            GroupId: 8
        }, {
            Id: 17,
            Subject: 'RUSSIA vs EGYPT',
            Description: 'Group A',
            StartTime: new Date(2018, 5, 19, 18, 0),
            EndTime: new Date(2018, 5, 19, 20, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Saint Petersburg',
            CategoryColor: '#1aaa55',
            GroupId: 1
        }, {
            Id: 18,
            Subject: 'PORTUGAL vs MOROCCO',
            Description: 'Group B',
            StartTime: new Date(2018, 5, 20, 12, 0),
            EndTime: new Date(2018, 5, 20, 14, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Rostov-On-Don',
            CategoryColor: '#357cd2',
            GroupId: 2
        }, {
            Id: 19,
            Subject: 'URUGUAY vs SAUDI ARABIA',
            Description: 'Group A',
            StartTime: new Date(2018, 5, 20, 15, 0),
            EndTime: new Date(2018, 5, 20, 17, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Moscow',
            CategoryColor: '#1aaa55',
            GroupId: 1
        }, {
            Id: 20,
            Subject: 'IR IRAN vs SPAIN',
            Description: 'Group B',
            StartTime: new Date(2018, 5, 20, 18, 0),
            EndTime: new Date(2018, 5, 20, 20, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Kazan',
            CategoryColor: '#357cd2',
            GroupId: 2
        }, {
            Id: 21,
            Subject: 'DENMARK vs AUSTRALIA',
            Description: 'Group C',
            StartTime: new Date(2018, 5, 21, 12, 0),
            EndTime: new Date(2018, 5, 21, 14, 0),
            StartTimezone: 'Europe/Samara',
            EndTimezone: 'Europe/Samara',
            City: 'Samara',
            CategoryColor: '#7fa900',
            GroupId: 3
        }, {
            Id: 22,
            Subject: 'FRANCE vs PERU',
            Description: 'Group D',
            StartTime: new Date(2018, 5, 21, 15, 0),
            EndTime: new Date(2018, 5, 21, 17, 0),
            StartTimezone: 'Asia/Yekaterinburg',
            EndTimezone: 'Asia/Yekaterinburg',
            City: 'Ekaterinburg',
            CategoryColor: '#ea7a57',
            GroupId: 4
        }, {
            Id: 23,
            Subject: 'ARGENTINA vs CROATIA',
            Description: 'Group D',
            StartTime: new Date(2018, 5, 21, 18, 0),
            EndTime: new Date(2018, 5, 21, 20, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Nizhny Novgorod',
            CategoryColor: '#ea7a57',
            GroupId: 4
        }, {
            Id: 24,
            Subject: 'BRAZIL vs COSTA RICA',
            Description: 'Group E',
            StartTime: new Date(2018, 5, 22, 12, 0),
            EndTime: new Date(2018, 5, 22, 14, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Saint Petersburg',
            CategoryColor: '#00bdae',
            GroupId: 5
        }, {
            Id: 25,
            Subject: 'NIGERIA vs ICELAND',
            Description: 'Group D',
            StartTime: new Date(2018, 5, 22, 15, 0),
            EndTime: new Date(2018, 5, 22, 17, 0),
            StartTimezone: 'Europe/Volgograd',
            EndTimezone: 'Europe/Volgograd',
            City: 'Volgograd',
            CategoryColor: '#ea7a57',
            GroupId: 4
        }, {
            Id: 26,
            Subject: 'SERBIA vs SWITZERLAND',
            Description: 'Group E',
            StartTime: new Date(2018, 5, 22, 18, 0),
            EndTime: new Date(2018, 5, 22, 20, 0),
            StartTimezone: 'Europe/Kaliningrad',
            EndTimezone: 'Europe/Kaliningrad',
            City: 'Kaliningrad',
            CategoryColor: '#00bdae',
            GroupId: 5
        }, {
            Id: 27,
            Subject: 'BELGIUM vs TUNISIA',
            Description: 'Group G',
            StartTime: new Date(2018, 5, 23, 12, 0),
            EndTime: new Date(2018, 5, 23, 14, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Moscow',
            CategoryColor: '#8e24aa',
            GroupId: 7
        }, {
            Id: 28,
            Subject: 'KOREA REPUBLIC vs MEXICO',
            Description: 'Group F',
            StartTime: new Date(2018, 5, 23, 15, 0),
            EndTime: new Date(2018, 5, 23, 17, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Rostov-On-Don',
            CategoryColor: '#f57f17',
            GroupId: 6
        }, {
            Id: 29,
            Subject: 'GERMANY vs SWEDEN',
            Description: 'Group F',
            StartTime: new Date(2018, 5, 23, 18, 0),
            EndTime: new Date(2018, 5, 23, 20, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Sochi',
            CategoryColor: '#f57f17',
            GroupId: 6
        }, {
            Id: 30,
            Subject: 'ENGLAND vs PANAMA',
            Description: 'Group G',
            StartTime: new Date(2018, 5, 24, 12, 0),
            EndTime: new Date(2018, 5, 24, 14, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Nizhny Novgorod',
            CategoryColor: '#8e24aa',
            GroupId: 7
        }, {
            Id: 31,
            Subject: 'JAPAN vs SENEGAL',
            Description: 'Group H',
            StartTime: new Date(2018, 5, 24, 15, 0),
            EndTime: new Date(2018, 5, 24, 17, 0),
            StartTimezone: 'Asia/Yekaterinburg',
            EndTimezone: 'Asia/Yekaterinburg',
            City: 'Ekaterinburg',
            CategoryColor: '#7fa900',
            GroupId: 8
        }, {
            Id: 32,
            Subject: 'POLAND vs COLOMBIA',
            Description: 'Group H',
            StartTime: new Date(2018, 5, 24, 18, 0),
            EndTime: new Date(2018, 5, 24, 20, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Kazan',
            CategoryColor: '#7fa900',
            GroupId: 8
        }, {
            Id: 33,
            Subject: 'URUGUAY vs RUSSIA',
            Description: 'Group A',
            StartTime: new Date(2018, 5, 25, 14, 0),
            EndTime: new Date(2018, 5, 25, 16, 0),
            StartTimezone: 'Europe/Samara',
            EndTimezone: 'Europe/Samara',
            City: 'Samara',
            CategoryColor: '#1aaa55',
            GroupId: 1
        }, {
            Id: 34,
            Subject: 'SAUDI ARABIA vs EGYPT',
            Description: 'Group A',
            StartTime: new Date(2018, 5, 25, 14, 0),
            EndTime: new Date(2018, 5, 25, 16, 0),
            StartTimezone: 'Europe/Volgograd',
            EndTimezone: 'Europe/Volgograd',
            City: 'Volgograd',
            CategoryColor: '#1aaa55',
            GroupId: 1
        }, {
            Id: 35,
            Subject: 'IR IRAN vs PORTUGAL',
            Description: 'Group B',
            StartTime: new Date(2018, 5, 25, 18, 0),
            EndTime: new Date(2018, 5, 25, 20, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Saransk',
            CategoryColor: '#357cd2',
            GroupId: 2
        }, {
            Id: 36,
            Subject: 'SPAIN vs MOROCCO',
            Description: 'Group B',
            StartTime: new Date(2018, 5, 25, 18, 0),
            EndTime: new Date(2018, 5, 25, 20, 0),
            StartTimezone: 'Europe/Kaliningrad',
            EndTimezone: 'Europe/Kaliningrad',
            City: 'Kaliningrad',
            CategoryColor: '#357cd2',
            GroupId: 2
        }, {
            Id: 37,
            Subject: 'DENMARK vs FRANCE',
            Description: 'Group C',
            StartTime: new Date(2018, 5, 26, 14, 0),
            EndTime: new Date(2018, 5, 26, 16, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Moscow',
            CategoryColor: '#7fa900',
            GroupId: 2
        }, {
            Id: 38,
            Subject: 'AUSTRALIA vs PERU',
            Description: 'Group C',
            StartTime: new Date(2018, 5, 26, 14, 0),
            EndTime: new Date(2018, 5, 26, 16, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Sochi',
            CategoryColor: '#7fa900',
            GroupId: 3
        }, {
            Id: 39,
            Subject: 'NIGERIA vs ARGENTINA',
            Description: 'Group D',
            StartTime: new Date(2018, 5, 26, 18, 0),
            EndTime: new Date(2018, 5, 26, 20, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Saint Petersburg',
            CategoryColor: '#ea7a57',
            GroupId: 4
        }, {
            Id: 40,
            Subject: 'ICELAND vs CROATIA',
            Description: 'Group D',
            StartTime: new Date(2018, 5, 26, 18, 0),
            EndTime: new Date(2018, 5, 26, 20, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Rostov-On-Don',
            CategoryColor: '#ea7a57',
            GroupId: 4
        }, {
            Id: 41,
            Subject: 'MEXICO vs SWEDEN',
            Description: 'Group F',
            StartTime: new Date(2018, 5, 27, 14, 0),
            EndTime: new Date(2018, 5, 27, 16, 0),
            StartTimezone: 'Asia/Yekaterinburg',
            EndTimezone: 'Asia/Yekaterinburg',
            City: 'Ekaterinburg',
            CategoryColor: '#f57f17',
            GroupId: 6
        }, {
            Id: 42,
            Subject: 'KOREA REPUBLIC vs GERMANY',
            Description: 'Group F',
            StartTime: new Date(2018, 5, 27, 14, 0),
            EndTime: new Date(2018, 5, 27, 16, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Kazan',
            CategoryColor: '#f57f17',
            GroupId: 6
        }, {
            Id: 43,
            Subject: 'SERBIA vs BRAZIL',
            Description: 'Group E',
            StartTime: new Date(2018, 5, 27, 18, 0),
            EndTime: new Date(2018, 5, 27, 20, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Moscow',
            CategoryColor: '#00bdae',
            GroupId: 5
        }, {
            Id: 44,
            Subject: 'SWITZERLAND vs COSTA RICA',
            Description: 'Group E',
            StartTime: new Date(2018, 5, 27, 18, 0),
            EndTime: new Date(2018, 5, 27, 20, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Nizhny Novgorod',
            CategoryColor: '#00bdae',
            GroupId: 5
        }, {
            Id: 45,
            Subject: 'JAPAN vs POLAND',
            Description: 'Group H',
            StartTime: new Date(2018, 5, 28, 14, 0),
            EndTime: new Date(2018, 5, 28, 16, 0),
            StartTimezone: 'Europe/Volgograd',
            EndTimezone: 'Europe/Volgograd',
            City: 'Volgograd',
            CategoryColor: '#7fa900',
            GroupId: 8
        }, {
            Id: 46,
            Subject: 'SENEGAL vs COLOMBIA',
            Description: 'Group H',
            StartTime: new Date(2018, 5, 28, 14, 0),
            EndTime: new Date(2018, 5, 28, 16, 0),
            StartTimezone: 'Europe/Samara',
            EndTimezone: 'Europe/Samara',
            City: 'Samara',
            CategoryColor: '#7fa900',
            GroupId: 8
        }, {
            Id: 47,
            Subject: 'PANAMA vs TUNISIA',
            Description: 'Group G',
            StartTime: new Date(2018, 5, 28, 18, 0),
            EndTime: new Date(2018, 5, 28, 20, 0),
            StartTimezone: 'Europe/Moscow',
            EndTimezone: 'Europe/Moscow',
            City: 'Saransk',
            CategoryColor: '#8e24aa',
            GroupId: 4
        }, {
            Id: 48,
            Subject: 'ENGLAND vs BELGIUM',
            Description: 'Group G',
            StartTime: new Date(2018, 5, 28, 18, 0),
            EndTime: new Date(2018, 5, 28, 20, 0),
            StartTimezone: 'Europe/Kaliningrad',
            EndTimezone: 'Europe/Kaliningrad',
            City: 'Kaliningrad',
            CategoryColor: '#8e24aa',
            GroupId: 4
        },
    ];

    exports.scheduleData = [
        {
            Id: 1,
            Subject: 'Explosion of Betelgeuse Star',
            StartTime: new Date(2018, 1, 11, 9, 30),
            EndTime: new Date(2018, 1, 11, 11, 0),
            CategoryColor: '#1aaa55'
        }, {
            Id: 2,
            Subject: 'Thule Air Crash Report',
            StartTime: new Date(2018, 1, 12, 12, 0),
            EndTime: new Date(2018, 1, 12, 14, 0),
            CategoryColor: '#357cd2'
        }, {
            Id: 3,
            Subject: 'Blue Moon Eclipse',
            StartTime: new Date(2018, 1, 13, 9, 30),
            EndTime: new Date(2018, 1, 13, 11, 0),
            CategoryColor: '#7fa900'
        }, {
            Id: 4,
            Subject: 'Meteor Showers in 2018',
            StartTime: new Date(2018, 1, 14, 13, 0),
            EndTime: new Date(2018, 1, 14, 14, 30),
            CategoryColor: '#ea7a57'
        }, {
            Id: 5,
            Subject: 'Milky Way as Melting pot',
            StartTime: new Date(2018, 1, 15, 12, 0),
            EndTime: new Date(2018, 1, 15, 14, 0),
            CategoryColor: '#00bdae'
        }, {
            Id: 6,
            Subject: 'Mysteries of Bermuda Triangle',
            StartTime: new Date(2018, 1, 15, 9, 30),
            EndTime: new Date(2018, 1, 15, 11, 0),
            CategoryColor: '#f57f17'
        }, {
            Id: 7,
            Subject: 'Glaciers and Snowflakes',
            StartTime: new Date(2018, 1, 16, 11, 0),
            EndTime: new Date(2018, 1, 16, 12, 30),
            CategoryColor: '#1aaa55'
        }, {
            Id: 8,
            Subject: 'Life on Mars',
            StartTime: new Date(2018, 1, 17, 9, 0),
            EndTime: new Date(2018, 1, 17, 10, 0),
            CategoryColor: '#357cd2'
        }, {
            Id: 9,
            Subject: 'Alien Civilization',
            StartTime: new Date(2018, 1, 19, 11, 0),
            EndTime: new Date(2018, 1, 19, 13, 0),
            CategoryColor: '#7fa900'
        }, {
            Id: 10,
            Subject: 'Wildlife Galleries',
            StartTime: new Date(2018, 1, 21, 11, 0),
            EndTime: new Date(2018, 1, 21, 13, 0),
            CategoryColor: '#ea7a57'
        }, {
            Id: 11,
            Subject: 'Best Photography 2018',
            StartTime: new Date(2018, 1, 22, 9, 30),
            EndTime: new Date(2018, 1, 22, 11, 0),
            CategoryColor: '#00bdae'
        }, {
            Id: 12,
            Subject: 'Smarter Puppies',
            StartTime: new Date(2018, 1, 9, 10, 0),
            EndTime: new Date(2018, 1, 9, 11, 30),
            CategoryColor: '#f57f17'
        }, {
            Id: 13,
            Subject: 'Myths of Andromeda Galaxy',
            StartTime: new Date(2018, 1, 7, 10, 30),
            EndTime: new Date(2018, 1, 7, 12, 30),
            CategoryColor: '#1aaa55'
        }, {
            Id: 14,
            Subject: 'Aliens vs Humans',
            StartTime: new Date(2018, 1, 5, 10, 0),
            EndTime: new Date(2018, 1, 5, 11, 30),
            CategoryColor: '#357cd2'
        }, {
            Id: 15,
            Subject: 'Facts of Humming Birds',
            StartTime: new Date(2018, 1, 20, 9, 30),
            EndTime: new Date(2018, 1, 20, 11, 0),
            CategoryColor: '#7fa900'
        }, {
            Id: 16,
            Subject: 'Sky Gazers',
            StartTime: new Date(2018, 1, 23, 11, 0),
            EndTime: new Date(2018, 1, 23, 13, 0),
            CategoryColor: '#ea7a57'
        }, {
            Id: 17,
            Subject: 'The Cycle of Seasons',
            StartTime: new Date(2018, 1, 12, 5, 30),
            EndTime: new Date(2018, 1, 12, 7, 30),
            CategoryColor: '#00bdae'
        }, {
            Id: 18,
            Subject: 'Space Galaxies and Planets',
            StartTime: new Date(2018, 1, 12, 17, 0),
            EndTime: new Date(2018, 1, 12, 18, 30),
            CategoryColor: '#f57f17'
        }, {
            Id: 19,
            Subject: 'Lifecycle of Bumblebee',
            StartTime: new Date(2018, 1, 15, 6, 0),
            EndTime: new Date(2018, 1, 15, 7, 30),
            CategoryColor: '#7fa900'
        }, {
            Id: 20,
            Subject: 'Sky Gazers',
            StartTime: new Date(2018, 1, 15, 16, 0),
            EndTime: new Date(2018, 1, 15, 18, 0),
            CategoryColor: '#ea7a57'
        }
    ];
});

Date header customization

The Scheduler UI that displays the date text on all views are considered as the date header cells. You can customize the date header cells of Scheduler either using dateHeaderTemplate or renderCell event.

Using date header template

The dateHeaderTemplate option is used to customize the date header cells of day, week and work-week views.

Source
Preview
app.vue
datasource.js
<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>
        </ejs-schedule>
    </div>
  </div>
</template>
<script>
    import Vue from 'vue';
    import { Internationalization } from '@syncfusion/ej2-base';
    import { scheduleData } from './datasource.js';
    import { SchedulePlugin, Day, Week, Agenda, TimelineViews, TimelineMonth } from '@syncfusion/ej2-vue-schedule';
    Vue.use(SchedulePlugin);

    var instance = new Internationalization();
    var dateHeaderTemplateVue = Vue.component('demo', {
        template: '<div class="date-text" v-html="getDateHeaderText(data.date)"></div>'+
        '<div v-html="getWeather(data.date)"></div>',
        data() {
            return {
                data: {}
            };
        },
        methods: {
            getDateHeaderText: function (Date) {
                return instance.formatDate(Date, { 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;
                }
            }
        }
    });
    export default {
        data () {
            return {
                eventSettings: { dataSource: scheduleData },
                cssClass: 'schedule-date-header-template',
                selectedDate: new Date(2018, 1, 15),
                dateHeaderTemplate: function (e) {
                    return { template: dateHeaderTemplateVue }
                }
            }
        },
        provide: {
            schedule: [Day, Week, Agenda, 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>
define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.scheduleData = [
        {
            Id: 1,
            Subject: 'Explosion of Betelgeuse Star',
            StartTime: new Date(2018, 1, 11, 9, 30),
            EndTime: new Date(2018, 1, 11, 11, 0),
            CategoryColor: '#1aaa55'
        }, {
            Id: 2,
            Subject: 'Thule Air Crash Report',
            StartTime: new Date(2018, 1, 12, 12, 0),
            EndTime: new Date(2018, 1, 12, 14, 0),
            CategoryColor: '#357cd2'
        }, {
            Id: 3,
            Subject: 'Blue Moon Eclipse',
            StartTime: new Date(2018, 1, 13, 9, 30),
            EndTime: new Date(2018, 1, 13, 11, 0),
            CategoryColor: '#7fa900'
        }, {
            Id: 4,
            Subject: 'Meteor Showers in 2018',
            StartTime: new Date(2018, 1, 14, 13, 0),
            EndTime: new Date(2018, 1, 14, 14, 30),
            CategoryColor: '#ea7a57'
        }, {
            Id: 5,
            Subject: 'Milky Way as Melting pot',
            StartTime: new Date(2018, 1, 15, 12, 0),
            EndTime: new Date(2018, 1, 15, 14, 0),
            CategoryColor: '#00bdae'
        }, {
            Id: 6,
            Subject: 'Mysteries of Bermuda Triangle',
            StartTime: new Date(2018, 1, 15, 9, 30),
            EndTime: new Date(2018, 1, 15, 9, 50),
            CategoryColor: '#f57f17'
        }, {
            Id: 7,
            Subject: 'Glaciers and Snowflakes',
            StartTime: new Date(2018, 1, 16, 11, 0),
            EndTime: new Date(2018, 1, 16, 12, 30),
            CategoryColor: '#1aaa55'
        }, {
            Id: 8,
            Subject: 'Life on Mars',
            StartTime: new Date(2018, 1, 17, 9, 0),
            EndTime: new Date(2018, 1, 17, 10, 0),
            CategoryColor: '#357cd2'
        }, {
            Id: 9,
            Subject: 'Alien Civilization',
            StartTime: new Date(2018, 1, 19, 11, 0),
            EndTime: new Date(2018, 1, 19, 13, 0),
            CategoryColor: '#7fa900'
        }, {
            Id: 10,
            Subject: 'Wildlife Galleries',
            StartTime: new Date(2018, 1, 21, 11, 0),
            EndTime: new Date(2018, 1, 21, 13, 0),
            CategoryColor: '#ea7a57'
        }, {
            Id: 11,
            Subject: 'Best Photography 2018',
            StartTime: new Date(2018, 1, 22, 9, 30),
            EndTime: new Date(2018, 1, 22, 11, 0),
            CategoryColor: '#00bdae'
        }, {
            Id: 12,
            Subject: 'Smarter Puppies',
            StartTime: new Date(2018, 1, 9, 10, 0),
            EndTime: new Date(2018, 1, 9, 11, 30),
            CategoryColor: '#f57f17'
        }, {
            Id: 13,
            Subject: 'Myths of Andromeda Galaxy',
            StartTime: new Date(2018, 1, 7, 10, 30),
            EndTime: new Date(2018, 1, 7, 12, 30),
            CategoryColor: '#1aaa55'
        }, {
            Id: 14,
            Subject: 'Aliens vs Humans',
            StartTime: new Date(2018, 1, 5, 10, 0),
            EndTime: new Date(2018, 1, 5, 11, 30),
            CategoryColor: '#357cd2'
        }, {
            Id: 15,
            Subject: 'Facts of Humming Birds',
            StartTime: new Date(2018, 1, 20, 9, 30),
            EndTime: new Date(2018, 1, 20, 11, 0),
            CategoryColor: '#7fa900'
        }, {
            Id: 16,
            Subject: 'Sky Gazers',
            StartTime: new Date(2018, 1, 23, 11, 0),
            EndTime: new Date(2018, 1, 23, 13, 0),
            CategoryColor: '#ea7a57'
        }, {
            Id: 17,
            Subject: 'The Cycle of Seasons',
            StartTime: new Date(2018, 1, 12, 5, 30),
            EndTime: new Date(2018, 1, 12, 7, 30),
            CategoryColor: '#00bdae'
        }, {
            Id: 18,
            Subject: 'Space Galaxies and Planets',
            StartTime: new Date(2018, 1, 12, 17, 0),
            EndTime: new Date(2018, 1, 12, 18, 30),
            CategoryColor: '#f57f17'
        }, {
            Id: 19,
            Subject: 'Lifecycle of Bumblebee',
            StartTime: new Date(2018, 1, 15, 6, 0),
            EndTime: new Date(2018, 1, 15, 7, 30),
            CategoryColor: '#7fa900'
        }, {
            Id: 20,
            Subject: 'Sky Gazers',
            StartTime: new Date(2018, 1, 15, 16, 0),
            EndTime: new Date(2018, 1, 15, 18, 0),
            CategoryColor: '#ea7a57'
        }
    ];
});

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.

Source
Preview
app.vue
datasource.js
<template>
  <div id='app'>
    <div id='container'>
        <ejs-schedule id='Schedule' :height='height' :selectedDate='selectedData' :eventSettings='eventSettings' :views='views' :renderCell='onRenderCell'>
        </ejs-schedule>
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
import { createElement } from '@syncfusion/ej2-base';
import { SchedulePlugin, Month } from '@syncfusion/ej2-vue-schedule';
import { scheduleData } from './datasource.js';

Vue.use(SchedulePlugin);

export default {
  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/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";
  .weather-text {
    float: right;
    margin: -20px 12px 0 0;
    width: 20px;
    height: 20px;
  }
</style>
define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.scheduleData = [
        {
            Id: 1,
            Subject: 'Explosion of Betelgeuse Star',
            StartTime: new Date(2018, 1, 11, 9, 30),
            EndTime: new Date(2018, 1, 11, 11, 0),
            CategoryColor: '#1aaa55'
        }, {
            Id: 2,
            Subject: 'Thule Air Crash Report',
            StartTime: new Date(2018, 1, 12, 12, 0),
            EndTime: new Date(2018, 1, 12, 14, 0),
            CategoryColor: '#357cd2'
        }, {
            Id: 3,
            Subject: 'Blue Moon Eclipse',
            StartTime: new Date(2018, 1, 13, 9, 30),
            EndTime: new Date(2018, 1, 13, 11, 0),
            CategoryColor: '#7fa900'
        }, {
            Id: 4,
            Subject: 'Meteor Showers in 2018',
            StartTime: new Date(2018, 1, 14, 13, 0),
            EndTime: new Date(2018, 1, 14, 14, 30),
            CategoryColor: '#ea7a57'
        }, {
            Id: 5,
            Subject: 'Milky Way as Melting pot',
            StartTime: new Date(2018, 1, 15, 12, 0),
            EndTime: new Date(2018, 1, 15, 14, 0),
            CategoryColor: '#00bdae'
        }, {
            Id: 6,
            Subject: 'Mysteries of Bermuda Triangle',
            StartTime: new Date(2018, 1, 15, 9, 30),
            EndTime: new Date(2018, 1, 15, 9, 50),
            CategoryColor: '#f57f17'
        }, {
            Id: 7,
            Subject: 'Glaciers and Snowflakes',
            StartTime: new Date(2018, 1, 16, 11, 0),
            EndTime: new Date(2018, 1, 16, 12, 30),
            CategoryColor: '#1aaa55'
        }, {
            Id: 8,
            Subject: 'Life on Mars',
            StartTime: new Date(2018, 1, 17, 9, 0),
            EndTime: new Date(2018, 1, 17, 10, 0),
            CategoryColor: '#357cd2'
        }, {
            Id: 9,
            Subject: 'Alien Civilization',
            StartTime: new Date(2018, 1, 19, 11, 0),
            EndTime: new Date(2018, 1, 19, 13, 0),
            CategoryColor: '#7fa900'
        }, {
            Id: 10,
            Subject: 'Wildlife Galleries',
            StartTime: new Date(2018, 1, 21, 11, 0),
            EndTime: new Date(2018, 1, 21, 13, 0),
            CategoryColor: '#ea7a57'
        }, {
            Id: 11,
            Subject: 'Best Photography 2018',
            StartTime: new Date(2018, 1, 22, 9, 30),
            EndTime: new Date(2018, 1, 22, 11, 0),
            CategoryColor: '#00bdae'
        }, {
            Id: 12,
            Subject: 'Smarter Puppies',
            StartTime: new Date(2018, 1, 9, 10, 0),
            EndTime: new Date(2018, 1, 9, 11, 30),
            CategoryColor: '#f57f17'
        }, {
            Id: 13,
            Subject: 'Myths of Andromeda Galaxy',
            StartTime: new Date(2018, 1, 7, 10, 30),
            EndTime: new Date(2018, 1, 7, 12, 30),
            CategoryColor: '#1aaa55'
        }, {
            Id: 14,
            Subject: 'Aliens vs Humans',
            StartTime: new Date(2018, 1, 5, 10, 0),
            EndTime: new Date(2018, 1, 5, 11, 30),
            CategoryColor: '#357cd2'
        }, {
            Id: 15,
            Subject: 'Facts of Humming Birds',
            StartTime: new Date(2018, 1, 20, 9, 30),
            EndTime: new Date(2018, 1, 20, 11, 0),
            CategoryColor: '#7fa900'
        }, {
            Id: 16,
            Subject: 'Sky Gazers',
            StartTime: new Date(2018, 1, 23, 11, 0),
            EndTime: new Date(2018, 1, 23, 13, 0),
            CategoryColor: '#ea7a57'
        }, {
            Id: 17,
            Subject: 'The Cycle of Seasons',
            StartTime: new Date(2018, 1, 12, 5, 30),
            EndTime: new Date(2018, 1, 12, 7, 30),
            CategoryColor: '#00bdae'
        }, {
            Id: 18,
            Subject: 'Space Galaxies and Planets',
            StartTime: new Date(2018, 1, 12, 17, 0),
            EndTime: new Date(2018, 1, 12, 18, 30),
            CategoryColor: '#f57f17'
        }, {
            Id: 19,
            Subject: 'Lifecycle of Bumblebee',
            StartTime: new Date(2018, 1, 15, 6, 0),
            EndTime: new Date(2018, 1, 15, 7, 30),
            CategoryColor: '#7fa900'
        }, {
            Id: 20,
            Subject: 'Sky Gazers',
            StartTime: new Date(2018, 1, 15, 16, 0),
            EndTime: new Date(2018, 1, 15, 18, 0),
            CategoryColor: '#ea7a57'
        }
    ];
});