Search results

Show quick info template in Vue Schedule component

14 Oct 2021 / 5 minutes to read

This demo showcases the quick popups for cells and appointments with the customized templates.

Source
Preview
app.vue
datasource.js
Copied to clipboard
<template>
  <div id='app'>
    <div id='container'>
      <ejs-schedule :height='height' :width='width' :views='views'
        :selectedDate='selectedDate' :eventSettings='eventSettings'
        :quickInfoTemplates='quickInfoTemplates'>
        <e-resources>
          <e-resource field="RoomId" title="Room Type" name="MeetingRoom" textField="Name" idField="Id" colorField="Color" :dataSource="roomData"></e-resource>
        </e-resources>
      </ejs-schedule>
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
import {SchedulePlugin, Day, Week, WorkWeek, Month, Agenda  } from '@syncfusion/ej2-vue-schedule';
import { extend, Internationalization } from "@syncfusion/ej2-base";
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";
import { DropDownListPlugin } from "@syncfusion/ej2-vue-dropdowns";
import { TextBoxPlugin } from "@syncfusion/ej2-vue-inputs";
import { quickInfoData } from './datasource.js';

Vue.use(SchedulePlugin);
Vue.use(ButtonPlugin);
Vue.use(DropDownListPlugin);
Vue.use(TextBoxPlugin);

var resourceData = [
  { Name: "Jammy", Id: 1, Capacity: 20, Color: "#ea7a57", Type: "Conference" },
  { Name: "Tweety", Id: 2, Capacity: 7, Color: "#7fa900", Type: "Cabin" },
  { Name: "Nestle", Id: 3, Capacity: 5, Color: "#5978ee", Type: "Cabin" },
  { Name: "Phoenix", Id: 4, Capacity: 15, Color: "#fec200", Type: "Conference" },
  { Name: "Mission", Id: 5, Capacity: 25, Color: "#df5286", Type: "Conference" },
  { Name: "Hangout", Id: 6, Capacity: 10, Color: "#00bdae", Type: "Cabin" },
  { Name: "Rick Roll", Id: 7, Capacity: 20, Color: "#865fcf", Type: "Conference" },
  { Name: "Rainbow", Id: 8, Capacity: 8, Color: "#1aaa55", Type: "Cabin" },
  { Name: "Swarm", Id: 9, Capacity: 30, Color: "#df5286", Type: "Conference" },
  { Name: "Photogenic", Id: 10, Capacity: 25, Color: "#710193", Type: "Conference" }
];

var headerTemplateVue = Vue.component('headerTemplate', {
  template: `<div class="quick-info-header">
    <div class="quick-info-header-content" v-if="data.elementType == 'cell'" :style="{'align-items':'center','color':'#919191'}">
      <div class="quick-info-title">{{getHeaderTitle(data)}}</div>
      <div class="duration-text">{{getHeaderDetails(data)}}</div>
    </div>
    <div class="quick-info-header-content" v-else :style="{'background': getHeaderStyles(data),'color':'#FFFFFF'}">
      <div class="quick-info-title">{{getHeaderTitle(data)}}</div>
      <div class="duration-text">{{getHeaderDetails(data)}}</div>
    </div>
  </div>`,
  data() {
    return {
        intl: new Internationalization(),
      data: {}
    };
  },
  methods: {
    getHeaderStyles: function(data) {
      const scheduleObj = document.querySelector(".e-schedule").ej2_instances[0];
      const resources = scheduleObj.getResourceCollections().slice(-1)[0];
      const resourceData = resources.dataSource.filter(resource => resource.Id === data.RoomId)[0];
      return resourceData.Color;
    },
    getHeaderTitle: function(data) {
      return data.elementType === "cell" ? "Add Appointment" : "Appointment Details";
    },
    getHeaderDetails: function(data) {
      return (
        this.intl.formatDate(data.StartTime, { type: "date", skeleton: "full" }) + " (" +
        this.intl.formatDate(data.StartTime, { skeleton: 'hm' }) + " - " +
        this.intl.formatDate(data.EndTime, { skeleton: 'hm' }) + ")"
      );
    }
  }
});

