如何使用 Fullcalendar.io 添加事件描述？

Question

我目前正在使用 Flask 创建一个应用程序，并且我有一个带有 fullcalendar.io 的日历页面，一切都很顺利，直到我尝试向我的事件添加描述。

我尝试过遵循此代码

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    initialDate: '2024-03-12',

    eventDidMount: function(info) {
      var tooltip = new Tooltip(info.el, {
        title: info.event.extendedProps.description,
        placement: 'top',
        trigger: 'hover',
        container: 'body'
      });
    },

    events: [
      {
        title: 'All Day Event',
        description: 'description for All Day Event',
        start: '2024-03-01'
      },
      {
        title: 'Long Event',
        description: 'description for Long Event',
        start: '2024-03-07',
        end: '2024-03-10'
      },
      {
        groupId: '999',
        title: 'Repeating Event',
        description: 'description for Repeating Event',
        start: '2024-03-09T16:00:00'
      },
      {
        groupId: '999',
        title: 'Repeating Event',
        description: 'description for Repeating Event',
        start: '2024-03-16T16:00:00'
      },
      {
        title: 'Conference',
        description: 'description for Conference',
        start: '2024-03-11',
        end: '2024-03-13'
      },
      {
        title: 'Meeting',
        description: 'description for Meeting',
        start: '2024-03-12T10:30:00',
        end: '2024-03-12T12:30:00'
      },
      {
        title: 'Lunch',
        description: 'description for Lunch',
        start: '2024-03-12T12:00:00'
      },
      {
        title: 'Meeting',
        description: 'description for Meeting',
        start: '2024-03-12T14:30:00'
      },
      {
        title: 'Birthday Party',
        description: 'description for Birthday Party',
        start: '2024-03-13T07:00:00'
      },
      {
        title: 'Click for Google',
        description: 'description for Click for Google',
        url: 'https://google.com/',
        start: '2024-03-28'
      }
    ]
  });

  calendar.render();
});

这里写的https://fullcalendar.io/docs/v4/eventRender和这里stackoverflow问题，但它们都不起作用。

这是我在 html 上编写的代码，是我添加上面代码之前的代码：

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        
      events: [
        {% for event in events %}
        {
          title : "{{ event.title }}",
          start : "{{ event.event_date }}",
          end : "{{ event.event_end }}",
          url: "{{url_for('post', id=event.id)}}"
        },
        {% endfor %}     
        {% for e in otherevents %}
        {
          title : "{{ e.title }}",
          start : "{{ e.start_date }}",
          end : "{{ e.end_date }}",
          color: '#CF9AE8'
        },
        {% endfor %}   
      ],
      eventColor: '#6574C4',
    },

    {
      initialView: 'dayGridMonth'
    }
          );
    calendar.render();
  });
</script>

有人知道我应该做什么吗？预先感谢您！

Answer 1

您可以使用

eventContent

定义内容在事件块内的显示方式。

描述将在

arg.event.extendedProps.description

。

改编自内容注入文档的示例：

eventContent: function(arg) {
  let italicEl = document.createElement('i');
  italicEl.innerHTML = arg.event.extendedProps.description;

  let arrayOfDomNodes = [ italicEl ]
  return { domNodes: arrayOfDomNodes }
}