如何根据事件渲染Fullcalendar的moreLink

Question

有没有办法在“+2 more”链接出现时访问当天的活动？

我想做的是能够根据当天事件的某些属性以不同的方式呈现它，就像这样

我正在使用 ReactJS，到目前为止，使用带有函数的 moreLinkContent 属性仅提供有关 moreLink 本身的信息。

类似（简化）的东西：

moreLinkContent={(moreLinkContentArg) => {
  if (getEventTypeForFirstEventOfDay(moreLinkContentArg) === someType) {
  // render green '2 more +'
  }
  // etc
}}

（当天的事件意味着 moreLink 被渲染的那一天，不一定是今天。）

Answer 1

如果您或任何人正在寻找解决方案，我找到了！ （虽然有点粗略）

我没有使用

moreLinkContent

钩子，而是使用

moreLinkDidMount

钩子。 传递给此钩子的参数与其他钩子类似，只是您现在可以访问关联的 DOM 元素。

从那里您可以在 DOM 树中向上导航，找到在

<td>

属性中包含日期的

data-date

父级。

获得日期后，您可以获取日历的事件并根据该日期过滤它们。 现在，您可以访问所有日常活动的数据，并可以对它们执行任何您想要的操作。就我而言，我想用我的事件的颜色显示点。

到目前为止一切顺利，但现在如果你想渲染自定义元素，你将需要手动创建 DOM 元素并注入它们。

这就是我的代码的样子：

moreLinkDidMount: (o)=>{

    // Get the date from a parent
    const date = new Date(o.el.parentElement.parentElement.parentElement.parentElement.getAttribute('data-date'));
    
    //Get all the events from the calendar
    const calendarEvents = this.calendarRef.current.calendar.getEvents()

    // Filter the events to get only the events of this day
    const eventsThatDay = calendarEvents.filter((ev)=>{
        return ev._instance.range.start.getFullYear() === date.getFullYear() &&
        ev._instance.range.start.getMonth() === date.getMonth() &&
        ev._instance.range.start.getDate() === date.getDate();
    })

    // If there are events
    if(eventsThatDay.length > 0){

        // Create a new DOM element that will be used as a container for our custom "moreLink" element
        const div = document.createElement('div');
        div.setAttribute('class', classes.row);

        
        eventsThatDay.forEach((ev)=>{
            const dot = document.createElement('div');
            dot.setAttribute('class', classes.dot);
            dot.setAttribute('style', `background-color: ${ev._def.extendedProps.eventType.color}`)
            div.appendChild(dot);
        })

        //Add the custom element to the DOM
        o.el.append(div);
    }
},

结果如下：

我希望这有帮助！