var contentTemplateVue = Vue.component('contentTemplate', {
  template: `<div class="quick-info-content"><div class="e-cell-content" v-if="data.elementType === 'cell'">
    <div class="content-area"><ejs-textbox ref="titleObj" id="title" placeholder="Title"></ejs-textbox></div>
    <div class="content-area"><ejs-dropdownlist ref="eventTypeObj" id="eventType" :dataSource="roomData" :index="0" :fields="fields"
    popupHeight="200px" placeholder="Choose Type"></ejs-dropdownlist></div>
    <div class="content-area"><ejs-textbox ref="notesObj" id="notes" placeholder="Notes"></ejs-textbox></div></div>
    <div class="event-content" v-else><div class="meeting-type-wrap"><label>Subject</label>:<span>{{data.Subject}}</span></div>
    <div class="meeting-subject-wrap"><label>Type</label>:<span>{{getEventType(data)}}</span></div>
    <div class="notes-wrap"><label>Notes</label>:<span>{{data.Description}}</span></div></div></div>`,
  data() {
    return {
        fields: { text: "Name", value: "Id" },
      roomData: extend([], resourceData, undefined, true),
      data: {}
    };
  },
  methods: {
    getEventType: function(data) {
      const scheduleObj = document.querySelector(".e-schedule").ej2_instances[0];
      const resources = scheduleObj.getResourceCollections().slice(-1)[0];
      const resourceData = resources.dataSource.filter(resource => resource.Id === data.RoomId)[0];
      return resourceData.Name;
    }
  }
});

var footerTemplateVue = Vue.component('footerTemplate', {
  template: `<div class="quick-info-footer"><div class="cell-footer" v-if="data.elementType === 'cell'">
    <ejs-button id="more-details" cssClass="e-flat" content="More Details" v-on:click.native="buttonClickActions"></ejs-button>
    <ejs-button id="add" cssClass="e-flat" content="Add" :isPrimary="true" v-on:click.native="buttonClickActions"></ejs-button>
    </div><div class="event-footer" v-else>
    <ejs-button id="delete" cssClass="e-flat" content="Delete" v-on:click.native="buttonClickActions"></ejs-button>
    <ejs-button id="more-details" cssClass="e-flat" content="More Details" :isPrimary="true" v-on:click.native="buttonClickActions"></ejs-button>
    </div></div>`,
  data() {
    return {
      data: {}
    };
  },
    methods: {
    buttonClickActions: function(e) {
      const scheduleObj = document.querySelector(".e-schedule").ej2_instances[0];
      const quickPopup = scheduleObj.element.querySelector(".e-quick-popup-wrapper");
      const getSlotData = function() {
        const titleObj = quickPopup.querySelector("#title").ej2_instances[0];
        const notesObj = quickPopup.querySelector("#notes").ej2_instances[0];
        const eventTypeObj = quickPopup.querySelector("#eventType").ej2_instances[0];
        const cellDetails = scheduleObj.getCellDetails(scheduleObj.getSelectedElements());
        let addObj = {};
        addObj.Id = scheduleObj.getEventMaxID();
        addObj.Subject = titleObj.value;
        addObj.StartTime = new Date(+cellDetails.startTime);
        addObj.EndTime = new Date(+cellDetails.endTime);
        addObj.Description = notesObj.value;
        addObj.RoomId = eventTypeObj.value;
        return addObj;
      };
      if (e.target.id === "add") {
        const addObj = getSlotData();
        scheduleObj.addEvent(addObj);
      } else if (e.target.id === "delete") {
        const eventDetails = scheduleObj.activeEventData.event;
        let currentAction = "Delete";
        if (eventDetails.RecurrenceRule) {
          currentAction = "DeleteOccurrence";
        }
        scheduleObj.deleteEvent(eventDetails, currentAction);
      } else {
        const isCellPopup = quickPopup.firstElementChild.classList.contains("e-cell-popup");
        const eventDetails = isCellPopup ? getSlotData() : scheduleObj.activeEventData.event;
        let currentAction = isCellPopup ? "Add" : "Save";
        if (eventDetails.RecurrenceRule) {
          currentAction = "EditOccurrence";
        }
        scheduleObj.openEditor(eventDetails, currentAction, true);
      }
      scheduleObj.closeQuickInfoPopup();
    }
  }
});

