在 fullcalendar v5 的“今天”按钮旁边的标题中显示单选按钮

Question

我正在尝试在全日历标题中添加单选输入，但在这种情况下，它会添加多个时间，我希望将其修复为仅 1 或 2 个单选按钮。 我用的是fullcalendar V5

这是我的代码，它添加了多个单选按钮，但不正确，我也想在“今天”按钮之后添加它。

var calendarEl = document.getElementById('kt_docs_fullcalendar_basic');
var calendar = new FullCalendar.Calendar(calendarEl, {
    headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
    },
    hiddenDays: [ 0, 6 ],
    height: 800,
    displayEventTime : false,
    eventDisplay: 'block',
    contentHeight: 780,
    events: getCalendarData(1),
    eventDidMount: function(info) {
        var radioButton = document.createElement('input');
        radioButton.type = 'radio';
        radioButton.name = 'show_carrier_dates';
        radioButton.value = '1'; // Set your radio button value
        radioButton.id = 'show_carrier_dates_id'; // Set a unique ID for the radio button

        // Create a label element for the radio button
        var label = document.createElement('label');
        label.htmlFor = 'show_carrier_dates_id'; // Set the label's for attribute to the radio button's ID
        label.textContent = 'Show Carrier Pickup Dates'; // Set the label text

        // Append the radio button and label to the header toolbar
        var toolbar = calendarEl.querySelector('.fc-toolbar-chunk');
        toolbar.appendChild(radioButton);
        toolbar.appendChild(label);

        // Optionally add event listeners for the radio button
        radioButton.addEventListener('change', function() {
            // Handle the change event
        });
    },
});

calendar.render();

描述

我正在尝试在不同的单选按钮上加载不同的事件， 我在 FullCalendar 上有 2 组活动，可满足 2 种不同类型的需求。

加载时，我想要显示第一组事件以默认显示，并检查第一个无线电，当用户单击第二个无线电时，我必须获取不同的事件集并将其显示给用户。

所以总的来说，我有 2 组事件，在每个单选按钮上单击我需要在日历上显示相关事件。

Answer 1

听起来您想制作一组单选按钮以允许用户在两个不同的事件源之间进行选择（或者可能选择不同的参数来过滤单个事件源 - 目前尚不清楚是哪个）。

如果是这样，您就完全走错了方向

eventDidMount

- 该函数会针对添加到日历中的每个事件运行。您不希望每个事件都有一个单选按钮，您只希望选项能够在两种不同类型的事件之间进行选择。

您只需在日历呈现后创建单选按钮，并将它们附加到工具栏即可。然后使用它们来控制哪些事件在日历中可见。

这是一个例子：

//static data source example, just for a demo
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();

var sources = [
  {
    id: 1,
    events: [
      {
        title: "Sales Meeting",
        start: new Date(y, m, 2, 10, 30),
        end: new Date(y, m, 2, 11, 30),
        allDay: false
      },
      {
        title: "Marketing Meeting",
        start: new Date(y, m, 3, 11, 30),
        end: new Date(y, m, 3, 12, 30),
        allDay: false
      },
      {
        title: "Production Meeting",
        start: new Date(y, m, 4, 15, 30),
        end: new Date(y, m, 4, 16, 30),
        allDay: false
      }
    ]
  },
  {
    id: 2,
    events: [
      {
        title: "HR Meeting",
        start: new Date(y, m, 5, 08, 30),
        end: new Date(y, m, 5, 10, 30),
        allDay: false
      },
      {
        title: "Finance Meeting",
        start: new Date(y, m, 1, 13, 00),
        end: new Date(y, m, 1, 15, 30),
        allDay: false
      },
      {
        title: "Conference",
        start: new Date(y, m, 6),
        end: new Date(y, m, 8),
        allDay: true
      }
    ]
  }
];

document.addEventListener("DOMContentLoaded", function () {
  var calendarEl = document.getElementById("calendar");
  var calendar = new FullCalendar.Calendar(calendarEl, {
    nowIndicator: true,
    headerToolbar: {
      left: "prev,next today",
      center: "title",
      right: "dayGridMonth,timeGridWeek,timeGridDay,listMonth"
    },
    initialView: "dayGridMonth",
    eventSources: sources[0]
  });

  calendar.render();

  var radios = `<label for="ev1">
<input type="radio" id="ev1" class="chooseEventSource" name="chooseEventSource" value="1" checked/>Event Source 1
</label>
<label for="ev2">
<input type="radio" id="ev2" class="chooseEventSource" name="chooseEventSource" value="2"/>Event Source 2
</label>`;
  
  // Append the radio button and label to the header toolbar
  var toolbar = calendarEl.querySelector('.fc-toolbar-chunk');
  toolbar.innerHTML += radios;

  //listen for the radio buttons being changed
  document.querySelectorAll(".chooseEventSource").forEach(function (el) {
    el.addEventListener("click", function () {
      calendar.getEventSources().forEach(function (source) {
        source.remove();
      });
      calendar.addEventSource(sources[this.value - 1]);
  calendar.render();
    });
  });
});

现场演示：https://codepen.io/ADyson82/pen/rNbdENe