Bidding data from vuex store

[UuhL]

I'm having trouble displaying my tasks from the vuex store.

How can I show them from the vuex store. I tried to show them with taskList in the return data but it didn't work.

Another question how I can make my task properties match those of the calendar, for example I have:

{ taskId: 'qwerty123', taskName: 'myTaskName' }

and the calendar waits:

{ Id: 1, Subject: 'Explosion of Betelgeuse Star', StartTime: new Date (2018, 1, 11, 9, 30) }

thanks

[Vinitha Devi Murugan]

Hi UUhl, 

 

Greetings from Syncfusion Support. 

 

We have validated your requirement “Binding data from Vuex store” at our end and we have prepared below sample to load the Scheduler datasource from Vuex store. 

 

https://codesandbox.io/s/vue-store-scheduler-sample-forked-3xcml  

 

Note: We need to map the proper field name in eventSettings to render appointments in scheduler. Please refer below UG for more information. 

 

https://ej2.syncfusion.com/vue/documentation/schedule/appointments/#binding-different-field-names  

 

 

const store = new Vuex.Store({ 

    state: { 

      data: [], 

    }, 

    mutations: { 

      increment(state) { 

        state.data = [ 

          { 

            taskid: 1, 

            taskname: "Explosion of Betelgeuse Star", 

            Location: "Space Centre USA", 

            TaskStartTime: new Date(2018, 3, 5, 9, 30), 

            TaskEndTime: new Date(2018, 3, 6, 11, 0), 

            CategoryColor: "#1aaa55", 

          }, 

          { 

            taskid: 2, 

            taskname: "Thule Air Crash Report", 

            Location: "Newyork City", 

            TaskStartTime: new Date(2018, 3, 7, 12, 0), 

            TaskEndTime: new Date(2018, 3, 7, 14, 0), 

            CategoryColor: "#357cd2", 

          }, 

          { 

            taskid: 3, 

            taskname: "Blue Moon Eclipse", 

            Location: "Space Centre USA", 

            TaskStartTime: new Date(2018, 3, 8, 9, 30), 

            TaskEndTime: new Date(2018, 3, 8, 11, 0), 

            CategoryColor: "#7fa900", 

          }, 

          { 

            taskid: 4, 

            taskname: "Meteor Showers in 2018", 

            Location: "Space Centre USA", 

            TaskStartTime: new Date(2018, 3, 9, 13, 0), 

            TaskEndTime: new Date(2018, 3, 9, 14, 30), 

            CategoryColor: "#ea7a57", 

          }, 

          { 

            taskid: 5, 

            taskidname: "Milky Way as Melting pot", 

            Location: "Space Centre USA", 

            TaskStartTime: new Date(2018, 3, 10, 12, 0), 

            TaskEndTime: new Date(2018, 3, 12, 14, 0), 

            CategoryColor: "#00bdae", 

          }, 

        ]; 

      }, 

    }, 

  }); 

  store.commit("increment"); 

   

  export default Vue.extend({ 

    store: store, 

    data: function () { 

      return { 

        eventSettings: { 

          dataSource: this.$store.state.data, 

          fields: { 

            id: "taskid", 

            subject: { name: "taskname" }, 

            isAllDay: { name: "FullDay" }, 

            location: { name: "Location" }, 

            description: { name: "Comments" }, 

            startTime: { name: "TaskStartTime" }, 

            endTime: { name: "TaskEndTime" }, 

          }, 

        }, 

 

Kindly try the above sample and get back to us if you need any further assistance.  

 

Regards, 

Vinitha 

[UuhL]

Hi Vinitha, 

Thanks it worked. Have a geat day!

Regards, 

UuhL

[Vengatesh Maniraj]

Hi  UUhl,

You are most welcome!!!

Have a great day😊

Regards,

Vengatesh