change full calendar's button position

Question

I have a requirement where fullcalendar jquery plugin should be used. But I need to customize it. Like, I need to change the position of buttons of (day/month/week)view to the extreme left of the screen. When I tried to modify the fullcalendar.js I could see that it could move only to the right/left of the calendar. Not beyond that. I need to have those buttons in the left as in the sidebar of a page. Is it possible?? Or is there any other options for it??

I imagine that one way to go would be to create the buttons on my own and wire them into the Fullcalendar widget. But I'm not a jquery pro, and I'd prefer to try something simpler. Thanks.

Answer 1

A simple and quick solution is to leave the plugin JS alone, and simply hide the built in buttons and add your own where you want them.

In your click handler for your buttons you trigger a click on the plugin button associated. It is as simple as inspecting the class of each button in browser console html view and adding to the code I started

Example

/* quick hide with script for a test, best done with css */
$('.fc-header-right').hide();

$('#myWeekViewButton').click(function(){
    $('.fc-button-agendaWeek').click();
});

This tests well in browser console on demo site

Answer 2

First, you can remove the day/month/week buttons from the header definition of your FullCalendar init. Next, you can use a function similar to the following to wire your custom buttons to do the view-switching operations:

function switchView(viewName) {
  $('#calendar').fullCalendar('changeView', viewName);
}

Let me know if this helps!

Answer 3

You can use de presets for headerToolbar

var calendar = new FullCalendar.Calendar(calendarEl, {
        headerToolbar: {
            center: 'dayGridMonth,timeGridFourDay'
        },.....

https://fullcalendar.io/docs/custom-view-with-settings