/**
* Zabuto Calendar
*
* Dependencies
* - jQuery (2.0.3)
* - Twitter Bootstrap (3.0.2)
*/
if (typeof jQuery == 'undefined') {
throw new Error('jQuery is not loaded');
}
/**
* Create calendar
*
* @param options
* @returns {*}
*/
$.fn.zabuto_calendar = function (options) {
var opts = $.extend({}, $.fn.zabuto_calendar_defaults(), options);
var languageSettings = $.fn.zabuto_calendar_language(opts.language);
opts = $.extend({}, opts, languageSettings);
this.each(function () {
var $calendarElement = $(this);
$calendarElement.attr('id', "zabuto_calendar_" + Math.floor(Math.random() * 99999).toString(36));
$calendarElement.data('initYear', opts.year);
$calendarElement.data('initMonth', opts.month);
$calendarElement.data('monthLabels', opts.month_labels);
$calendarElement.data('weekStartsOn', opts.weekstartson);
$calendarElement.data('navIcons', opts.nav_icon);
$calendarElement.data('dowLabels', opts.dow_labels);
$calendarElement.data('showToday', opts.today);
$calendarElement.data('showDays', opts.show_days);
$calendarElement.data('showPrevious', opts.show_previous);
$calendarElement.data('showNext', opts.show_next);
$calendarElement.data('cellBorder', opts.cell_border);
$calendarElement.data('jsonData', opts.data);
$calendarElement.data('ajaxSettings', opts.ajax);
$calendarElement.data('legendList', opts.legend);
$calendarElement.data('actionFunction', opts.action);
$calendarElement.data('actionNavFunction', opts.action_nav);
drawCalendar();
function drawCalendar() {
var dateInitYear = parseInt($calendarElement.data('initYear'));
var dateInitMonth = parseInt($calendarElement.data('initMonth')) - 1;
var dateInitObj = new Date(dateInitYear, dateInitMonth, 1, 0, 0, 0, 0);
$calendarElement.data('initDate', dateInitObj);
var tableClassHtml = ($calendarElement.data('cellBorder') === true) ? ' table-bordered' : '';
$tableObj = $('
');
$tableObj = drawTable($calendarElement, $tableObj, dateInitObj.getFullYear(), dateInitObj.getMonth());
$legendObj = drawLegend($calendarElement);
var $containerHtml = $('');
$containerHtml.append($tableObj);
$containerHtml.append($legendObj);
$calendarElement.append($containerHtml);
var jsonData = $calendarElement.data('jsonData');
/*
var obj = JSON.parse($calendarElement);
var length = Object.keys(obj).length;
alert(length);
var json_date = new Date(jsonData[0].date);
var json_month = json_date.getMonth();
var json_year = json_date.getFullYear();
&& json_month == month && json_year == year
*/
if (false !== jsonData) {
checkEvents($calendarElement, dateInitObj.getFullYear(), dateInitObj.getMonth());
}
}
function drawTable($calendarElement, $tableObj, year, month) {
var dateCurrObj = new Date(year, month, 1, 0, 0, 0, 0);
$calendarElement.data('currDate', dateCurrObj);
$tableObj.empty();
$tableObj = appendMonthHeader($calendarElement, $tableObj, year, month);
$tableObj = appendDayOfWeekHeader($calendarElement, $tableObj);
$tableObj = appendDaysOfMonth($calendarElement, $tableObj, year, month);
checkEvents($calendarElement, year, month);
return $tableObj;
}
function drawLegend($calendarElement) {
var $legendObj = $('');
var legend = $calendarElement.data('legendList');
if (typeof(legend) == 'object' && legend.length > 0) {
$(legend).each(function (index, item) {
if (typeof(item) == 'object') {
if ('type' in item) {
var itemLabel = '';
if ('label' in item) {
itemLabel = item.label;
}
switch (item.type) {
case 'text':
if (itemLabel !== '') {
var itemBadge = '';
if ('badge' in item) {
if (typeof(item.classname) === 'undefined') {
var badgeClassName = 'badge-event';
} else {
var badgeClassName = item.classname;
}
itemBadge = '' + item.badge + ' ';
}
$legendObj.append('' + itemBadge + itemLabel + '');
}
break;
case 'block':
if (itemLabel !== '') {
itemLabel = '' + itemLabel + '';
}
if (typeof(item.classname) === 'undefined') {
var listClassName = 'event';
} else {
var listClassName = 'event-styled ' + item.classname;
}
$legendObj.append('');
break;
case 'list':
if ('list' in item && typeof(item.list) == 'object' && item.list.length > 0) {
var $legendUl = $('');
$(item.list).each(function (listIndex, listClassName) {
$legendUl.append('');
});
$legendObj.append($legendUl);
}
break;
case 'spacer':
$legendObj.append(' ');
break;
}
}
}
});
}
return $legendObj;
}
function appendMonthHeader($calendarElement, $tableObj, year, month) {
var navIcons = $calendarElement.data('navIcons');
var $prevMonthNavIcon = $('<');
var $nextMonthNavIcon = $('>');
if (typeof(navIcons) === 'object') {
if ('prev' in navIcons) {
$prevMonthNavIcon.html(navIcons.prev);
}
if ('next' in navIcons) {
$nextMonthNavIcon.html(navIcons.next);
}
}
var prevIsValid = $calendarElement.data('showPrevious');
if (typeof(prevIsValid) === 'number' || prevIsValid === false) {
prevIsValid = checkMonthLimit($calendarElement.data('showPrevious'), true);
}
var $prevMonthNav = $('');
$prevMonthNav.attr('id', $calendarElement.attr('id') + '_nav-prev');
$prevMonthNav.data('navigation', 'prev');
if (prevIsValid !== false) {
prevMonth = (month - 1);
prevYear = year;
if (prevMonth == -1) {
prevYear = (prevYear - 1);
prevMonth = 11;
}
$prevMonthNav.data('to', {year: prevYear, month: (prevMonth + 1)});
$prevMonthNav.append($prevMonthNavIcon);
if (typeof($calendarElement.data('actionNavFunction')) === 'function') {
$prevMonthNav.click($calendarElement.data('actionNavFunction'));
}
$prevMonthNav.click(function (e) {
drawTable($calendarElement, $tableObj, prevYear, prevMonth);
});
}
var nextIsValid = $calendarElement.data('showNext');
if (typeof(nextIsValid) === 'number' || nextIsValid === false) {
nextIsValid = checkMonthLimit($calendarElement.data('showNext'), false);
}
var $nextMonthNav = $('');
$nextMonthNav.attr('id', $calendarElement.attr('id') + '_nav-next');
$nextMonthNav.data('navigation', 'next');
if (nextIsValid !== false) {
nextMonth = (month + 1);
nextYear = year;
if (nextMonth == 12) {
nextYear = (nextYear + 1);
nextMonth = 0;
}
$nextMonthNav.data('to', {year: nextYear, month: (nextMonth + 1)});
$nextMonthNav.append($nextMonthNavIcon);
if (typeof($calendarElement.data('actionNavFunction')) === 'function') {
$nextMonthNav.click($calendarElement.data('actionNavFunction'));
}
$nextMonthNav.click(function (e) {
drawTable($calendarElement, $tableObj, nextYear, nextMonth);
});
}
var monthLabels = $calendarElement.data('monthLabels');
var $prevMonthCell = $(' | ').append($prevMonthNav);
var $nextMonthCell = $(' | ').append($nextMonthNav);
var $currMonthLabel = $('' + monthLabels[month] + '');
$currMonthLabel.dblclick(function () {
var dateInitObj = $calendarElement.data('initDate');
drawTable($calendarElement, $tableObj, dateInitObj.getFullYear(), dateInitObj.getMonth());
});
var $currMonthCell = $(' | ');
$currMonthCell.append($currMonthLabel);
var $monthHeaderRow = $('');
$monthHeaderRow.append($prevMonthCell, $currMonthCell, $nextMonthCell);
$tableObj.append($monthHeaderRow);
return $tableObj;
}
function appendDayOfWeekHeader($calendarElement, $tableObj) {
if ($calendarElement.data('showDays') === true) {
var weekStartsOn = $calendarElement.data('weekStartsOn');
var dowLabels = $calendarElement.data('dowLabels');
if (weekStartsOn === 0) {
var dowFull = $.extend([], dowLabels);
var sunArray = new Array(dowFull.pop());
dowLabels = sunArray.concat(dowFull);
}
var $dowHeaderRow = $('');
$(dowLabels).each(function (index, value) {
$dowHeaderRow.append('' + value + ' | ');
});
$tableObj.append($dowHeaderRow);
}
return $tableObj;
}
function appendDaysOfMonth($calendarElement, $tableObj, year, month) {
var ajaxSettings = $calendarElement.data('ajaxSettings');
var weeksInMonth = calcWeeksInMonth(year, month);
var lastDayinMonth = calcLastDayInMonth(year, month);
var firstDow = calcDayOfWeek(year, month, 1);
var lastDow = calcDayOfWeek(year, month, lastDayinMonth);
var currDayOfMonth = 1;
var weekStartsOn = $calendarElement.data('weekStartsOn');
if (weekStartsOn === 0) {
if (lastDow == 6) {
weeksInMonth++;
}
if (firstDow == 6 && (lastDow == 0 || lastDow == 1 || lastDow == 5)) {
weeksInMonth--;
}
firstDow++;
if (firstDow == 7) {
firstDow = 0;
}
}
for (var wk = 0; wk < weeksInMonth; wk++) {
var $dowRow = $('
');
for (var dow = 0; dow < 7; dow++) {
if (dow < firstDow || currDayOfMonth > lastDayinMonth) {
$dowRow.append(' | ');
} else {
var dateId = $calendarElement.attr('id') + '_' + dateAsString(year, month, currDayOfMonth);
var dayId = dateId + '_day';
var todayClass = '';
if ($calendarElement.data('showToday') === true && isToday(year, month, currDayOfMonth)) {
todayClass = 'today ';
}
var $dayElement = $('' + currDayOfMonth + '
');
$dayElement.data('day', currDayOfMonth);
if ($calendarElement.data('showToday') === true) {
if (isToday(year, month, currDayOfMonth)) {
$dayElement.html('' + currDayOfMonth + '');
}
}
var $dowElement = $(' | ');
$dowElement.append($dayElement);
$dowElement.data('date', dateAsString(year, month, currDayOfMonth));
$dowElement.data('hasEvent', false);
if (typeof($calendarElement.data('actionFunction')) === 'function') {
$dowElement.addClass('dow-clickable');
$dowElement.click(function () {
$calendarElement.data('selectedDate', $(this).data('date'));
});
$dowElement.click($calendarElement.data('actionFunction'));
}
$dowRow.append($dowElement);
currDayOfMonth++;
}
if (dow == 6) {
firstDow = 0;
}
}
$tableObj.append($dowRow);
}
return $tableObj;
}
/* ----- Modal functions ----- */
function createModal(id, title, body, footer) {
var $modalHeaderButton = $('');
var $modalHeaderTitle = $('' + title + '
');
var $modalHeader = $('');
$modalHeader.append($modalHeaderButton);
$modalHeader.append($modalHeaderTitle);
var $modalBody = $('' + body + '
');
var $modalFooter = $('');
if (typeof(footer) !== 'undefined') {
var $modalFooterAddOn = $('' + footer + '
');
$modalFooter.append($modalFooterAddOn);
}
var $modalContent = $('');
$modalContent.append($modalHeader);
$modalContent.append($modalBody);
$modalContent.append($modalFooter);
var $modalDialog = $('');
$modalDialog.append($modalContent);
var $modalFade = $('');
$modalFade.append($modalDialog);
$modalFade.data('dateId', id);
$modalFade.attr("dateId", id);
return $modalFade;
}
/* ----- Event functions ----- */
function checkEvents($calendarElement, year, month) {
var jsonData = $calendarElement.data('jsonData');
var ajaxSettings = $calendarElement.data('ajaxSettings');
$calendarElement.data('events', jsonData);
var event = $calendarElement.data('events');
if (event[0] && event[0].date) {
var json_date = new Date(event[0].date);
var json_month = json_date.getMonth();
var json_year = json_date.getFullYear();
}
else {
var json_month = month;
var json_eyar = year;
}
$calendarElement.data('events', false);
if (false !== jsonData && year == json_year && month == json_month) {
return jsonEvents($calendarElement);
} else if (false !== ajaxSettings) {
return ajaxEvents($calendarElement, year, month);
}
return true;
}
function jsonEvents($calendarElement) {
var jsonData = $calendarElement.data('jsonData');
$calendarElement.data('events', jsonData);
drawEvents($calendarElement, 'json');
return true;
}
function ajaxEvents($calendarElement, year, month) {
var ajaxSettings = $calendarElement.data('ajaxSettings');
if (typeof(ajaxSettings) != 'object' || typeof(ajaxSettings.url) == 'undefined') {
alert('Invalid calendar event settings');
return false;
}
var data = {year: year, month: (month + 1)};
$.ajax({
type: 'GET',
url: ajaxSettings.url,
data: data,
dataType: 'json'
}).done(function (response) {
var events = [];
$.each(response, function (k, v) {
events.push(response[k]);
});
$calendarElement.data('events', events);
drawEvents($calendarElement, 'ajax');
});
return true;
}
function drawEvents($calendarElement, type) {
var jsonData = $calendarElement.data('jsonData');
var ajaxSettings = $calendarElement.data('ajaxSettings');
var events = $calendarElement.data('events');
if (events !== false) {
$(events).each(function (index, value) {
var id = $calendarElement.attr('id') + '_' + value.date;
var $dowElement = $('#' + id);
var $dayElement = $('#' + id + '_day');
$dowElement.data('hasEvent', true);
if (typeof(value.title) !== 'undefined') {
$dowElement.attr('title', value.title);
}
if (typeof(value.body) !== 'undefined') {
$dowElement.qtip({ content: value.body, show: { solo: true }, hide: { fixed: true, delay: 300 }, style: { classes: "qtip-light" } });
}
if (typeof(value.classname) === 'undefined') {
$dowElement.addClass('event');
} else {
$dowElement.addClass('event-styled');
$dayElement.addClass(value.classname);
}
if (typeof(value.badge) !== 'undefined' && value.badge !== false) {
var badgeClass = (value.badge === true) ? '' : ' badge-' + value.badge;
var dayLabel = $dayElement.data('day');
$dayElement.html('' + dayLabel + '');
}
if (typeof(value.body) !== 'undefined') {
var modalUse = false;
if (type === 'json' && typeof(value.modal) !== 'undefined' && value.modal === true) {
modalUse = true;
} else if (type === 'ajax' && 'modal' in ajaxSettings && ajaxSettings.modal === true) {
modalUse = true;
}
if (modalUse === true) {
$dowElement.addClass('event-clickable');
var $modalElement = createModal(id, value.title, value.body, value.footer);
$('body').append($modalElement);
$('#' + id).click(function () {
$('#' + id + '_modal').modal();
});
}
}
});
}
}
/* ----- Helper functions ----- */
function isToday(year, month, day) {
var todayObj = new Date();
var dateObj = new Date(year, month, day);
return (dateObj.toDateString() == todayObj.toDateString());
}
function dateAsString(year, month, day) {
d = (day < 10) ? '0' + day : day;
m = month + 1;
m = (m < 10) ? '0' + m : m;
return year + '-' + m + '-' + d;
}
function calcDayOfWeek(year, month, day) {
var dateObj = new Date(year, month, day, 0, 0, 0, 0);
var dow = dateObj.getDay();
if (dow == 0) {
dow = 6;
} else {
dow--;
}
return dow;
}
function calcLastDayInMonth(year, month) {
var day = 28;
while (checkValidDate(year, month + 1, day + 1)) {
day++;
}
return day;
}
function calcWeeksInMonth(year, month) {
var daysInMonth = calcLastDayInMonth(year, month);
var firstDow = calcDayOfWeek(year, month, 1);
var lastDow = calcDayOfWeek(year, month, daysInMonth);
var days = daysInMonth;
var correct = (firstDow - lastDow);
if (correct > 0) {
days += correct;
}
return Math.ceil(days / 7);
}
function checkValidDate(y, m, d) {
return m > 0 && m < 13 && y > 0 && y < 32768 && d > 0 && d <= (new Date(y, m, 0)).getDate();
}
function checkMonthLimit(count, invert) {
if (count === false) {
count = 0;
}
var d1 = $calendarElement.data('currDate');
var d2 = $calendarElement.data('initDate');
var months;
months = (d2.getFullYear() - d1.getFullYear()) * 12;
months -= d1.getMonth() + 1;
months += d2.getMonth();
if (invert === true) {
if (months < (parseInt(count) - 1)) {
return true;
}
} else {
if (months >= (0 - parseInt(count))) {
return true;
}
}
return false;
}
}); // each()
return this;
};
/**
* Default settings
*
* @returns object
* language: string,
* year: integer,
* month: integer,
* show_previous: boolean|integer,
* show_next: boolean|integer,
* cell_border: boolean,
* today: boolean,
* show_days: boolean,
* weekstartson: integer (0 = Sunday, 1 = Monday),
* nav_icon: object: prev: string, next: string
* ajax: object: url: string, modal: boolean,
* legend: object array, [{type: string, label: string, classname: string}]
* action: function
* action_nav: function
*/
$.fn.zabuto_calendar_defaults = function () {
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth() + 1;
var settings = {
language: false,
year: year,
month: month,
show_previous: true,
show_next: true,
cell_border: false,
today: false,
show_days: true,
weekstartson: 1,
nav_icon: false,
data: false,
ajax: false,
legend: false,
action: false,
action_nav: false
};
return settings;
};
/**
* Language settings
*
* @param lang
* @returns {{month_labels: Array, dow_labels: Array}}
*/
$.fn.zabuto_calendar_language = function (lang) {
if (typeof(lang) == 'undefined' || lang === false) {
lang = 'en';
}
switch (lang.toLowerCase()) {
case 'de':
return {
month_labels: ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"],
dow_labels: ["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"]
};
break;
case 'en':
return {
month_labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
dow_labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
};
break;
case 'ar':
return {
month_labels: ["يناير", "فبراير", "مارس", "أبريل", "مايو", "يونيو", "يوليو", "أغسطس", "سبتمبر", "أكتوبر", "نوفمبر", "ديسمبر"],
dow_labels: ["أثنين", "ثلاثاء", "اربعاء", "خميس", "جمعه", "سبت", "أحد"]
};
break;
case 'es':
return {
month_labels: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],
dow_labels: ["Lu", "Ma", "Mi", "Ju", "Vi", "Sá", "Do"]
};
break;
case 'fr':
return {
month_labels: ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"],
dow_labels: ["Lun", "Mar", "Mer", "Jeu", "Ven", "Sam", "Dim"]
};
break;
case 'it':
return {
month_labels: ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"],
dow_labels: ["Lun", "Mar", "Mer", "Gio", "Ven", "Sab", "Dom"]
};
break;
case 'nl':
return {
month_labels: ["Januari", "Februari", "Maart", "April", "Mei", "Juni", "Juli", "Augustus", "September", "Oktober", "November", "December"],
dow_labels: ["Ma", "Di", "Wo", "Do", "Vr", "Za", "Zo"]
};
break;
case 'pt':
return {
month_labels: ["Janeiro", "Fevereiro", "Marco", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"],
dow_labels: ["S", "T", "Q", "Q", "S", "S", "D"]
};
break;
case 'ru':
return {
month_labels: ["Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь"],
dow_labels: ["Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Вск"]
};
break;
case 'se':
return {
month_labels: ["Januari", "Februari", "Mars", "April", "Maj", "Juni", "Juli", "Augusti", "September", "Oktober", "November", "December"],
dow_labels: ["Mån", "Tis", "Ons", "Tor", "Fre", "Lör", "Sön"]
};
break;
case 'tr':
return {
month_labels: ["Ocak", "Şubat", "Mart", "Nisan", "Mayıs", "Haziran", "Temmuz", "Ağustos", "Eylül", "Ekim", "Kasım", "Aralık"],
dow_labels: ["Pts", "Salı", "Çar", "Per", "Cuma", "Cts", "Paz"]
};
break;
case 'et':
return {
month_labels: ["JAANUAR", "VEEBRUAR", "MÄRTS", "APRILL", "MAI", "JUUNI", "JUULI", "AUGUST", "SEPTEMBER", "OKTOOBER", "NOVEMBER", "DETSEMBER"],
dow_labels: ["E", "T", "K", "N", "R", "L", "P"]
};
break;
}
};