Half yearly view in Vue Schedule component
25 May 202412 minutes to read
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'">
<template v-slot:resourceHeaderTemplate="{ data }">
<div class='template-wrap'>
<div class="resource-details">
<div class="resource-name"></div>
</div>
</div>
</template>
<template v-slot:monthHeaderTemplate="{ data }">
<div></div>
</template>
<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 setup>
import { provide } from "vue";
import { resourceData } from "./datasource.js";
import { ScheduleComponent as EjsSchedule, ViewDirective as EView, ViewsDirective as EViews, ResourcesDirective as EResources, ResourceDirective as EResource, Year, TimelineYear, Resize, DragAndDrop } from "@syncfusion/ej2-vue-schedule";
const width = "100%";
const height = "550px";
const currentView = "TimelineWeek";
const selectedDate = new Date(2021, 7, 4);
const firstMonthOfYear = 6;
const monthsCount = 6;
const group = {
resources: ["Owners"]
};
const allowMultiple = true;
const 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" }
];
const eventSettings = { dataSource: resourceData }
provide('schedule', [Year, TimelineYear, Resize, DragAndDrop]);
const monthHeaderTemplate = function (date) {
return (
date.toLocaleString("en-us", { month: "long" }) +
" " +
date.getFullYear()
);
}
</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><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'">
<template v-slot:resourceHeaderTemplate="{ data }">
<div class='template-wrap'>
<div class="resource-details">
<div class="resource-name"></div>
</div>
</div>
</template>
<template v-slot:monthHeaderTemplate="{ data }">
<div></div>
</template>
<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 { resourceData } from "./datasource.js";
import { ScheduleComponent, ViewsDirective, ViewDirective, ResourcesDirective, ResourceDirective, Year, TimelineYear, Resize, DragAndDrop } from "@syncfusion/ej2-vue-schedule";
export default {
name: "App",
components: {
"ejs-schedule": ScheduleComponent,
"e-views": ViewsDirective,
"e-view": ViewDirective,
"e-view": ViewDirective,
"e-resources": ResourcesDirective,
"e-resource": ResourceDirective
},
data() {
return {
width: "100%",
height: "550px",
currentView: "TimelineWeek",
selectedDate: new Date(2021, 7, 4),
firstMonthOfYear: 6,
monthsCount: 6,
group: {
resources: ["Owners"]
},
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" }
],
eventSettings: { dataSource: resourceData }
};
},
provide: {
schedule: [Year, TimelineYear, Resize, DragAndDrop]
},
methods: {
monthHeaderTemplate: function (date) {
return (
date.toLocaleString("en-us", { month: "long" }) +
" " +
date.getFullYear()
);
}
}
};
</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>