如何在全日历上立即显示所选事件的所有详细信息

Question

我有以下使用全日历的 html 页面：

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'timeGridWeek',
    editable: true,
    headerToolbar: {
      start: 'prev,next today',
      center: 'title',
      end: 'dayGridMonth,timeGridWeek,timeGridDay'
    },
    selectable: true, //can click to set event
    selectMirror: true, // so it's solid 
    unselectAuto: false, //if you click outside calendar, event doesn't disappear, but if you click inside calendar, event still disappears

    editable: true,
    eventStartEditable: true,
    eventResizableFromStart: true,
    eventDurationEditable: true,
    select: function(selectionInfo) {
      calendar.addEvent({
        title: 'dynamic event',
        start: selectionInfo.start,
        end: selectionInfo.end //need these and not endTime/startTime, otherwise they won't re-render
      });
    }



  });
  calendar.render();

});

<!DOCTYPE html>
<html>

<head>
  <title>Fullcalendar Demo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.5.0/main.min.css" />
  <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.5.0/main.min.js"></script>
</head>

<body>
  <div id="calendar"></div>
</body>

</html>

当日历处于周视图时，我在某处单击（只需单击一次，什么都不做 - 这很重要），将创建一个 30 分钟的事件（开始和结束时间取决于位置您单击），我可以看到事件的开始和结束时间，但看不到标题（“动态事件”）。只有当我点击日历上的其他地方时，我才能看到标题显示在上述事件上。我已经通过 console.log 语句（不在代码中）确认标题实际上存在于 javascript 事件 object 中，但是有没有办法让标题立即可见只需单击一下（所以可能需要在 select 函数中完成某些操作）?

Answer 1

您只需要运行 calendar.unselect(); 添加事件后，使可视化选择的元素（由于 selectMirror 选项是实心而不是透明的）就不会叠加在呈现的事件之上。

在您单击其他地方之前，不会自动清除选择（除非您在选项中有 unselectAuto: true）。

相关文档：

https://fullcalendar.io/docs/Calendar-unselect

https://fullcalendar.io/docs/unselectAuto

演示：

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'timeGridWeek',
    editable: true,
    headerToolbar: {
      start: 'prev,next today',
      center: 'title',
      end: 'dayGridMonth,timeGridWeek,timeGridDay'
    },
    selectable: true, //can click to set event
    selectMirror: true, // so it's solid 
    unselectAuto: false, //if you click outside calendar, event doesn't disappear, but if you click inside calendar, event still disappears

    editable: true,
    eventStartEditable: true,
    eventResizableFromStart: true,
    eventDurationEditable: true,
    select: function(selectionInfo) {
      calendar.addEvent({
        title: 'dynamic event',
        start: selectionInfo.start,
        end: selectionInfo.end //need these and not endTime/startTime, otherwise they won't re-render
      });
      calendar.unselect();
    }



  });
  calendar.render();

});

<!DOCTYPE html>
<html>

<head>
  <title>Fullcalendar Demo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.5.0/main.min.css" />
  <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.5.0/main.min.js"></script>
</head>

<body>
  <div id="calendar"></div>
</body>

</html>

如何在全日历上立即显示所选事件的所有详细信息

how to display all details of selected event immediately on fullcalendar

javascript

html

fullcalendar

fullcalendar-5