How to rearrange the buttons in the header in a full calendar

Question

I have used FullCalendar to generate some events. I want to rearrange the buttons in the header.

For example, month, week and day buttons should display in first row. The title should be placed between the prev and next button. How to achieve this?

Thanks in advance.

$('#calendar').fullCalendar({
    header: {
        left: 'prev',
        center: 'title',
        right : 'next'
    },
    titleFormat: {
        month: 'MMMM yyyy',
        week: 'MMMM yyyy',
        day: 'MMMM yyyy'                   
    },
    contentHeight: 300,
    height: 200 ,
    eventRender: function(event, element) {
        element.popover({
            title: event.title1,
            placement: 'auto',
            html: true,
            trigger: 'click',
            animation:'true',
            content: event.msg,
            container: 'body'
        });

        $('body').on('click', function(e) {
            if (!element.is(e.target) && element.has(e.target).length === 0 && $('.popover').has(e.target).length === 0)
                element.popover('hide');
        });
    },
    events: eventData 
});

Solution 1

There are no available methods in FullCalendar that provide what you need.

You can, however, add that manually. In the following code, I've added the functions addButtons and bindButtonActions that are called after the FullCalendar has initialized. The first function creates the DOM needed for the buttons and appends the generated content to the FullCalendar header.

The second method binds the click action to the buttons (that is, when you click on Week, there will be a call to the changeView method).

The other option is to change FullCalendar's source code but I disagree with this option because it will be more difficult to update the plugin.

Here is a working jsfiddle and the code.

<div id="calendar"></div>
<script>
    $(document).ready(function() {
        $('#calendar').fullCalendar({
            header: {
                left: 'prev',
                center: 'title',
                right : 'next'
            },
            titleFormat: {
                month: 'MMMM YYYY',
                week: 'MMMM YYYY',
                day: 'MMMM YYYY'
            },
            contentHeight: 300,
            height: 200,
            eventRender: function(event, element) {
                element.popover({
                    title: event.title1,
                    placement: 'auto',
                    html: true,
                    trigger: 'click',
                    animation:'true',
                    content: event.msg,
                    container: 'body'
                });

                $('body').on('click', function(e) {
                    if (!element.is(e.target) && element.has(e.target).length === 0 && $('.popover').has(e.target).length === 0)
                        element.popover('hide');
                });
            }
        });

        addButtons();

        bindButtonActions();

        function addButtons() {
            // create buttons
            var month = $("<span/>")
                .addClass("fc-button fc-button-month fc-state-default fc-corner-left fc-state-active")
                .attr({
                    unselectable: "on"
                })
                .text("moth");

            var week = $("<span/>")
                .addClass("fc-button fc-button-agendaWeek fc-state-default")
                .attr({
                    unselectable: "on"
                })
                .text("week");

            var day = $("<span/>")
                .addClass("fc-button fc-button-agendaDay fc-state-default fc-corner-right")
                .attr({
                    unselectable: "on"
                })
                .text("day");

            // create tr with buttons.
            // Please note, if you want the buttons to be placed at the center or right,
            // you will have to append more <td> elements
            var tr = $("<tr/>").append(
                $("<td/>")
                    .addClass("fc-header-left")
                    .append(month)
                    .append(week)
                    .append(day)
            );

            // insert row before title.
            $(".fc-header").find("tr:first").before(tr);
        }

        function bindButtonActions(){
            var date = new Date();
            // bind actions to buttons
            $(".fc-button-month, .fc-button-agendaWeek, .fc-button-agendaDay").on('click', function() {
                var view = "month";
                if ($(this).hasClass("fc-button-agendaWeek")) {
                    view = "agendaWeek";
                } else if ($(this).hasClass("fc-button-agendaDay")) {
                    view = "agendaDay";
                }

                $('#calendar').fullCalendar('changeView', view);
            });
        }
    });
</script>

Solution 2

Using fullcalendar 2.0.3

In initialisation of full calendar you can put

 header: {
        left: 'prev,title,next today',
        center: '',
        right: 'month,agendaWeek,agendaDay'
      },

In full calendar.js inside render()

function render() {
        tm = options.theme ? 'ui' : 'fc';
        var sections = options.header;
        if (sections) {
            element = $("<table class='fc-header' style='width:100%'/>")
               .append($("<tr/>").append(renderSection('right')))
                .append(
                    $("<tr/>")
                        .append(renderSection('left'))
                ).append(renderSection('center')
                );
            return element;
        }
    }

You can customise the table creation as you want it.

But as @milz said, editing code might break your changes in the next release of full calendar.

Solution 3

For anyone else stumbling on this question, in v2.4.0 custom buttons were added to fullcalendar:

https://fullcalendar.io/docs/display/customButtons/

$('#calendar').fullCalendar({
    customButtons: {
        myCustomButton: {
            text: 'custom!',
            click: function() {
                alert('clicked the custom button!');
            }
        }
    },
    header: {
        left: 'prev,next today myCustomButton',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    }
});

Comments

[Rohith Nair]

edit fullcalendar.js renderSection(position) is the place where you can edit

[arjun]

@RohithNair can you give me an example ? perhaps a fiddle ?

[arjun]

@RohithNair you there ?? can you show me an example ?

[arjun]

well thanks for answering ! I have tried your code in my full code the calendar displays only prev and next buttons. There is no month week day options...

[Luís Cruz]

Have you seen the fiddle? Please guarantee that your javascript code matches the code you see in the fiddle. If your problem continues, please update your code to the latest version.

[arjun]

Is there any possible way to add events in a client side. I mean for example , if a user clicks particular date it should show a small popup for users to enter the event details and its descriptions. Also After Entering the details it should save the event which mean the newly added event should displayed for all future users. Is there any possible ways to do like that ??

[arjun]

Is there any possible way to add events in a client side. I mean for example , if a user clicks particular date it should show a small popup for users to enter the event details and its descriptions. Also After Entering the details it should save the event which mean the newly added event should displayed for all future users. Is there any possible ways to do like that ??

[Rohith Nair]

I think you should separate this to new question and detail the steps you tried

[arjun]

I have already posted. But didn't find options. I have added fiddle here stackoverflow.com/questions/25304626/…

[arjun]

The Question is here stackoverflow.com/questions/25304626/… but didn't found much responses .

[Rohith Nair]

I have added some comments, which I hope will be helpful

[Giridharan]

how to reduce the size of button?

[danbrellis]

@giridharan that can be done with CSS. use class .fc-button or whatever specific selector you need to adjust the padding, font-size or height.