My favorites | Sign in
Project Home Issues
New issue   Search
for
  Advanced search   Search tips   Subscriptions
Issue 225: Custom buttons or elements in header
28 people starred this issue and may be notified of changes. Back to list
Status:  ExportedToGithub
Owner:  ----
Closed:  Aug 2015


Sign in to add a comment
 
Reported by raf...@gmail.com, Dec 3, 2009
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.
Dec 3, 2009
Project Member #1 adamrs...@gmail.com
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
Status: Accepted
Labels: -Type-Defect Type-Enhancement
Jan 11, 2010
#2 joern.h...@gmail.com
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>');
Feb 2, 2010
#5 bibendus...@gmail.com
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/

DataPicker on Fullcalendar.htm
1.1 KB   View   Download
Feb 24, 2010
#6 sowji...@gmail.com
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
fullcalendar_datepicker.JPG
50.9 KB   View   Download
fullcalendar_datepicker_triggered.JPG
59.6 KB   View   Download
Feb 26, 2010
Project Member #7 adamrs...@gmail.com
 Issue 344  has been merged into this issue.
Apr 26, 2010
Project Member #8 adamrs...@gmail.com
 Issue 428  has been merged into this issue.
Apr 26, 2010
Project Member #9 adamrs...@gmail.com
(No comment was entered for this change.)
Summary: Custom buttons or elements in header
May 6, 2010
#10 larachan@gmail.com
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
May 12, 2010
#11 tr3n...@gmail.com
+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. 
May 31, 2010
Project Member #12 adamrs...@gmail.com
 Issue 491  has been merged into this issue.
Jun 3, 2010
#13 nsbin...@gmail.com
Please tell me what are the plugin files required for adding datepicker into 
fullcalendar
Jun 24, 2010
#14 asmund.h...@gmail.com
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;
}
Sep 9, 2010
#15 skana...@gmail.com
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
DataPicker on Fullcalendar month year change.html
1.2 KB   View   Download
Sep 8, 2011
#16 ivan.ga...@gmail.com
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;
}
Aug 31, 2012
#17 dupras.f...@gmail.com
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) {

Dec 20, 2012
#18 brsan...@gmail.com
The solution specified by @drupas (comment 17) works great. Wish this gets included into the main library with toggle button support.
Jan 29, 2013
#19 adam.wes...@gmail.com
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?
Mar 14, 2013
#20 berenyi....@gmail.com
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).
Jun 27, 2013
#22 kongar...@gmail.com
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

Jul 3, 2013
#23 carver...@gmail.com
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";
        }
    }
}
Jul 22, 2013
#24 stelze...@gmail.com
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. 
Aug 13, 2013
Project Member #25 adamrs...@gmail.com
(No comment was entered for this change.)
Labels: -Type-Enhancement Type-Feature
Aug 24, 2013
Project Member #26 adamrs...@gmail.com
 Issue 1836  has been merged into this issue.
Aug 24, 2013
Project Member #27 adamrs...@gmail.com
NOTE: we might want to allow multiple "rows" of controls (see  issue 1836 )
Aug 25, 2013
Project Member #28 adamrs...@gmail.com
 Issue 1946  has been merged into this issue.
Sep 13, 2013
#29 amsr...@gmail.com
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.
Apr 9, 2014
#30 patrickw...@gmail.com
has anything changed in v2? is there a way of adding custom HTML to the header without changing fullcalendar?
Jun 5, 2014
Project Member #31 adamrs...@gmail.com
@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.
May 1, 2015
#33 Adrien.b...@gmail.com
Hi all,
Any update on this topic?
Thanks
Aug 22, 2015
Project Member #34 adamrs...@gmail.com
the ability to add buttons has been added in v2.4.0 of fullcalendar:

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

please be aware that discussion for this issue has moved to the following URL:
https://github.com/fullcalendar/fullcalendar/issues/496

(had to do this b/c google code is shutting down. plz star fullcalendar on github!)
Status: ExportedToGithub
Aug 22, 2015
Project Member #35 adamrs...@gmail.com
custom buttons can be put in the header now, but we can further discuss how to put other things (arbitrary widgets and html)
Sign in to add a comment

Powered by Google Project Hosting