Skip to content

Commit

Permalink
calendar plugin
Browse files Browse the repository at this point in the history
  • Loading branch information
@format1981
format1981 committed Mar 9, 2013
1 parent 5d7eab5 commit 5985b9b
Show file tree
Hide file tree
Showing 4 changed files with 1,727 additions and 90 deletions.
208 changes: 163 additions & 45 deletions javascript/calendar.js
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,35 @@
/**
* Calendar - jQuery plugin for MetroUiCss framework
*
* this plugin required moment.js library (http://momentjs.com/)
*
* to apply this plugin to element use same code:
* <div class="calnedar"></div> or <div data-role="calendar"></div>
*
* init plugin manually
* <div id="calnedar"></div>
* $('#calendar').calendar(options)
*
* available options:
* initDate: calendar start date - the instance of moment.js library, or the string like '2013-02-18', if undefined initDate = now date
* lang: default 'en', see moment.js documentation #lang
*
* handling 'date-selected' event:
* $('#calendar').on('date-selected', function(el, dateString, dateMoment){
* // some code here
* });
*
* to retrieve current calendar date in any time use this code
* $('#calendar').data('date')
* you will get the instance of moment.js library
*
*/

(function($) {

var pluginName = 'calendar',
initAllSelector = '[data-role=calendar], .calendar',
paramKeys = ['InitDate'];
paramKeys = ['InitDate', 'Lang'];

$[pluginName] = function(element, options) {

Expand All @@ -18,77 +39,174 @@

// default settings
var defaults = {
initDate: 0
initDate: false,
lang: 'en'
};

var plugin = this;
plugin.settings = {};

var $element = $(element); // reference to the jQuery version of DOM element

var calendarTable = "";
var padding = "";
var i = 1;
var $prevMonthBtn,
$nextMonthBtn,
$header,
$days = [],
calMoment;

var current = new Date();
var month = current.getMonth();
var day = current.getDay();
var year = current.getFullYear();
var next_month = month + 1;
var prev_month = month - 1;
// initialization
plugin.init = function () {
plugin.settings = $.extend({}, defaults, options);

var daysInFeb = (year%100!=0) && (year%4==0) || (year%400==0) ? 29 : 28;
moment().lang(plugin.settings.lang);
var date = plugin.settings.initDate ? moment(plugin.settings.initDate) : moment();

var monthNames = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov", "Dec"];
var dayNames = ["Sunday","Monday","Tuesday","Wednesday","Thrusday","Friday", "Saturday"];
var totalDays = ["31", ""+daysInFeb+"","31","30","31","30","31","31","30","31","30","31"];
renderCalendar();
plugin.setDate(date);
};

var tempDate = new Date(next_month +' 1 ,'+year);
var tempweekday= tempDate.getDay();
var tempweekday2 = tempweekday;
var dayAmount = totalDays[month];
/**
* generate constant elements of calendar
* moment - is an object of moment.js
*/
function renderCalendar () {
var i, j, table, tr, td, mom;

table = $('<table></table>');

tr = $('<tr class="current-month"></tr>');
td = $('<th colspan="2"></th>');
$prevMonthBtn = $('<a href="javascript:void(0)" class="icon-arrow-left-3"></a>');
td.append($prevMonthBtn);
tr.append(td);
$header = $('<th colspan="3"></th>');
tr.append($header);
td = $('<th colspan="2"></th>');
$nextMonthBtn = $('<a href="javascript:void(0)" class="icon-arrow-right-3"></a>');
td.append($nextMonthBtn);
tr.append(td);
table.append(tr);

mom = moment().startOf('week');
tr = $('<tr class="weekdays"></tr>');
for (i = 0; i < 7; i++) {
tr.append('<td>' + mom.format('ddd') + '</td>');
mom.add('day', 1);
}
table.append(tr);

for (i = 0; i < 6; i++) {
tr = $('<tr></tr>');
for (j = 0; j < 7; j++) {
td = $('<td></td>');
$days[i * 7 + j] = td;
tr.append(td);
}
table.append(tr);
}

while (tempweekday>0){
padding += "<td class='premonth'></td>";
tempweekday--;
$element.append(table);

// append events
$nextMonthBtn.on('click', function(){
calMoment.add('month', 1);
plugin.setDate(calMoment);
});
$prevMonthBtn.on('click', function(){
calMoment.add('month', -1);
plugin.setDate(calMoment);
});
$days.forEach(function(day){
day.on('click', function(){
var date = day.data('date');
if (!date) {
return;
}
calMoment = moment(date);
plugin.setDate(calMoment);
$element.trigger('date-selected', [date, calMoment]);
});
});
}

while (i <= dayAmount){
if (tempweekday2 > 6){
tempweekday2 = 0;
padding += "</tr><tr>";
function fillCalendar () {
var dayIndex, date, yearMonth;
// header
$header.text(calMoment.format('MMM YYYY'));

// this month
var firstDayMom = calMoment.clone().startOf('month');
var daysInMonth = calMoment.daysInMonth();
var firstDayIndex = +firstDayMom.format('d'); // it also day of week index
var lastDayIndex = firstDayIndex + daysInMonth;
var currentDate = +calMoment.format('D');
yearMonth = calMoment.format('YYYY-MM-');
date = 1;
for (dayIndex = firstDayIndex; dayIndex < lastDayIndex; dayIndex++) {
$days[dayIndex].text(date);
if (date === currentDate) {
$days[dayIndex].prop('class', 'current-day');
} else {
$days[dayIndex].prop('class', 'current-month');
}
$days[dayIndex].data('date', yearMonth + date);
date++;
}
if (i == day){
padding +="<td class='current-day'>"+i+"</td>";
}else{
padding +="<td class='current-month'>"+i+"</td>";

// prev month
var prevMonthMom = calMoment.clone().add('month', -1).endOf('month');
yearMonth = prevMonthMom.format('YYYY-MM-');
date = prevMonthMom.daysInMonth();
for (dayIndex = firstDayIndex - 1; dayIndex >= 0; dayIndex--) {
$days[dayIndex].text(date);
$days[dayIndex].prop('class', 'out');
$days[dayIndex].data('date', yearMonth + date);
date--;
}
tempweekday2++;
i++;
}

calendarTable += "<table><tr class='current-month'><th colspan='2'><i class='icon-arrow-left-3'></i></th><th colspan='3'>"+monthNames[month]+" "+ year +"</th><th colspan='2'><i class='icon-arrow-right-3'></i></th></tr>";
calendarTable +="<tr class='weekdays'><td>Sun</td><td>Mon</td><td>Tue</td><td>Wed</td><td>Thu</td><td>Fri</td><td>Sat</td> </tr>";
calendarTable += "<tr>";
calendarTable += padding;
calendarTable += "</tr></table>";

$element.html(calendarTable);
// next month
var nextMonthMom = calMoment.clone().add('month', 1);
yearMonth = nextMonthMom.format('YYYY-MM-');
var nextMonthDays = 7 - lastDayIndex % 7;
nextMonthDays = nextMonthDays === 7 ? 0 : nextMonthDays;
var nextMonthLastDayIndex = lastDayIndex + nextMonthDays;
date = 1;
for (dayIndex = lastDayIndex; dayIndex < nextMonthLastDayIndex; dayIndex++) {
$days[dayIndex].text(date);
$days[dayIndex].prop('class', 'out');
$days[dayIndex].data('date', yearMonth + date);
date++;
}

// initialization
plugin.init = function () {
// empty rows
for (dayIndex = nextMonthLastDayIndex; dayIndex < $days.length; dayIndex++) {
$days[dayIndex].text('');
$days[dayIndex].prop('class', 'empty-day');
$days[dayIndex].data('date', false);
}
}

plugin.settings = $.extend({}, defaults, options);

// sets date
// date - string ('YYYY-MM-DD') or instance of moment.js library
plugin.setDate = function(date) {
calMoment = date ? moment(date) : moment();
$element.data('date', calMoment);
fillCalendar();
};

// public methods

plugin.init();

};

// sets date
$.fn[pluginName + 'SetDate'] = function(date) {
var plugin = $(this.get(0)).data(pluginName);
if (typeof plugin !== 'undefined') {
plugin.setDte(date);
}
};

$.fn[pluginName] = function(options) {
var elements = options && options.initAll ? $(initAllSelector) : this;
return elements.each(function() {
Expand Down
1 change: 1 addition & 0 deletions public/header.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@

<script type="text/javascript" src="js/assets/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="js/assets/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="js/assets/moment.js"></script>

<script type="text/javascript" src="js/modern/dropdown.js"></script>
<script type="text/javascript" src="js/modern/accordion.js"></script>
Expand Down
Loading

0 comments on commit 5985b9b

Please sign in to comment.