Flexcal Buttons

I apologize for the French; I had to use Google translate for some of this.

Introduction

Though I don't really like them, I've had requests for things like a "Today" button in the calendar. So there is a <div> at the bottom of the calendar with class=ui-datepicker-buttonpane for putting them in. The buttons option is an array of elements or button description strings to insert. The simplest ones are ['today'] for a button that switches the calendar to today's date, and ['today commit'] to "commit" to today's date, entering it in the attached input box and closing the calendar:

The buttons array

Each item in the buttons array is appended to the buttonpane <div>. If it is anything but a string, it is appended straight:

You can use regular elements and jQuery UI buttons and checkboxes. To get the flexcal element, the enclosing button pane, which is a <div class="ui-datepicker-buttonpane">, has jQuery data attached with key 'flexcal' of:

{
	element: // the attached input element
	widget: // the <div> that contains the calendar
	instance: // the flexcal object itself
}

Thus, using regular elements:

Or, using the jQuery UI button plugin:

I have to admit, I do not like the jQuery UI buttons much and have no intention of using them.

If the item in the buttons is a string, then a new <button> is created and given a class list of that string. The first word (space-delimited) in that string is used as the "data-flexcal-l10n" attribute. This means that these buttons are localized with the flexcal text localization. So buttons: ['today commit big'] creates <button class="today commit big" data-flexcal-l10n="today"> and the text of the button as displayed will be the todayText of the current localization object. The assigned classes can be used for styling and for assigning actions. For example, the "today" and "close" actions are predefined as:

$('body').on('click', '.ui-flexcal button.today', function(){
	var instance = $.data(this.parentNode, 'flexcal').instance;
	if (this.classList.contains('commit')){
		instance._commit(new Date);
	}else{
		instance._setDate(new Date);
	}
});
$('body').on('click', '.ui-flexcal button.close', function(){
	var instance = $.data(this.parentNode, 'flexcal').instance;
	if (this.classList.contains('commit')){
		instance._commit();
	}else{
		instance.hide();
	}
});

Note that these attach the event handlers to the body element, so the body element must exist when the code is included. Don't put the <script src=jquery.flexcal.js> in the head or the buttons won't work.

So using those is easy, as the "today" and "today commit" examples above. Using "close" is similar:

Using FontAwesome icons is also easy:

Note there is no text since it is looking for faText (the first class listed), and that isn't defined. If you want the text, list the class with text defined first. This puts the FontAwesome icon too close to the text, so I created another class "fa-text" to space it out a bit:

As illustrated for "today" and "close", assigning an action to a button relies on event delegation; attach the event handler to the body element with a selector for that particular button, using the classes listed. Then you need to assign some text (either in the default localization or in each calendar localization) or an icon.

Note from these examples that jQuery UI CSS makes the buttons float: right so the last ones are the left-most ones.

Localization is done by putting the text for each locale into the calendars option:

The localization is not specific to buttons; anything with the data-flexcal-l10n attribute is localized: