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