export default {
  data() {
    return {
      height: '650px',
      width: '100%',
      eventSettings: {
        dataSource: quickInfoData
      },
      selectedDate: new Date(2020, 0, 9),
      views: ['Day', 'Week', 'WorkWeek'],
      roomData: extend([], resourceData, undefined, true),
      quickInfoTemplates: {
        header: function(e) {
          return {
            template: headerTemplateVue
          };
        },
        content: function(e) {
          return {
            template: contentTemplateVue
          };
        },
        footer: function(e) {
          return {
            template: footerTemplateVue
          };
        }
      }
    };
  },
  provide: {
    schedule: [Day, Week, WorkWeek, Month, Agenda]
  }
}
</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";

  .quick-info-header {
  background-color: white;
  padding: 8px 18px;
}

.quick-info-header-content {
  justify-content: flex-end;
  display: flex;
  flex-direction: column;
  padding: 5px 10px 5px;
}

.quick-info-title {
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.48px;
  height: 22px;
}

.duration-text {
  font-size: 11px;
  letter-spacing: 0.33px;
  height: 14px;
}

.content-area {
  margin: 0;
  padding: 10px;
  width: auto;
}

.event-content {
  height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 15px;
}

.meeting-type-wrap,
.meeting-subject-wrap,
.notes-wrap {
  font-size: 11px;
  color: #666;
  letter-spacing: 0.33px;
  height: 24px;
  padding: 5px;
}

.event-content div label {
  display: inline-block;
  min-width: 45px;
  color: #666;
}

.event-content div span {
  font-size: 11px;
  color: #151515;
  letter-spacing: 0.33px;
  line-height: 14px;
  padding-left: 8px;
}

.cell-footer.e-btn {
  background-color: #ffffff;
  border-color: #878787;
  color: #878787;
}

.cell-footer {
  padding-top: 10px;
}

.e-quick-popup-wrapper .e-cell-popup .e-popup-content {
  padding: 0 14px;
}

.e-quick-popup-wrapper .e-event-popup .e-popup-footer {
  display: block;
}

