ButterCal usage ideas

buttercal-usage.md

link custom UI

myCal = new ButterCal({
	defaultUI: false
});

myCal.linkUI({
	nextMonth: document.querySelector('.next-month'),
	prevMonth: document.querySelector('.prev-month'),
	days: document.querySelectorAll('.day'),
});
// Above are the default UI bindings. If one doesn't exist,
// you could trigger actions to create your own.
document.querySelectorAll('.next-day').addEventListener('click', function() {
 myCal.setDay('+1');
 myCal.trigger('refresh');
});

document.querySelectorAll('.prev-day').addEventListener('click', function() {
 myCal.setDay('-1');
 myCal.trigger('refresh');
});

Events

myCal.on('nextMonth', function(e, currentMonth) {
	// do stuff
});

myCal.trigger('nextMonth');
myCal.trigger('refresh');

Creating a named UI

myCal.registerUI('myCustomUI', {
	nextMonth: document.querySelector('.next-month'),
	prevMonth: document.querySelector('.prev-month'),
	days: document.querySelectorAll('.day'),
	template: function() {
		return document.querySelector('.template').toString();
	},
	onNextMonth(cal) {
		// do some things	
	}
});