当一个很长的活动增加标题时,满历js每周都会出现.这是一种让标题只出现一次的方法吗?我在v5和v6上试了一下代码,标题每周都会出现.

<!DOCTYPE html>
<html lang='en'>
<!-- https://fullcalendar.io/docs/initialize-globals-->
<head>
<meta charset='utf-8' />
<script src='https://cdn.jsdelivr.net/npm/@fullcalendar/core@6.1.10/index.global.min.js'> 
</script>
<script src='https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@6.1.10/index.global.min.js'></script>
<script>

  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
      initialView: 'dayGridMonth',
      events: [
            {
                title: 'Testing 1 the quick brown fox jumps over the lazy dog.',
                start: '2024-01-02',
                end: '2024-02-03',
                color: 'green'
            }
        ],
    });
    calendar.render();
  });

</script>
</head>
<body>
   <div id='calendar'></div>
</body>
</html>

Here is what it look like when render the page at the browser enter image description here

推荐答案

我从来没有用过这个库,我不太了解,但我发现有一个名为eventContent的事件,它每添加一行就运行一次.而且他总是使用相同的物体.所以我创建了一个跳过第一个元素的列表,下一次它标识相同的对象而不是播放标题时,它会创建一个空元素.

这解决了您的示例中的问题,但在包含更多信息的真实环境中很好地测试了它,我强调这肯定是最糟糕的方法哈哈.

Content Injection - Docs | FullCalendar

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var ignoreFirstList = [];
  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    events: [
          {
              title: 'Testing 1 the quick brown fox jumps over the lazy dog.',
              start: '2024-01-02',
              end: '2024-02-03',
              color: 'green'
          }
      ],
      eventContent: function (arg) {
          var obj = arg.event._def

          if (!ignoreFirstList.includes(obj)) {
              ignoreFirstList.push(obj)
              return true
          }

          // create empty span (but with height > 0)
          var span = document.createElement("span")
          span.textContent = obj.title[0] || "W"
          span.style.opacity = 0
          span.style.userSelect = "none"

          var arrayOfDomNodes = [span]
          return { domNodes: arrayOfDomNodes }
      },
  });
  calendar.render();
});
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/core@6.1.10/index.global.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@6.1.10/index.global.min.js"></script>
<div id='calendar'></div>

Jquery相关问答推荐

无法通过单击从元素获取数据

如何用 jQuery / AJAX 替换表格的行

5 秒后关闭 jQuery 弹出模式

Sheets从多张sheet中导入range匹配数据

如何在jQuery中移动表格行?

jQuery 上传进度和 AJAX 文件上传

jQuery:使用变量作为 Select 器

jQuery - 向下滚动时缩小的粘性标题

JavaScript 吸管(告诉鼠标光标下像素的 colored颜色 )

如何使用 jQuery UI Resizable 仅水平或垂直调整大小?

jquery变量语法

jQuery:获取父母,父母ID?

循环判断复选框并计算每个选中或未选中的复选框

输入元素上的 Javascript 更改事件仅在失go 焦点时触发

使用 jQuery 获取 div 的可见高度

jQuery 追加淡入

通过 :not 在 jQuery Select 器中隐藏除 $(this) 之外的所有内容

我可以通过 JavaScript 禁用 CSS :hover 效果吗?

你会如何比较 jQuery 对象?

Twitter Bootstrap 中的树