从自定义视图访问上下文答案

【问题标题】：Accessing context from a custom View从自定义视图访问上下文
【发布时间】：2021-02-08 15:12:48
【问题描述】：

配置日历视图时，可以指定view specific options。但是关于custom views 的文档没有说明如何检索这些选项。

有什么方法可以在这里获取这些选项，从而使自定义视图发挥它们的作用？

有没有办法从自定义视图回调中访问view object？（也许上面有选项）

【问题讨论】：

那个文档说Props Both the config and component techniques receive “props”, an object with information about the current view. You’ll need to look at the FullCalendar v5 source code to see exactly what’s in props.。这不能回答你的问题吗？
不是真的，there are 确实有一些道具，但不是关于视图本身，也不是特定视图选项。

标签： fullcalendar fullcalendar-5

【解决方案1】：

我使用过的一种解决方案，但我认为这应该是核心行为的一部分，即在通过调用 createPlugin 创建自定义视图时使用未记录的 viewPropsTransformers 选项：

class MorePropsToView {
  transform(viewProps, calendarProps) {
    return {
      ...viewProps,
      options: calendarProps.viewSpec.optionOverrides,
      calendar: calendarProps.calendarApi,
    }
  }
}

export const myPlugin = createPlugin({
  views: {
    custom: CustomView,
  },
  viewPropsTransformers: MorePropsToView,
})

所以自定义视图中可以使用两个额外的道具：

const CustomView = function CustomView({
  eventStore,
  dateProfile,
  options,
  calendar,
}) {
  console.log(options, calendar)
}

【讨论】：

我知道我有点从挖掘他们的代码库中获得的知识，我对反应有点不熟悉，尽管我尝试了很多。您还有其他处理此自定义视图的技巧吗？例如，如何指定特定节点可以包含事件，并且我添加为事件的元素确实是事件？他们是否使用数据日期等属性来做到这一点？目前我通过手动添加鼠标事件监听器来模拟 dateclick 和 selection 事件来完成它。