如何在 fullcalendar v5 中為每個事件添加一個按鈕？我正在使用 listWeek 視圖

Question

（該按鈕是我通過檢查元素編輯的）我一直在嘗試通過使用 eventRender 來實現它，但沒有任何運氣。

<!DOCTYPE html>
<html>
 <head>
  <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/main.min.js"></script> </script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/main.min.css"></script>
 </head>
 <body>
  <div id="calendar"></div>
  <script>
    let calendarEl = document.getElementById('calendar');
    let calendar = new FullCalendar.Calendar(calendarEl, {
      initialView: 'listDay',
      views: {
      listDay: {
        type:'listWeek',
        dayCount:1
        }
      },
      events : [
        {% for appointment in appointments %}
        {
          title : '{{ appointment[2] }}',
          start : '{{ appointment[1] }}',
        },
        {% endfor %}
      ],
      eventRender: function(info) {
      info.el.innerHTML += "<button class='dayButton' data-date='" + info.start + "'>Click me</button>";
      info.el.style.padding = "20px 0 0 10px";
      }
    });
    calendar.render();
  </script>
 </body>
</html>

Answer 1

最后我通過這樣做解決了：

  eventContent: function (args, createElement)
  {
    const text = args.event._def.title + '<button onclick="alert(\'hello\')" style="float: right"> ciao </button>';
    return {
    html: text
  };
},

如何在 fullcalendar v5 中為每個事件添加一個按鈕？我正在使用 listWeek 視圖

問題描述

1 個解決方案

解決方案1
1 2022-06-14 08:10:05

如何在 fullcalendar v5 中為每個事件添加一個按鈕？ 我正在使用 listWeek 視圖

問題描述

1 個解決方案

解決方案1 1 2022-06-14 08:10:05

如何在 fullcalendar v5 中為每個事件添加一個按鈕？我正在使用 listWeek 視圖

解決方案1
1 2022-06-14 08:10:05