Show radio button in header next to Today Button of fullcalendar v5

Question

I am trying to add radio inputs in the fullcalendar header, but in this case it was getting add mutiple time, i want that to be fixed like only 1 or 2 radio buttons. I am using V5 of fullcalendar

here is my code which adding multiple radio but not correctely, also i want to add this after "Today" button.

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();

Description

I am trying to load different events on different radio button, I have 2 set of event for 2 different type of need on FullCalendar.

On load i wnat to show the 1st set of event to show as default and 1st radio to checked, and when user click on second radio then i have to get the different set of event and show them to the user.

So Overalll i have 2 Set of Events, On Each radio button click i needed to show there related event on the calendar.

Answer 1

It sounds like you want to make a set of radio buttons to allow the user to choose between two different event sources (or possibly to choose a different parameter to filter a single event source - it isn't clear which).

If so you're on completely the wrong track with eventDidMount - that function runs for every event which is added to the calendar. You don't want a radio button for every event, you only want the options to be able to choose between your two different types of events.

You simply need to create the radio buttons after the calendar has rendered, and append them to the toolbar. Then use those to control which events are visible in the calendar.

Here's an example:

//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();
    });
  });
});

Live demo: https://codepen.io/ADyson82/pen/rNbdENe