Fullcalendar: Custom buttons or elements in header

[arshaw]

Originally reported on Google Code with ID 225

Hi,

First of let me say, I love this plugin. I think it's amazing!

I was wondering if there was a way to add a custom button to the header
view? I would like to be able to add a button labeled: Add Event that would
open a new event dialog.

Is this possible?

Thanks.

Reported by raffik on 2009-12-04 04:17:33

Imported with 27 stars

[arshaw]

im going to make v1.5 mostly about better developer hooks, so developers can make
full-fledged add-ons. this will be one of the hooks (custom buttons).

however, dialogs will probably be a little while after that

thanks for the suggestions

Reported by adamrshaw on 2009-12-04 05:35:42

• Status changed: Accepted
• Labels added: Type-Enhancement
• Labels removed: Type-Defect

[arshaw]

I used this for now:

$('span:contains(Today)').parents ('td).after ('<td style="padding-left:20px"><div
class="fc-state-default fc-corner-left fc-corner-right"><a id="datepicker-link"
href="#" onclick="return false"><span>Picker</span></a></td>');

Reported by joern.heid on 2010-01-11 17:09:09

[arshaw]

I made a script to add a datapicker button on fullcalendar header ;)
I didn't test the script but it should work fine.

It requires Jquery UI libraries downloadable from http://jqueryui.com/

Reported by bibendus1983 on 2010-02-02 11:31:17

---

• _Attachment: DataPicker on Fullcalendar.htm_

[arshaw]

Hi,

After spending some time, I worked this out. Here is my code which works like a charm.

<style type="text/css">
        /* the 'fix' for the datepicker when using jquery layout */
        #ui-datepicker-div { z-index: 5; }
</style>