.e-quick-popup-wrapper .e-popup-footer button:first-child {
  margin-right: 5px;
}
</style>
Copied to clipboard
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, 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'
        }
    ];

    exports.resourceData = [
        {
            Id: 1,
            Subject: 'Family vacation',
            StartTime: new Date(2018, 3, 1, 9, 30),
            EndTime: new Date(2018, 3, 1, 12, 0),
            IsAllDay: false,
            Location: 'London',
            OwnerId: 1,
            RoomId: 1
        }, {
            Id: 2,
            Subject: 'Holiday',
            StartTime: new Date(2018, 3, 1, 12, 30),
            EndTime: new Date(2018, 3, 1, 14, 45),
            IsAllDay: false,
            Location: 'USA',
            OwnerId: 2,
            RoomId: 2
        }, {
            Id: 3,
            Subject: 'Conference',
            StartTime: new Date(2018, 3, 2, 10, 0),
            EndTime: new Date(2018, 3, 2, 12, 30),
            IsAllDay: false,
            Location: 'Paris',
            OwnerId: 1,
            RoomId: 1
        }, {
            Id: 4,
            Subject: 'Weekend trip',
            StartTime: new Date(2018, 3, 2, 13, 0),
            EndTime: new Date(2018, 3, 2, 15, 30),
            IsAllDay: false,
            Location: 'Spain',
            OwnerId: 2,
            RoomId: 2
        }, {
            Id: 5,
            Subject: 'Weekend trip',
            StartTime: new Date(2018, 3, 3, 9, 0),
            EndTime: new Date(2018, 3, 3, 11, 30),
            IsAllDay: false,
            Location: 'Paris',
            OwnerId: 1,
            RoomId: 1
        }, {
            Id: 6,
            Subject: 'Holiday trip',
            StartTime: new Date(2018, 3, 3, 14, 0),
            EndTime: new Date(2018, 3, 3, 16, 45),
            IsAllDay: false,
            Location: 'Thailand',
            OwnerId: 2,
            RoomId: 2
        }, {
            Id: 7,
            Subject: 'World cup',
            StartTime: new Date(2018, 3, 4, 11, 15),
            EndTime: new Date(2018, 3, 4, 13, 30),
            IsAllDay: false,
            Location: 'Brazil',
            OwnerId: 1,
            RoomId: 1
        }, {
            Id: 8,
            Subject: 'Test match',
            StartTime: new Date(2018, 3, 4, 9, 15),
            EndTime: new Date(2018, 3, 4, 11, 45),
            IsAllDay: false,
            Location: 'West indies',
            OwnerId: 2,
            RoomId: 2
        }, {
            Id: 9,
            Subject: 'One-day match',
            StartTime: new Date(2018, 3, 5, 9, 30),
            EndTime: new Date(2018, 3, 5, 12, 45),
            IsAllDay: false,
            Location: 'India',
            OwnerId: 1,
            RoomId: 1
        }, {
            Id: 10,
            Subject: 'Test drive',
            StartTime: new Date(2018, 3, 5, 13, 45),
            EndTime: new Date(2018, 3, 5, 16, 30),
            IsAllDay: false,
            Location: 'London',
            OwnerId: 2,
            RoomId: 1
        }
    ];

    exports.quickInfoData = [
        {
            RoomId: 10,
            Id: 1,
            Subject: 'Board Meeting',
            Description: 'Meeting to discuss business goal of 2020.',
            StartTime: '2020-01-05T04:00:00.000Z',
            EndTime: '2020-01-05T05:30:00.000Z'
        },
        {
            RoomId: 8,
            Id: 2,
            Subject: 'Training session on JSP',
            Description: 'Knowledge sharing on JSP topics.',
            StartTime: '2020-01-07T04:00:00.000Z',
            EndTime: '2020-01-07T05:30:00.000Z'
        },
        {
            RoomId: 3,
            Id: 3,
            Subject: 'Sprint Planning with Team members',
            Description: 'Planning tasks for sprint.',
            StartTime: '2020-01-09T04:00:00.000Z',
            EndTime: '2020-01-09T05:30:00.000Z'
        },
        {
            RoomId: 2,
            Id: 4,
            Subject: 'Meeting with Client',
            Description: 'Customer meeting to discuss features.',
            StartTime: '2020-01-11T03:30:00.000Z',
            EndTime: '2020-01-11T05:00:00.000Z'
        },
        {
            RoomId: 5,
            Id: 5,
            Subject: 'Support Meeting with Managers',
            Description: 'Meeting to discuss support plan.',
            StartTime: '2020-01-06T06:30:00.000Z',
            EndTime: '2020-01-06T08:00:00.000Z'
        },
        {
            RoomId: 1,
            Id: 6,
            Subject: 'Client Meeting',
            Description: 'Meeting to discuss client requirements.',
            StartTime: '2020-01-08T06:00:00.000Z',
            EndTime: '2020-01-08T07:30:00.000Z'
        },
        {
            RoomId: 7,
            Id: 7,
            Subject: 'Appraisal Meeting',
            Description: 'Meeting to discuss employee appraisals.',
            StartTime: '2020-01-10T05:30:00.000Z',
            EndTime: '2020-01-10T07:00:00.000Z'
        },
        {
            RoomId: 6,
            Id: 8,
            Subject: 'HR Meeting',
            Description: 'Meeting to discuss HR plans.',
            StartTime: '2020-01-05T07:30:00.000Z',
            EndTime: '2020-01-05T09:00:00.000Z'
        },
        {
            RoomId: 4,
            Id: 9,
            Subject: 'Customer Meeting',
            Description: 'Meeting to discuss customer reported issues.',
            StartTime: '2020-01 - 09T07: 00: 00.000Z',
            EndTime: '2020-01 - 09T08: 30: 00.000Z'
        },
        {
            RoomId: 9,
            Id: 10,
            Subject: 'Board Meeting',
            Description: 'Meeting to discuss business plans.',
            StartTime: '2020-01 - 11T07: 30: 00.000Z',
            EndTime: '2020-01 - 11T09: 00: 00.000Z'
        }
    ];
});