使用Laravel API资源获取全日历事件

时间:2019-11-30 19:43:45

标签: json laravel vue.js fullcalendar

我正在尝试使用Laravel API + Vue在FullCalendar中呈现事件。

在Vue中,我有以下代码:

<FullCalendar
      ref="fullCalendar"
      class="calendar"
      default-view="dayGridMonth"
      :header="{
        left: 'title',
        center: '',
        right: 'prev,next today',
      }"
      :plugins="calendarPlugins"
      :weekends="calendarWeekends"
      :events="calendarEvents"
      locale="it"
      :firstDay="1"
      @dateClick="handleDateClick"
      @eventClick="handleEventEdit"
/> 
...
components: {
    FullCalendar,
  },
data: function() {
    return {
      calendarPlugins: [
        dayGridPlugin,
        interactionPlugin,
      ],
      editable: true,
      calendarWeekends: true,
      calendarEvents: this.elist, 
      eventFormVisible: false,
      elist: [],
    };
  },
...
created() {
    this.getElist();
  },
methods: {
      async getElist() {
      this.Equery.user_id = this.userId;
      this.elist = await eventResource.list(this.Equery); // http://mysite.test/api/events?user_id=1
      this.elist = this.elist.data;
    },
...

API响应似乎正确:

{"data":[{"id":2,"user_id":1,"job_id":null,"job":"2018-090-01","title":"2018-090-01 : 2","hours":2,"start":"2019-11-06T00:00:00+0000","end":"2019-11-06T00:00:00+0000"},{"id":3,"user_id":1,"job_id":null,"job":"2018-090-01","title":"2018-090-01 : 1","hours":1,"start":"2019-11-29T00:00:00+0000","end":"2019-11-29T00:00:00+0000"}]}

但事件未加载

出于调试目的,我尝试:

calendarEvents: 'https://fullcalendar.io/demo-events.json'

它有效! 我找不到错误,需要帮助。 预先感谢。

0 个答案:

没有答案