<script type='text/javascript'>

    $(document).ready(function() {

        InitializeCalendar();

        var custom_buttons = '<td style="padding-left:10px">' +
                                    '<div class="fc-button-next ui-state-default
ui-corner-left ui-corner-right">' +
                                        '<span>' +
                                            '<input type="hidden" id="date_picker"
value="" />' +
                                            '<img
src="<%=AppHelper.ImageUrl("calendarIcon.JPG")%>" id="datePickerImage" />' +
                                        '</span>' +
                                    '</div>' +
                                '</td>';
        $('.fc-header-title').parent('td').after(custom_buttons);


        $("#date_picker").datepicker({
            dateFormat: 'dd-mm-yy',
            changeMonth: true,
            changeYear: true,
            onSelect: function(dateText, inst) {
                var d = $("#date_picker").datepicker("getDate");
                $('#calendar').fullCalendar('gotoDate', d);
            }
        });

        $('#datePickerImage').mouseover(function() {
            $('#date_picker').datepicker('show');
        });

        $('#datePickerImage').mouseout(function() {
            $('#date_picker').datepicker('hide');
        });



    });

    function InitializeCalendar()
    {
        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();


        $('#calendar').fullCalendar
        ({
            theme: true,
            height: 650,
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            editable: true,
            events: "/Home/GetCalendarEvents/",
            draggable: false,
            eventClick: function(calEvent, jsEvent) {
                return false;
            },
            eventRender: function(calEvent, element) {

                $.fn.qtip.styles.themeroller = {
                    background: null,
                    color: null,
                    tip: {
                        corner: true,
                        background: null
                    },
                    border: {
                        width: 0,
                        radius: 3
                    },
                    title: {
                        'background': null,
                        'fontWeight': null
                    },
                    classes: {
                        tooltip: 'ui-widget',
                        tip: 'ui-widget',
                        title: 'ui-widget-header',
                        content: 'ui-widget-content'
                    }
                };

                var eventDate = calEvent.start;

                $(element).qtip({
                    content: {
                    url: '/Home/CalendarEventDetails?date=' +
$.fullCalendar.formatDate(eventDate, 'MM dd yyyy'),
                        method: 'get',
                        title: { text: $.fullCalendar.formatDate(eventDate, 'dddd,
d
MMM yyyy') }
                    },
                    position: {
                        corner: {
                            target: 'bottomLeft',
                            tooltip: 'topLeft'
                        }
                    },
                    style: {
                        background: calEvent.color,
                        border:
                        {
                            color: calEvent.color
                        },
                        name: 'light',
                        tip: true,
                        width: 500

                    }

                });
            }

        });
    }

</script>

<div id='calendar'></div>

Hope this helps others looking for same.

Thanks & Regards,
Sowjanya V

Reported by sowji250 on 2010-02-25 00:29:22

---

• _Attachment: fullcalendar_datepicker.JPG_
• _Attachment: fullcalendar_datepicker_triggered.JPG_

[arshaw]

Issue 615 has been merged into this issue.

Reported by adamrshaw on 2010-02-26 09:11:18

[arshaw]

Issue 698 has been merged into this issue.

Reported by adamrshaw on 2010-04-27 05:33:09

[arshaw]

Reported by adamrshaw on 2010-04-27 05:33:55

[arshaw]

Sowjanya V,

can you please explain to me how you got this datepicker to work. i don't know if im

putting your code in the right place. its not loading.

any help would be greatly appreciated.
thanks in advance

lara

Reported by larachan on 2010-05-06 18:16:05

[arshaw]

+1 for this issue :)

Meanwhile, I used joern.heid solutions which seems to have worked - with a couple of

tweaks:

$('span:contains(today)').parents('td').filter(':first').before('<td style="padding-
left:20px"><div class="fc-state-default fc-corner-left fc-corner-right"><a 
id="datepicker-link" href="#"><span>Add Event</span></a></td>');

Today had the wrong case, also, it was inserting two buttons. SO just filtered by the

first element, so it only placed one button instead of 2. 

Reported by tr3nton on 2010-05-12 13:23:53

[arshaw]

Issue 761 has been merged into this issue.

Reported by adamrshaw on 2010-05-31 18:34:43

[arshaw]

Please tell me what are the plugin files required for adding datepicker into 
fullcalendar

Reported by nsbinesh on 2010-06-04 03:28:10

[arshaw]

For jQuery-UI > 1.8 you need to specify position as well as z-index in CSS. And it needs
to be specified for the input field as datepicker retrieves the value from here. For
example:
#date_picker {
    position: relative;
    z-index: 5;
}

Reported by asmund.herikstad on 2010-06-24 15:02:59

[arshaw]

I made a script to add a datapicker inline on fullcalendar month change and year change
on header or side( make your  won design).
Myself its works fine Please test yourself

Reported by skanand3 on 2010-09-09 13:02:48

---

• _Attachment: DataPicker on Fullcalendar month year change.html_

[arshaw]

If you are using JQuery UI (option "theme: true"), may be you are interested on this
function:

function addCalButton(where, text, id) {
    var my_button = '<span class="fc-header-space"></span>' +
                    '<span id="' + id + '" class="cal-button">' + text +'</span>';
    $("td.fc-header-" + where).append(my_button);
    $("#" + id).button();
}

You have to call like this:

addCalButton("left", "Hello", "my_button");

And then you have added a fully customized button that fits with your current UI theme.
You also may append events like this:

$("#my_button").click(function () { alert("hello world")});

To fit perfectly on my theme design I usually have to use this CSS:

.cal-button {
    height: 30px;
}

.cal-button span {
    position: relative;
    top: -3px;
}

Reported by ivan.gadea on 2011-09-08 11:39:39

[arshaw]

I had the same need, but instead of creating a function that modify the rendered code,
I decided to modify the fullCalendar and add the functionality to create the custom
buttons. I hope it can be incorporate in the code so others can benefit. It was as
easy as adding an else statement to the code.

In the declaration of the object, you can now add custom function like this: 
           right: 'month,agendaWeek,agendaDay {legend:toggleCalendarLegend}'
The "name" part refers to the name of the "buttonText" you want as a label (you also
have to add the buttonText label)
The "value" part is the name of a function in the code. Unfortunately anonymous functions
cannot be used here.

(Tested on Firefox and Internet Explorer 7 only)

On line 735+ I changed this:

var buttonClick;
if (calendar[buttonName]) {
    buttonClick = calendar[buttonName]; // calendar method
}
else if (fcViews[buttonName]) {
    buttonClick = function() {
        button.removeClass(tm + '-state-hover'); // forget why
        calendar.changeView(buttonName);
    };
}
if (buttonClick) {



to this:

var buttonClick;
if (calendar[buttonName]) {
    buttonClick = calendar[buttonName]; // calendar method
}
else if (fcViews[buttonName]) {
    buttonClick = function() {
        button.removeClass(tm + '-state-hover'); // forget why
        calendar.changeView(buttonName);
    };
}
else if(match = buttonName.match(/^{(\w+):(.+)}$/)) {
    if(typeof(window[match[2]]) == "function") {
        buttonClick = window[match[2]];
        buttonName = match[1];
    }
}
if (buttonClick) {

Reported by dupras.francois on 2012-08-31 15:04:29

[arshaw]

The solution specified by @drupas (comment 17) works great. Wish this gets included
into the main library with toggle button support.

Reported by brsanthu on 2012-12-20 21:42:38

[arshaw]

Good solution from dupras, I can get buttons to work however I can't set the text (only
shows undefined)  Any clue what I need to do to define the button text?

Reported by adam.westall on 2013-01-29 17:19:39

[arshaw]

Dupras' soltuion works great, however, I had to add an extra line to get the proper
label for the button.

Before:
else if(match = buttonName.match(/^{(\w+):(.+)}$/)){
    if(typeof(window[match[2]]) == "function") {
        buttonClick = window[match[2]];
        buttonName = match[1];
    }
}

After:
else if(match = buttonName.match(/^{(\w+):(.+)}$/)) {
    if(typeof(window[match[2]]) == "function") {
        buttonClick = window[match[2]];
        buttonName = match[1];
        options.buttonText[match[1]] = match[1].replace('_', ' ');
    }
}

The replace part is there for to replace underscore with space (could be omitted).

Reported by berenyi.attila on 2013-03-14 10:37:10

[arshaw]

I am testing Durpas solution on 1.6.1 Its not working because line 731 is having space
split 

$.each(buttonStr.split(' ') ...

how to overcome and add a button with minimum changes

Reported by kongaraju on 2013-06-27 07:30:07

[arshaw]

Dupras' solution is great and Berenyi's fix is just what I needed.  I created a toggle
button (who's function just toggles basic view on/off for week or day views) with these
changes and I wanted to give an example of what I used for toggle support.  I'm very
new at programming, but I hope it helps!

You can select the button's class names with:

var customButton = "Button_Name";
$(".fc-button-" + customButton)[0].className; //A string

And by knowing the possible toggle'd states:
fc-state-active
fc-state-disabled

You can check for a button state:

var className = $(".fc-button-" + customButton)[0].className; //Saves class names

if (className.match(/(?:^|\s)fc-state-active(?!\S)/)) //Check if it's there

or

if (!className.match(/(?:^|\s)fc-state-active(?!\S)/)) //Check if it's not there

and then add/remove it with:

$(".fc-button-" + customButton)[0].className += " fc-state-active"; //Adds

$(".fc-button-" + customButton)[0].className = className.replace(/(?:^|\s)fc-state-active(?!\S)/g,
''); //Removes


So for example, if you want to disable the button when month view is selected, then
in the initialization of the calendar under viewDisplay I wrote this:

viewDisplay: function(view) {
    var customButton = "Button_Name";
    var className = $(".fc-button-" + customButton)[0].className;
    if (view.name == "month") {
        //Disable custom button
        if (className.match(/(?:^|\s)fc-state-active(?!\S)/)) {
            $(".fc-button-" + customButton)[0].className = className.replace(/(?:^|\s)fc-state-active(?!\S)/g,
'');
            $(".fc-button-" + customButton)[0].className += " fc-state-disabled";
        }
        else if (!className.match(/(?:^|\s)fc-state-disabled(?!\S)/)) {
            $(".fc-button-" + customButton)[0].className += " fc-state-disabled";
        }
    }
}

Reported by carver084 on 2013-07-03 19:40:51

[arshaw]

I figured I would chime in here as I needed to add some custom buttons to the calendar
header. (Note this works in version 1.6.1 of FullCalendar, not sure what changes have
been made to older versions)

Like dupras solution above, you need to add a few lines to fullcalendar.js.

Starting with line 744 you should see:

var buttonClick;
if (calendar[buttonName]) {
  buttonClick = calendar[buttonName]; // calendar method
}
else if (fcViews[buttonName]) {
  buttonClick = function() {
    button.removeClass(tm + '-state-hover'); // forget why
    calendar.changeView(buttonName);
  };
}

Below that you should add:

else if (options.customButtons[buttonName]) {
  if (typeof options.customButtons[buttonName] === 'function')
    buttonClick = options.customButtons[buttonName];
  else if (typeof options.customButtons[buttonName] === 'string')
    buttonClick = window[options.customButtons[buttonName]];
}

Now, to get these buttons to work, you need to add some information when you are initializing
your instance of FullCalendar.  You will still add the buttons to the header option
like the native buttons, but you will also add information to the buttonText object
(or possibly the buttonIcons object) and create a customButtons object.  An example
of creating an "Add Event" button to the left side of the header is shown below:

$('#calendar').fullCalendar({
  header: {
    left  : 'prev,next today addEvent', // Here I am adding the addEvent button
    center: 'title',
    right : 'month,agendaWeek,agendaDay'
  },
  buttonText: {
    addEvent: 'Add New Event'
  },
  buttonIcons: {  // This is optional. The default in fullCalendar is to show no text
if an icon is provided, one or the other
    addEvent: 'plusthick' // See the documentation about using jQueryUI icons
  },
  customButtons: {
    addEvent: function() { // You can also supply the name of a function as a string
here
      $('#add-event').dialog('open');
    }
  }
});

Notice how all of the option object properties match the name of the button I supplied
in the header object (addEvent). Failing to do this will result in no button being
shown. 

Reported by stelzer13 on 2013-07-22 16:57:07

[arshaw]

Reported by adamrshaw on 2013-08-14 02:04:34

• Labels added: Type-Feature
• Labels removed: Type-Enhancement

[arshaw]

Issue 2103 has been merged into this issue.

Reported by adamrshaw on 2013-08-25 00:24:28

[arshaw]

NOTE: we might want to allow multiple "rows" of controls (see issue 2103)

Reported by adamrshaw on 2013-08-25 00:25:09

[arshaw]

Issue 2213 has been merged into this issue.

Reported by adamrshaw on 2013-08-25 07:42:55

[arshaw]

I implemented the above suggestion like so:
    else if(match = buttonName.match(/^{(\w+):(.+)}$/)) {
        if(typeof(options[match[2]]) == "function") {
            buttonClick = options[match[2]];
        } else if(typeof(window[match[2]]) == "function") {
            buttonClick = window[match[2]];
        } else {
            buttonClick = function() { return false; }
        }
        buttonName = match[1];
        options.buttonText[match[1]] = match[1].replace('_', ' ');
    }

This way (options[match[2]]) you can declare the function in the constructor, or in
window.

Just my piece.

Reported by amsross on 2013-09-13 16:21:46

[arshaw]

has anything changed in v2? is there a way of adding custom HTML to the header without
changing fullcalendar?

Reported by patrickwasp on 2014-04-09 23:43:15

[arshaw]

@stephenh1988 has made an implementation of this in his fork:
https://github.com/arshaw/fullcalendar/pull/70

I have not tested it nor investigated its compatibility with v2, but its worth checking
out.

Reported by adamrshaw on 2014-06-06 00:42:49

[arshaw]

Hi all,
Any update on this topic?
Thanks

Reported by Adrien.berthou on 2015-05-01 15:13:02

[arshaw]

the ability to add buttons has been added in v2.4.0 of fullcalendar:

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

[arshaw]

custom buttons can be put in the header now, but we can further discuss how to put other things (arbitrary widgets and html)

thus, keeping this issue open

[Stafie]

Nice addition of the custom buttons in the calendar header.
Also I think that the ability to specify custom html for the elements added would be great.

[espen]

Yeah would be nice @Stafie, here is what I am doing currently:
$('#fullcalendar').find('.fc-right').append( 'html' );

[mik356ua]

Yeah it would be great to add any html code like this or something similar:

$('#calendar').fullCalendar({
    customElements {
        myCustomDropdown: {
            html: '<div class="dropdown">\
                     <button class="btn dropdown-toggle" type="button" data-toggle="dropdown">\
                       Dropdown  <span class="caret"></span>\
                     </button>\
                     <ul class="dropdown-menu">\
                       <li><a href="#" ng-click="runAction()">Action</a></li>\
                       <li><a href="#" ng-click="runAnotherAction()">Another action</a></li>\
                     </ul>\
                   </div>'
        },
        myCustomButton: {
            type: 'button',
            text: 'custom!',
            click: function() {
                alert('clicked the custom button!');
            }
        }
    },
    header: {
        left: 'prev,next today myCustomButton',
        center: 'title',
        right: 'myCustomDropdown month,agendaWeek,agendaDay'
    }
});

And thank you for your awesome plugin:)

[flyingangel]

Suggestion: Custom button should receive a HTML code, element or object

$('#calendar').fullCalendar({
   customButtons: {
        myCustomButton: {
            text: '<div>some div</div>!',   //as html string
            type: 'html',
            html: object    //direct passing html element, will override text
        }
    },
});

object receive a DOM element, string, jQuery object, jQuery selector as parameter

[Liaohuanle]

const customButtons = {
watchButton: {
text: 'watch',
type: 'button',
click: function () {
alert('clicked the custom button!')
}
},
userButton: {
text: 'mine',
click: function () {
alert('clicked the custom button!')
}
}
}

var calendar = $('#calendar').fullCalendar({
customButtons,
header: {
left: 'title',
center: 'watchButton,userButton',
right: 'prev,next today'
},
.......
i have try each way,but its still can not append to the view.

[bradbajuz]

What's the status on this?

I'm currently trying to figure out the best way to render the right button group as a dropdown menu with Bootstrap.

Bootstrap already as has a button dropdown component (dropdown-toggle and dropdown-menu). Wonder if there should be a way to just hook into the existing Bootstrap framework by a simple change. For example, in the existing header hash, give the ability to choose which position should be a dropdown or a group toggle.

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

[frlinw]

@bradbajuz header: false then you can do it yourself thanks to fullcalendar API
a quick example: https://codepen.io/frlinw/pen/opdoeO

[bradbajuz]

Great. Thank you @frlinw

[frlinw]

As the previous demo got some popularity (+3,4k), I did a demo for the v4

• v3: https://codepen.io/frlinw/pen/opdoeO
• v4: https://codepen.io/frlinw/pen/VNbRLL

[acerix]

For reference, an example to add elements to the header from viewSkeletonRender:

https://codepen.io/acerix/pen/jOOgQeL?editors=0010

[TejasCMehta]

Suggestion: Custom button should receive a HTML code, element or object

$('#calendar').fullCalendar({
   customButtons: {
        myCustomButton: {
            text: '<div>some div</div>!',   //as html string
            type: 'html',
            html: object    //direct passing html element, will override text
        }
    },
});

object receive a DOM element, string, jQuery object, jQuery selector as parameter

How to do this in Angular 8 ?