1

我需要显示 3 个事件并将它们彼此相邻放置。假设同时有 3 个事件。实际上，它们以 33% 的相同宽度出现。我正在使用 extendedProps 在渲染钩子中应用不同的 CSS 样式（例如，不同的背景颜色）。我禁用了 slotEventOverlap。

有没有办法将第一个事件的宽度（在第一列中）更改为例如 10%，其余两个更改为 90%/2 = 45%？

我正在使用 Fullcaleder v5，并且我已经尝试在 eventDidMount 钩子中更改 CSS left 和 right 属性。

更新 1： 我正在使用 timeGridWeek 视图。我正在从 3 个不同的数据源加载事件。源 1 的事件将具有类型：“TypeA”，源 2 的事件将具有“TypeB”等。对于每一天，我都有 3 种不同类型的事件，我将按照 TypeA 的事件显示在一天的左栏，中间是TypeB的Events，右侧是TypeC的events：

在此处输入图像描述

我试图实现的是修改第一列中事件的宽度（显示TypeA事件的那个，在这种情况下它只是一个没有任何标题/文本的栏）：

在此处输入图像描述

我试图更新通过 eventDidMount 函数传递的元素中元素的父节点的左属性和右属性（因为我注意到左/右属性是从 0 开始同时发生 3 个事件的情况。 .33%、33%..66% 和 66%..100%）。因此，在加载事件后，我计算每一天和事件的左右属性（对于每一天：给我 TypeA 的事件，计算左右，给我 TypeB 的事件，计算左右等）

在 eventDidMount 函数中，我尝试应用这些左右值：

  eventDidMount: function (arg) {
    // make the first colum less width
    var type = arg.event.extendedProps.type;
    if (type === 'TypeA') {
      var node = arg.el.parentElement;

      // left,right will have a percentage value computed before, e.g. 0% and 10%
      var left = arg.event.extendedProps.force_left;
      var right = arg.event.extendedProps.force_right;
      node.style.setProperty("left", left);
      node.style.setProperty("right", right);
    }
  }

更新 2： 禁用 eventOverlap 的原因是因为它在有很多事件时看起来更好。

我在 CodeSandbox 上设置了一个示例，它显示了 3 种类型的事件（3 个数据源/存储在数据库中）。我有以下情况：

TypeB 事件是计划中的事件，TypeC 事件是某人将预订的实际时间，TypeA 是一种开始和结束摘要（例如签入、签出）。现在我正在尝试将 TypeA 事件呈现为细条（标题和时间并不重要），而其他事件则更宽。我可以更改宽度，但事件/列的空间保留为 33%。而且它不应该是一个全局设置，因为有些日子没有 TypeA 的事件（那时只有 TypeB 或 TypeC）。

任何帮助表示赞赏：

https://codesandbox.io/s/amazing-maxwell-g2kuu?file=/src/CalendarDemo.js

4

0 回答 0