Schedule error on independent component

[Alberto Provencio]

Hi,

I'm trying to use vue3 your boilerplate for schedule https://github.com/SyncfusionExamples/vue3-schedule-getting-started.

It works great with default values but, when I move the schedule to another component it doesn't work.

File: App.vue

<template>

  <div id="app">

    <Planner />

  </div>

</template>

<script>

import { defineComponent } from "vue";

import Planner from "@/components/Planner.vue";

export default defineComponent({

  name: "Home",

  components: {

    Planner

  }

});

</script>

File: components/Planner.vue

<template>

  <ejs-schedule

    height="550px"

    width="100%"

    :selectedDate="selectedDate"

    :eventSettings="eventSettings"

  >

    <e-views>

      <e-view option="Day"></e-view>

      <e-view option="Week" startHour="07:00" endHour="15:00"></e-view>

      <e-view option="WorkWeek" startHour="10:00" endHour="18:00"></e-view>

      <e-view option="Month" showWeekend="false"></e-view>

      <e-view option="Agenda"></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>

</template>

<script>

import {

  ScheduleComponent,

  Day,

  Week,

  WorkWeek,

  Month,

  Agenda,

  DragAndDrop,

  Resize,

  ViewsDirective,

  ViewDirective,

  ResourcesDirective,

  ResourceDirective

} from "@syncfusion/ej2-vue-schedule";

import "../../node_modules/@syncfusion/ej2-base/styles/material.css";

import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";

import "../../node_modules/@syncfusion/ej2-calendars/styles/material.css";

import "../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";

import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";

import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";

import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";

import "../../node_modules/@syncfusion/ej2-vue-schedule/styles/material.css";

export default {

  name: "App",

  // Declaring component and its directives

  components: {

    "ejs-schedule": ScheduleComponent,

    "e-views": ViewsDirective,

    "e-view": ViewDirective,

    "e-resources": ResourcesDirective,

    "e-resource": ResourceDirective

  },

  // Bound properties declaration

  data() {

    return {

      selectedDate: new Date(2021, 7, 12),

      allowMultiple: true,

      ownerDataSource: [

        { OwnerText: "Nancy", Id: 1, OwnerColor: "#ffaa00" },

        { OwnerText: "Steven", Id: 2, OwnerColor: "#f8a398" },

        { OwnerText: "Michael", Id: 3, OwnerColor: "#7499e1" }

      ],

      eventSettings: {

        dataSource: [

          {

            Id: 1,

            Subject: "Surgery - Andrew",

            EventType: "Confirmed",

            StartTime: new Date(2021, 7, 10, 9, 0),

            EndTime: new Date(2021, 7, 10, 10, 0),

            OwnerId: 2

          },

          {

            Id: 2,

            Subject: "Consulting - John",

            EventType: "Confirmed",

            StartTime: new Date(2021, 7, 11, 10, 0),

            EndTime: new Date(2021, 7, 11, 11, 30),

            OwnerId: 3

          },

          {

            Id: 3,

            Subject: "Therapy - Robert",

            EventType: "Requested",

            StartTime: new Date(2021, 7, 12, 11, 30),

            EndTime: new Date(2021, 7, 12, 12, 30),

            OwnerId: 1

          }

        ]

      }

    };

  },

  provide: {

    schedule: [Day, Week, WorkWeek, Month, Agenda, DragAndDrop, Resize]

  }

};

</script>

<style></style>

I added two screenshots of current issue:

This image shows the initial schedule state.

This another image shows error when button on schedule are clicked.

How can I solve this issue?

Best regards

Antonio.

[Satheesh Kumar Balasubramanian]

Hi Alberto, 

  

Thanks for using Syncfusion Products. 

  

We have validated your reported query "Schedule error on independent component" and suggest you to inject the view modules in App.vue page to resolve the reported issue. For the same we have prepared the sample which can be downloaded from the following link. 

  

Sample: https://www.syncfusion.com/downloads/support/forum/169227/ze/Vue3Schedule1480355234 

  

App.vue:    

<template> 

  <div id="app"> 

    <Planner /> 

  </div> 

</template> 

  

<script> 

import Planner from './components/Planner.vue'; 

import { Day, Week, WorkWeek, Month, Agenda, DragAndDrop, Resize } from "@syncfusion/ej2-vue-schedule"; 

  

export default { 

  name: 'App', 

  components: { 

    Planner 

  }, 

  provide: { 

    schedule: [Day, Week, WorkWeek, Month, Agenda, DragAndDrop, Resize] 

  } 

} 

</script> 

  

Kindly try the above sample and let us know if this meets your requirement. 

  

Regards, 

Satheesh Kumar B 

[Alberto Provencio]

Thank you very much it works great.

[Nevitha Ravi]

Hi Alberto, 

You are most welcome..! we are glad that our solution worked at your end. Please get back to us if you need any further assistance. 

Regards, 

Nevitha.