The year view of our scheduler displays all the 365 days and their related appointments of a particular year. You can customize the year view by using the following properties.
In the following code example, you can see how to render only the last six months of a year in the scheduler. To start with the month of June, firstMonthYear is set to 6 and monthsCount is set to 6 to render only 6 months.
<template>
<div>
<div id="app">
<div id="container">
<ejs-schedule
id="Schedule"
height="650px"
:eventSettings="eventSettings"
:currentView="currentView"
:firstMonthOfYear="firstMonthOfYear"
:monthsCount="monthsCount"
:group="group"
:monthHeaderTemplate="monthHeaderTemplate"
:resourceHeaderTemplate="resourceHeaderTemplate"
>
<e-views>
<e-view option="Year"></e-view>
<e-view
option="TimelineYear"
displayName="Horizontal TimelineYear"
isSelected="true"
></e-view>
<e-view
option="TimelineYear"
displayName="Vertical TimelineYear"
orientation="Vertical"
></e-view>
</e-views>
<e-resources>
<e-resource
field="OwnerId"
title="Owner"
name="Owners"
:dataSource="ownerDataSource"
textField="OwnerText"
idField="Id"
colorField="OwnerColor"
></e-resource>
</e-resources>
</ejs-schedule>
</div>
</div>
</div>
</template>
<script>
import Vue from "vue";
import { resourceData } from "./datasource.js";
import {
SchedulePlugin,
Year,
TimelineYear,
Resize,
DragAndDrop
} from "@syncfusion/ej2-vue-schedule";
Vue.use(SchedulePlugin);
var monthHeaderTemplate = Vue.component("demo", {
template: "<div>{{monthHeaderTemplate(data.date)}}</div>",
data() {
return {
data: {},
monthHeaderTemplate: function(date) {
return (
date.toLocaleString("en-us", { month: "long" }) +
" " +
date.getFullYear()
);
}
};
}
});
var resourceHeaderTemplateVue = Vue.component("headerTemplate", {
template: `<div class='template-wrap'><div class="resource-details"><div class="resource-name">{{data.resourceData.OwnerText}}</div></div></div>`,
data() {
return {
data: {}
};
}
});
export default {
data() {
return {
width: "100%",
height: "550px",
currentView: "TimelineWeek",
selectedDate: new Date(2021, 7, 4),
firstMonthOfYear: 6,
monthsCount: 6,
group: {
resources: ["Owners"]
},
monthHeaderTemplate: function(e) {
return { template: monthHeaderTemplate };
},
allowMultiple: true,
ownerDataSource: [
{ OwnerText: "Nancy", Id: 1, OwnerColor: "#ffaa00" },
{ OwnerText: "Steven", Id: 2, OwnerColor: "#f8a398" },
{ OwnerText: "Robert", Id: 3, OwnerColor: "#7499e1" },
{ OwnerText: "Smith", Id: 4, OwnerColor: "#5978ee" },
{ OwnerText: "Micheal", Id: 5, OwnerColor: "#df5286" }
],
resourceHeaderTemplate: function(e) {
return {
template: resourceHeaderTemplateVue
};
},
eventSettings: { dataSource: resourceData }
};
},
provide: {
schedule: [Year, TimelineYear, Resize, DragAndDrop]
}
};
</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-vertical-view .e-resource-cells {
height: 62px;
}
.e-schedule .template-wrap {
display: flex;
text-align: left;
}
.e-schedule .template-wrap .resource-details {
padding-left: 10px;
}
.e-schedule .template-wrap .resource-details .resource-name {
font-size: 16px;
font-weight: 500;
margin-top: 5px;
}
.e-schedule.e-device .template-wrap .resource-details .resource-name {
font-size: inherit;
font-weight: inherit;
}
.e-schedule.e-device .e-resource-tree-popup .e-fullrow {
height: 50px;
}
</style>define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.resourceData = [
{
Id: 1,
Subject: 'Workflow Analysis',
StartTime:new Date(2021, 8, 1, 9, 30),
EndTime:new Date(2021, 8, 1, 12, 0),
IsAllDay: false,
OwnerId: 1
}, {
Id: 2,
Subject: 'Requirement planning',
StartTime:new Date(2021, 9, 1, 12, 30),
EndTime:new Date(2021, 9, 1, 14, 45),
IsAllDay: false,
OwnerId: 2
}, {
Id: 3,
Subject: 'Quality Analysis',
StartTime:new Date(2021, 8, 2, 10, 0),
EndTime:new Date(2021, 8, 2, 12, 30),
IsAllDay: false,
OwnerId: 1
}, {
Id: 4,
Subject: 'Resource planning',
StartTime:new Date(2021, 8, 2, 13, 0),
EndTime:new Date(2021, 8, 2, 15, 30),
IsAllDay: false,
OwnerId: 2
}, {
Id: 5,
Subject: 'Timeline estimation',
StartTime:new Date(2021, 8, 3, 9, 0),
EndTime:new Date(2021, 8, 3, 11, 30),
IsAllDay: false,
OwnerId: 1
}, {
Id: 6,
Subject: 'Developers Meeting',
StartTime:new Date(2021, 9, 3, 14, 0),
EndTime:new Date(2021, 9, 3, 16, 45),
IsAllDay: false,
OwnerId: 2
}, {
Id: 7,
Subject: 'Project Review',
StartTime:new Date(2021, 9, 4, 11, 15),
EndTime:new Date(2021, 9, 4, 13, 30),
IsAllDay: false,
OwnerId: 1
}, {
Id: 8,
Subject: 'Manual testing',
StartTime:new Date(2021, 8, 4, 9, 15),
EndTime:new Date(2021, 8, 4, 11, 45),
IsAllDay: false,
OwnerId: 2
}, {
Id: 9,
Subject: 'Project Preview',
StartTime:new Date(2021, 8, 5, 9, 30),
EndTime:new Date(2021, 8, 5, 12, 45),
IsAllDay: false,
OwnerId: 1
}, {
Id: 10,
Subject: 'Cross-browser testing',
StartTime:new Date(2021, 8, 5, 13, 45),
EndTime:new Date(2021, 8, 5, 16, 30),
IsAllDay: false,
OwnerId: 2
}, {
Id: 11,
Subject: 'Bug Automation',
StartTime:new Date(2021, 8, 6, 10, 0),
EndTime:new Date(2021, 8, 6, 12, 15),
IsAllDay: false,
OwnerId: 1
}, {
Id: 12,
Subject: 'Functionality testing',
StartTime:new Date(2021, 10, 6, 9, 0),
EndTime:new Date(2021, 10, 6, 11, 30),
IsAllDay: false,
OwnerId: 2
}, {
Id: 13,
Subject: 'Resolution-based testing',
StartTime:new Date(2021, 10, 7, 13, 0),
EndTime:new Date(2021, 10, 7, 15, 15),
IsAllDay: false,
OwnerId: 1
}, {
Id: 14,
Subject: 'Test report Validation',
StartTime:new Date(2021, 8, 7, 9),
EndTime:new Date(2021, 8, 7, 11),
IsAllDay: false,
OwnerId: 2
}, {
Id: 15,
Subject: 'Test case correction',
StartTime:new Date(2021, 8, 8, 9, 45),
EndTime:new Date(2021, 8, 8, 11, 30),
IsAllDay: false,
OwnerId: 1
}, {
Id: 16,
Subject: 'Run test cases',
StartTime:new Date(2021, 11, 8, 10, 30),
EndTime:new Date(2021, 11, 8, 13, 0),
IsAllDay: false,
OwnerId: 2
}, {
Id: 17,
Subject: 'Quality Analysis',
StartTime:new Date(2021, 11, 9, 12),
EndTime:new Date(2021, 11, 9, 15, 30),
IsAllDay: false,
OwnerId: 1
}, {
Id: 18,
Subject: 'Debugging',
StartTime:new Date(2021, 8, 9, 9, 0),
EndTime:new Date(2021, 8, 9, 11, 15),
IsAllDay: false,
OwnerId: 2
}, {
Id: 19,
Subject: 'Exception handling',
StartTime:new Date(2021, 8, 10, 10, 10),
EndTime:new Date(2021, 8, 10, 13, 30),
IsAllDay: false,
OwnerId: 1
}, {
Id: 20,
Subject: 'Decoding',
StartTime:new Date(2021, 8, 10, 10, 30),
EndTime:new Date(2021, 8, 10, 12, 30),
IsAllDay: false,
OwnerId: 2
}, {
Id: 21,
Subject: 'workflow Analysis',
StartTime:new Date(2021, 8, 11, 9, 30),
EndTime:new Date(2021, 8, 11, 11, 30),
IsAllDay: false,
OwnerId: 3
}, {
Id: 22,
Subject: 'Requirement planning',
StartTime:new Date(2021, 8, 11, 12, 30),
EndTime:new Date(2021, 8, 11, 14, 45),
IsAllDay: false,
OwnerId: 2
}, {
Id: 23,
Subject: 'Quality Analysis',
StartTime:new Date(2021, 8, 12, 10),
EndTime:new Date(2021, 8, 12, 12, 30),
IsAllDay: false,
OwnerId: 3
}, {
Id: 24,
Subject: 'Resource planning',
StartTime:new Date(2021, 11, 12, 13),
EndTime:new Date(2021, 11, 12, 14, 30),
IsAllDay: false,
OwnerId: 2
}, {
Id: 25,
Subject: 'Timeline estimation',
StartTime:new Date(2021, 9, 13, 9),
EndTime:new Date(2021, 9, 13, 11),
IsAllDay: false,
OwnerId: 3
}, {
Id: 26,
Subject: 'Developers Meeting',
StartTime:new Date(2021, 8, 13, 14),
EndTime:new Date(2021, 8, 13, 15, 45),
IsAllDay: false,
OwnerId: 2
}, {
Id: 27,
Subject: 'Project Review',
StartTime:new Date(2021, 8, 14, 11),
EndTime:new Date(2021, 8, 14, 13),
IsAllDay: false,
OwnerId: 1
}, {
Id: 28,
Subject: 'Manual testing',
StartTime:new Date(2021, 10, 14, 9),
EndTime:new Date(2021, 10, 14, 11, 30),
IsAllDay: false,
OwnerId: 2
}, {
Id: 29,
Subject: 'Project Preview',
StartTime:new Date(2021, 8, 15, 9, 30),
EndTime:new Date(2021, 8, 15, 11),
IsAllDay: false,
OwnerId: 3
}, {
Id: 30,
Subject: 'Cross-browser testing',
StartTime:new Date(2021, 8, 15, 14),
EndTime:new Date(2021, 8, 15, 16, 30),
IsAllDay: false,
OwnerId: 2
}, {
Id: 31,
Subject: 'Bug Automation',
StartTime:new Date(2021, 10, 16, 10),
EndTime:new Date(2021, 10, 16, 11),
IsAllDay: false,
OwnerId: 1
}, {
Id: 32,
Subject: 'Functionality testing',
StartTime:new Date(2021, 10, 16, 9),
EndTime:new Date(2021, 10, 16, 11, 30),
IsAllDay: false,
OwnerId: 2
}, {
Id: 33,
Subject: 'Resolution-based testing',
StartTime:new Date(2021, 8, 17, 14),
EndTime:new Date(2021, 8, 17, 15),
IsAllDay: false,
OwnerId: 3
}, {
Id: 34,
Subject: 'Test report Validation',
StartTime:new Date(2021, 7, 17, 9),
EndTime:new Date(2021, 7, 17, 11),
IsAllDay: false,
OwnerId: 2
}, {
Id: 35,
Subject: 'Test case correction',
StartTime:new Date(2021, 7, 18, 10),
EndTime:new Date(2021, 7, 18, 11, 30),
IsAllDay: false,
OwnerId: 1
}, {
Id: 36,
Subject: 'Run test cases',
StartTime:new Date(2021, 8, 18, 10),
EndTime:new Date(2021, 8, 18, 10, 30),
IsAllDay: false,
OwnerId: 2
}, {
Id: 37,
Subject: 'Bug fixing',
StartTime:new Date(2021, 8, 9, 10),
EndTime:new Date(2021, 8, 9, 10, 30),
IsAllDay: false,
OwnerId: 3
}, {
Id: 38,
Subject: 'Debugging',
StartTime:new Date(2021, 8, 19, 9),
EndTime:new Date(2021, 8, 19, 10, 30),
IsAllDay: false,
OwnerId: 2
}, {
Id: 39,
Subject: 'Exception handling',
StartTime:new Date(2021, 8, 20, 10),
EndTime:new Date(2021, 8, 20, 11),
IsAllDay: false,
OwnerId: 1
}
];
});