databinding from rest api using nuxt this.$axios for scheduler actions

[ABHILASH]

Using scheduler inside a nuxt component like below.

The urls for the REST backend for the scheduler action looks like this

Get all schedules

GET	/api/v1/vertical_timings

New schedule

POST	/api/v1/vertical_timings

UpdateSchedule

PATCH

/api/v1/vertical_timings/:id

Delete Schedule

DELETE

/api/v1/vertical_timings/:id

Template

  ref="scheduleObj"
  height="550px"
  :selected-date="selectedDate"
  :event-settings="eventSettings"
  :action-failure="onActionFailure"
>
  
    option="Day">
    option="Week">
    option="Month">
    option="Agenda">
  

Script

import {
  DataManager,
  WebMethodAdaptor,
  CustomDataAdaptor,
  Query,
} from '@syncfusion/ej2-data'
import { Day, Week, Month, Agenda } from '@syncfusion/ej2-vue-schedule'
export default {

  

props: { vertical: { type: Object } },
  provide: {
    schedule: [Day, Week, Month, Agenda],
  },

  data() {
    return {
      selectedDate: new Date(2021, 5, 26),
      isShowTimingModal: false,
      eventSettings: {
        dataSource: # how to create data source here with the custom urls that is REST, It will be better using this.$axios as it already handles auth in nuxt apps
    }
  },
  methods: {
    onActionFailure() {
      console.log('error occcuredddddddddddddd')
    },
  },
}}

How to call rest backend for get, update,post, delete actions of the scheduler using this.$axios(global nuxt variable)?

[Hareesh Balasubramanian]

Hi Abhilash, 

Greetings from Syncfusion Support..! 

We have prepared a CRUD sample based on your shared query “need to use Axios method for performing CRUD actions” using Axios library method for performing CRUD actions in scheduler, which can be downloaded from the following link. 

Service: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Service522425964  

Sample: https://codesandbox.io/s/vue-axios-call-for-crud-actions-zgfwk?file=/src/App.vue 

    onDataBound: function () { 

      if (flag) { 

        axios.get("http://localhost:54738/Home/GetData").then((response) => { 

          var schObj = document.querySelector(".e-schedule").ej2_instances[0]; 

          schObj.eventSettings.dataSource = response.data; 

        }); 

        flag = false; 

      } 

    }, 

    onActionBegin: function (args) { 

      if (args.requestType === "eventCreate") { 

        axios 

          .post("http://localhost:54738/Home/Insert", args.data[0]) 

          .then((response) => { 

            var schObj = document.querySelector(".e-schedule").ej2_instances[0]; 

            schObj.eventSettings.dataSource = response.data; 

          }); 

      } else if (args.requestType === "eventChange") { 

        axios 

          .post("http://localhost:54738/Home/Update", args.data) 

          .then((response) => { 

            var schObj = document.querySelector(".e-schedule").ej2_instances[0]; 

            schObj.eventSettings.dataSource = response.data; 

          }); 

      } else if (args.requestType === "eventRemove") { 

        axios 

          .post("http://localhost:54738/Home/Delete", args.data[0]) 

          .then((response) => { 

            var schObj = document.querySelector(".e-schedule").ej2_instances[0]; 

            schObj.eventSettings.dataSource = response.data; 

          }); 

      } 

    }, 

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

Regards, 

Hareesh 

[ABHILASH]

Thank you for the support

[Nevitha Ravi]

Hi Abhilash,
 

You are most welcome..! please get back to us if you need any further assistance.

Regards,
Nevitha