vue.js - 如何使用 eventDataTransform 在 FullCalender Vue 中传递自定义数据

Question

我有每个事件的自定义数据点（例如 event.organizer）。我希望这包含在活动部分的日历中。

我查看了文档（https://fullcalendar.io/docs/eventDataTransform），但它非常松懈，尤其是在 Vue 组件方面（https://fullcalendar.io/docs/vue）

任何人都可以协助 Vue 组件的外观吗？我需要添加道具吗？以下没有奏效。

import { resources, events }  from "/mockdata.js";

    <FullCalendar @eventDataTransform="eventDataTransform" :options="calendarOptions" />

export default {
  components: {
    FullCalendar,
  },
  data() {
    return {
      calendarOptions: {
        plugins: [dayGridPlugin, interactionPlugin, resourceTimelinePlugin],
        initialView: "resourceTimeline",
        initialDate: "2021-06-18",
        resources,
        events,
      },
    };
  },
  methods: {
    eventDataTransform: function(json) {
      console.log(json)
    },
  },
};

标签： vue.jsfullcalendar

Answer 1

在示例中找到。https://github.com/fullcalendar/fullcalendar-example-projects/blob/master/vue3-typescript/src/Demo.vue#L115

<FullCalendar :options="calendarOptions">
    <template v-slot:eventContent='arg'>
      <i>{{ arg.event.extendedProps.organizer }}</i>
    </template>
</FullCalendar>