How to add select input in fullCalendar header?

Question

I have created a react project using cra and using react-bootstrap.I have integrated full calendar to my app.The problem is i want to add select input to my fullCalendar header.As I have gone through the documentation there they have just shown how to add custom button to the header.I do not have any idea of how to add select input to the header.As you can see in the image right now the select input is above the calendar header I want it to bring in the header between the date title and today control button

Answer 1

I achieve this in FullCalendar v5 by calling a function from datesSet in which I insert my <select> - checking first that it isn't there already, as the event could be called multiple times e.g. on view change

/* in your FullCalendar setup... */
datesSet(dateInfo) { // v4 datesRender(info)
    AddMySelectToFullCalendar();            
}

/* and the function it calls ... */
function AddMySelectToFullCalendar() {
    if($("select[id=mySelect]").length < 1) {
        var selectHTML =
            "<select id=\"mySelect\">" +
                "<option value="1">Option One</option>" +
                "<option value="2">Option Two</option>" +
            "</select>";
            
        // depending on where on the bar you want it, use prependTo or appendTo, and alter the array number
        $(selectHTML).appendTo($(".fc-header-toolbar .fc-toolbar-chunk")[0]);
        
        $("#mySelect").on('change', function() {
            // some onchange function
        });
    }
}

Previously, in FullCalendar v3, the same thing worked, but the insert selector was slightly different, and called from eventAfterAllRender i.e.

eventAfterAllRender: function() {
    AddMySelectToFullCalendar();    
}

// different insertion selector in function
$(selectHTML).appendTo('#myFullCalendar .fc-left');

Answer 2

I have found a solution to the problem and implemented it and doing good.I am using React library and created project using cra So to implement the select to the header the way i found after searching a lot was to create our own custom header and add it to the calendar. For doing such I have first set the headerToolbar to false in Calendar component.So no header is shown and then we can add our custom header to the top before rendering the calendar component in our html and to bind the header I have created the ref to the calendar and passed it to the header. by using the ref object we can add functionality like prev next today headerTitle day, week and month view to our header.Header image

const CalendarHeader = ({calendarRef, employeeNames, employeeNameHandler, setisModalOpen}) => {
const [title, settitle] = useState(new moment().format("MMMM DD, YYYY"))

const nextHandle = () => {
    calendarRef.current._calendarApi.next()
    settitle(calendarRef.current._calendarApi.currentDataManager.data.viewTitle)
}
const prevHandle =() => {
    calendarRef.current._calendarApi.prev()
    settitle(calendarRef.current._calendarApi.currentDataManager.data.viewTitle)
}
const todayHandle = () => {
    calendarRef.current._calendarApi.today()
    settitle(calendarRef.current._calendarApi.currentDataManager.data.viewTitle)
}
const dayHandle = () => {
    calendarRef.current._calendarApi.changeView("resourceTimeGridDay")
    settitle(calendarRef.current._calendarApi.currentDataManager.data.viewTitle)
}
const weekHandle = () => {
    calendarRef.current._calendarApi.changeView("resourceTimeGridWeek")
    settitle(calendarRef.current._calendarApi.currentDataManager.data.viewTitle)
}
const monthHandle = () => {
    calendarRef.current._calendarApi.changeView("dayGridMonth")
    settitle(calendarRef.current._calendarApi.currentDataManager.data.viewTitle)
}
return (
    <div className='mb-3' style={{display: "flex",justifyContent: "space-between",alignItems: "center", width: "100%"}}>
        <ButtonGroup>
            <button className="btn-theme text-white f-12 wid-55" onClick={() => prevHandle()}>Prev</button>
            <button className="btn-theme text-white f-12 wid-55" onClick={() => todayHandle()}>Today</button>
            <button className="btn-theme text-white f-12 wid-55" onClick={() => nextHandle()}>Next</button>
        </ButtonGroup>
            
        
        <div className="fc-toolbar-chunk">
            <Form.Select size='sm' onChange={employeeNameHandler}>
                <option value="all">All</option>
                {
                    employeeNames.map((name, idx) =>
                        <option value={name} key={idx}>{name}</option>
                    )
                }
            </Form.Select>
        </div>
        <div>
            <h3 style={{align: "center"}} id="title">{title}</h3>
        </div>
        

        <div className="fc-toolbar-chunk">
        <ButtonGroup>
            <button className="btn-theme text-white f-12" onClick={() => setisModalOpen(true)}>Add Appointment</button>
        </ButtonGroup>
        
        </div>
        <ButtonGroup>
            <button className="btn-theme text-white f-12 wid-55" onClick={() => dayHandle()}>Day</button>
            <button className="btn-theme text-white f-12 wid-55" onClick={() => weekHandle()}>Week</button>
            <button className="btn-theme text-white f-12 wid-55" onClick={() => monthHandle()}>Month</button>
        </ButtonGroup>

    </div>
)

}

export default CalendarHeader