| Issue 225: | Custom buttons or elements in header | |
| 28 people starred this issue and may be notified of changes. | Back to list |
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.
Jan 11, 2010
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
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/
Feb 24, 2010
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
Feb 26, 2010
Issue 344 has been merged into this issue.
Apr 26, 2010
Issue 428 has been merged into this issue.
Apr 26, 2010
(No comment was entered for this change.)
Summary:
Custom buttons or elements in header
May 6, 2010
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
+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
Issue 491 has been merged into this issue.
Jun 3, 2010
Please tell me what are the plugin files required for adding datepicker into fullcalendar
Jun 24, 2010
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
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
Sep 8, 2011
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
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
The solution specified by @drupas (comment 17) works great. Wish this gets included into the main library with toggle button support.
Jan 29, 2013
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
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
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
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
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
(No comment was entered for this change.)
Labels:
-Type-Enhancement Type-Feature
Aug 24, 2013
Issue 1836 has been merged into this issue.
Aug 24, 2013
NOTE: we might want to allow multiple "rows" of controls (see issue 1836 )
Aug 25, 2013
Issue 1946 has been merged into this issue.
Sep 13, 2013
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
has anything changed in v2? is there a way of adding custom HTML to the header without changing fullcalendar?
Jun 5, 2014
@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
Hi all, Any update on this topic? Thanks
Aug 22, 2015
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
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 |
Labels: -Type-Defect Type-Enhancement