Search results

Show half-yearly view in Vue Schedule component

23 Sep 2021 / 2 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.

Source
Preview
app.vue
datasource.js
Copied to clipboard
<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>
Copied to clipboard
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
        }
    ];
});