From c0a3eeac7020850781d2b67744c565a76fc31868 Mon Sep 17 00:00:00 2001 From: Volkov Sergey Date: Sat, 16 Mar 2013 15:59:39 +0400 Subject: [PATCH 1/3] calendar plugin --- public/calendar.php | 2 +- public/js/modern/calendar.js | 87 +++++++++++++++++++++--------------- 2 files changed, 53 insertions(+), 36 deletions(-) diff --git a/public/calendar.php b/public/calendar.php index 7542f7130..1b737f0f0 100644 --- a/public/calendar.php +++ b/public/calendar.php @@ -20,7 +20,7 @@

data-param-lang="en"

-
+

data-param-lang="ru"
diff --git a/public/js/modern/calendar.js b/public/js/modern/calendar.js index 0ef410853..29fff27cb 100644 --- a/public/js/modern/calendar.js +++ b/public/js/modern/calendar.js @@ -30,7 +30,7 @@ var pluginName = 'calendar', initAllSelector = '[data-role=calendar], .calendar', - paramKeys = ['InitDate', 'Lang']; + paramKeys = ['InitDate', 'Lang', 'YearButtons']; $[pluginName] = function(element, options) { @@ -41,7 +41,8 @@ // default settings var defaults = { initDate: false, - lang: 'en' + lang: 'en', + yearButtons: false }; var plugin = this; @@ -51,6 +52,8 @@ var $prevMonthBtn, $nextMonthBtn, + $prevYearBtn, + $nextYearBtn, $header, $days = [], calMoment, @@ -68,7 +71,7 @@ dow = moment.langData(lang)._week.dow; var selectedDateMoment = date ? moment(date) : moment(); - selectedDateString = selectedDateMoment.format('YYYY-MM-D'); + selectedDateString = selectedDateMoment.format('YYYY-MM-DD'); renderCalendar(); plugin.setDate(date); @@ -79,21 +82,34 @@ * moment - is an object of moment.js */ function renderCalendar () { - var i, j, table, tr, td, mom; + var i, j, table, tr, td, mom, + yearBtns = plugin.settings.yearButtons; table = $('
'); tr = $(''); - td = $(''); + if (yearBtns) { + td = $(''); + $prevYearBtn = $(''); + td.append($prevYearBtn); + tr.append(td); + } + td = $(''); $prevMonthBtn = $(''); td.append($prevMonthBtn); tr.append(td); $header = $(''); tr.append($header); - td = $(''); + td = $(''); $nextMonthBtn = $(''); td.append($nextMonthBtn); tr.append(td); + if (yearBtns) { + td = $(''); + $nextYearBtn = $(''); + td.append($nextYearBtn); + tr.append(td); + } table.append(tr); mom = moment().lang(lang).startOf('week').add('day', dow); @@ -127,6 +143,18 @@ calMoment.add('month', -1); plugin.setDate(calMoment); }); + if (yearBtns) { + $nextYearBtn.on('mousedown', function(event){ + event.stopPropagation(); + calMoment.add('year', 1); + plugin.setDate(calMoment); + }); + $prevYearBtn.on('mousedown', function(event){ + event.stopPropagation(); + calMoment.add('year', -1); + plugin.setDate(calMoment); + }); + } $days.forEach(function(day){ day.on('mousedown', function(event){ event.stopPropagation(); @@ -136,7 +164,7 @@ } calMoment = moment(date); calMoment.lang(lang); - selectedDateString = calMoment.format('YYYY-MM-D'); + selectedDateString = calMoment.format('YYYY-MM-DD'); plugin.setDate(calMoment); $element.trigger('date-selected', [date, calMoment]); }); @@ -144,60 +172,49 @@ } function fillCalendar () { - var dayIndex, date, yearMonth; + var dayIndex, date, dateStr; // header $header.text(calMoment.format('MMM YYYY')); // this month - var firstDayMom = calMoment.clone().startOf('month'); + var thisMonthMom = calMoment.clone().startOf('month'); var daysInMonth = calMoment.daysInMonth(); - var firstDayIndex = +firstDayMom.format('d') - dow; // it also day of week index + var firstDayIndex = +thisMonthMom.format('d') - dow; // it also day of week index firstDayIndex = firstDayIndex < 0 ? firstDayIndex + 7 : firstDayIndex; var lastDayIndex = firstDayIndex + daysInMonth; - //var currentDate = calMoment.format('YYYY-MM-D'); - yearMonth = calMoment.format('YYYY-MM-'); - date = 1; for (dayIndex = firstDayIndex; dayIndex < lastDayIndex; dayIndex++) { + date = thisMonthMom.format('D'); + dateStr = thisMonthMom.format('YYYY-MM-DD'); $days[dayIndex].text(date); - if (yearMonth + date === selectedDateString) { + if (dateStr === selectedDateString) { $days[dayIndex].prop('class', 'current-day'); } else { $days[dayIndex].prop('class', 'current-month'); } - $days[dayIndex].data('date', yearMonth + date); - date++; + $days[dayIndex].data('date', dateStr); + thisMonthMom.add('day', 1); } // 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--) { + date = prevMonthMom.format('D'); + dateStr = prevMonthMom.format('YYYY-MM-DD'); $days[dayIndex].text(date); $days[dayIndex].prop('class', 'out'); - $days[dayIndex].data('date', yearMonth + date); - date--; + $days[dayIndex].data('date', dateStr); + prevMonthMom.add('day', -1); } // 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++) { + for (dayIndex = lastDayIndex; dayIndex < 42; dayIndex++) { + date = nextMonthMom.format('D'); + dateStr = nextMonthMom.format('YYYY-MM-DD'); $days[dayIndex].text(date); $days[dayIndex].prop('class', 'out'); - $days[dayIndex].data('date', yearMonth + date); - date++; - } - - // empty rows - for (dayIndex = nextMonthLastDayIndex; dayIndex < $days.length; dayIndex++) { - $days[dayIndex].text(''); - $days[dayIndex].prop('class', 'empty-day'); - $days[dayIndex].data('date', false); + $days[dayIndex].data('date', dateStr); + nextMonthMom.add('day', 1); } } From 4454f4c0c6bd0eb6b83ffcaacab312677a8e36c6 Mon Sep 17 00:00:00 2001 From: Volkov Sergey Date: Sat, 16 Mar 2013 19:02:56 +0400 Subject: [PATCH 2/3] calendar plugin --- public/calendar.php | 4 +- public/js/modern/calendar.js | 162 +++++++++++++++++++++++++++++++++-- 2 files changed, 157 insertions(+), 9 deletions(-) diff --git a/public/calendar.php b/public/calendar.php index 1b737f0f0..a529e2cb2 100644 --- a/public/calendar.php +++ b/public/calendar.php @@ -16,7 +16,7 @@

-
+

data-param-lang="en"

@@ -40,7 +40,7 @@

Date Picker

This component in progress...

-
+
diff --git a/public/js/modern/calendar.js b/public/js/modern/calendar.js index 29fff27cb..4f924bacf 100644 --- a/public/js/modern/calendar.js +++ b/public/js/modern/calendar.js @@ -13,7 +13,7 @@ * 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: string 'en', 'ru', 'de' etc. More see here - https://github.com/timrwood/moment/blob/develop/min/langs.js - * + * yearButtons: if set you will see buttons to switch years * * handling 'date-selected' event: * $('#calendar').on('date-selected', function(el, dateString, dateMoment){ @@ -24,6 +24,16 @@ * $('#calendar').data('date') * you will get the instance of moment.js library * + * you can set any date you want by using $('#calendar').calendarSetDate('2013-03-16'); + * if no argument - will sets current date + * + * you can add event on calendar by using $('#calendar').calendarSetEvent({'date': '2013-03-16', 'event': 'today my birthday'}) + * or $('#calendar').calendarSetEvents([{'date': '2013-03-16', 'event': 'today my birthday'}, ...]) to add several events + * to remove events use clearEvents + * $('#calendar').calendarClearEvents('all') - will remove all events + * $('#calendar').calendarClearEvents('2013-03-16') - will remove all events for specified date + * $('#calendar').calendarClearEvents(['2013-03-16', '2013-03-17', ...]) - will remove all events for specified dates + * */ (function($) { @@ -59,7 +69,8 @@ calMoment, lang, dow, - selectedDateString; + selectedDateString, + calendarEvents = {}; // user defined calendar events, structure {'YYYY-MM-DD': ['string', 'string', ...]} // initialization plugin.init = function () { @@ -191,6 +202,9 @@ } else { $days[dayIndex].prop('class', 'current-month'); } + if (calendarEvents[dateStr]) { + $days[dayIndex].addClass('event'); + } $days[dayIndex].data('date', dateStr); thisMonthMom.add('day', 1); } @@ -202,17 +216,23 @@ dateStr = prevMonthMom.format('YYYY-MM-DD'); $days[dayIndex].text(date); $days[dayIndex].prop('class', 'out'); + if (calendarEvents[dateStr]) { + $days[dayIndex].addClass('event'); + } $days[dayIndex].data('date', dateStr); prevMonthMom.add('day', -1); } // next month - var nextMonthMom = calMoment.clone().add('month', 1); + var nextMonthMom = calMoment.clone().add('month', 1).startOf('month'); for (dayIndex = lastDayIndex; dayIndex < 42; dayIndex++) { date = nextMonthMom.format('D'); dateStr = nextMonthMom.format('YYYY-MM-DD'); $days[dayIndex].text(date); $days[dayIndex].prop('class', 'out'); + if (calendarEvents[dateStr]) { + $days[dayIndex].addClass('event'); + } $days[dayIndex].data('date', dateStr); nextMonthMom.add('day', 1); } @@ -226,6 +246,37 @@ calMoment.lang(lang); $element.data('date', calMoment); fillCalendar(); + $element.trigger('date-setted', [date, calMoment]); + }; + + // sets event + // event - object {'date': '2013-03-01', 'text': 'any text'} + plugin.setEvent = function(event) { + var mom = event.date ? moment(event.date) : moment(); + var dateStr = mom.format('YYYY-MM-DD'); + if (!calendarEvents[dateStr]) { + calendarEvents[dateStr] = []; + } + calendarEvents[dateStr].push(event.text); + fillCalendar(); + }; + + // clearing events + // dates: + // - string - 'YYYY-MM-DD' - clearing events for this date + // - string - 'all' - clearing all events + // - array - ['YYYY-MM-DD', 'YYYY-MM-DD' ...] - clearing events of several dates + plugin.clearEvents = function (dates) { + if (dates === 'all') { + calendarEvents = {}; + } else if (typeof dates === 'string') { + calendarEvents[dates] = null; + } else if (typeof dates === 'array') { + $.each(dates, function(i, date){ + calendarEvents[date] = null; + }); + } + fillCalendar(); }; plugin.init(); @@ -236,7 +287,31 @@ $.fn[pluginName + 'SetDate'] = function(date) { var plugin = $(this.get(0)).data(pluginName); if (typeof plugin !== 'undefined') { - plugin.setDte(date); + plugin.setDate(date); + } + }; + + // sets event + $.fn[pluginName + 'SetEvent'] = function(event) { + var plugin = $(this.get(0)).data(pluginName); + if (typeof plugin !== 'undefined') { + plugin.setEvent(event); + } + }; + // set many events + $.fn[pluginName + 'SetEvents'] = function(events) { + var plugin = $(this.get(0)).data(pluginName); + if (typeof plugin !== 'undefined') { + $.each(events, function(i, event){ + plugin.setEvent(event); + }); + } + }; + // clear events for any date + $.fn[pluginName + 'ClearEvents'] = function(dates) { + var plugin = $(this.get(0)).data(pluginName); + if (typeof plugin !== 'undefined') { + plugin.clearEvents(dates); } }; @@ -267,13 +342,45 @@ /** * datepicker plugin * + * this plugin required moment.js library (http://momentjs.com/) + * + * to apply this plugin to element use same code: + *
or
+ * + * init plugin manually + *
+ * $('#datepicker').datepicker(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: string 'en', 'ru', 'de' etc. More see here - https://github.com/timrwood/moment/blob/develop/min/langs.js + * yearButtons: if set you will see buttons to switch years + * + * handling 'date-selected' event: + * $('#datepicker').on('date-selected', function(el, dateString, dateMoment){ + * // some code here + * }); + * + * to retrieve current calendar date in any time use this code + * $('#datepicker').data('date') + * you will get the instance of moment.js library + * + * you can set any date you want by using $('#datepicker').datepickerSetDate('2013-03-16'); + * if no argument - will sets current date + * + * you can add event on datepicker by using $('#datepicker').datepickerSetEvent({'date': '2013-03-16', 'event': 'today my birthday'}) + * or $('#datepicker').datepickerSetEvents([{'date': '2013-03-16', 'event': 'today my birthday'}, ...]) to add several events + * to remove events use clearEvents + * $('#datepicker').datepickerClearEvents('all') - will remove all events + * $('#datepicker').datepickerClearEvents('2013-03-16') - will remove all events for specified date + * $('#datepicker').datepickerClearEvents(['2013-03-16', '2013-03-17', ...]) - will remove all events for specified dates * */ (function($) { var pluginName = 'datepicker', initAllSelector = '[data-role=datepicker], .datepicker'; - paramKeys = ['InitDate', 'Lang']; + paramKeys = ['InitDate', 'Lang', 'YearButtons']; $[pluginName] = function(element, options) { @@ -284,7 +391,8 @@ // default settings var defaults = { initDate: false, - lang: 'en' + lang: 'en', + yearButtons: false }; var plugin = this; @@ -305,11 +413,13 @@ var $calendarWrap = $('
'); $calendar = $(''); + $element.data('calendar', $calendar); $calendarWrap.append($calendar); $element.after($calendarWrap); $calendar.calendar({ initDate: settings.initDate, - lang: settings.lang + lang: settings.lang, + yearButtons: settings.yearButtons }); dateSelected(null, null, $calendar.data('date')); @@ -324,6 +434,7 @@ }); $calendar.on('date-selected', dateSelected); + $calendar.on('date-setted', dateSetted); }; function showCalendar (event) { @@ -352,12 +463,49 @@ function dateSelected (event, dateString, dateMoment) { hideCalendar(); $input.val(dateMoment.format('ll')); + $input.data('date', dateMoment); + $input.trigger('date-selected', [dateString, dateMoment]); + } + function dateSetted (event, dateString, dateMoment) { + $input.val(dateMoment.format('ll')); + $input.data('date', dateMoment); } plugin.init(); }; + // sets date + $.fn[pluginName + 'SetDate'] = function(date) { + var $calendar = $(this.get(0)).data('calendar'); + if (typeof $calendar !== 'undefined') { + $calendar.calendarSetDate(date); + } + }; + // sets event + $.fn[pluginName + 'SetEvent'] = function(event) { + var $calendar = $(this.get(0)).data('calendar'); + if (typeof $calendar !== 'undefined') { + $calendar.calendarSetEvent(event); + } + }; + // set many events + $.fn[pluginName + 'SetEvents'] = function(events) { + var $calendar = $(this.get(0)).data('calendar'); + if (typeof $calendar !== 'undefined') { + $.each(events, function(i, event){ + $calendar.calendarSetEvent(event); + }); + } + }; + // clear events for any date + $.fn[pluginName + 'ClearEvents'] = function(dates) { + var $calendar = $(this.get(0)).data('calendar'); + if (typeof $calendar !== 'undefined') { + $calendar.calendarClearEvents(dates); + } + }; + $.fn[pluginName] = function(options) { var elements = options && options.initAll ? $(initAllSelector) : this; return elements.each(function() { From c4d511be00c658b52ff2c82efe5e50462a222b03 Mon Sep 17 00:00:00 2001 From: Volkov Sergey Date: Sat, 16 Mar 2013 19:51:10 +0400 Subject: [PATCH 3/3] calendar plugin --- public/js/modern/calendar.js | 28 +++++++++++++++++++++++++--- 1 file changed, 25 insertions(+), 3 deletions(-) diff --git a/public/js/modern/calendar.js b/public/js/modern/calendar.js index 4f924bacf..b848d1ad7 100644 --- a/public/js/modern/calendar.js +++ b/public/js/modern/calendar.js @@ -33,6 +33,7 @@ * $('#calendar').calendarClearEvents('all') - will remove all events * $('#calendar').calendarClearEvents('2013-03-16') - will remove all events for specified date * $('#calendar').calendarClearEvents(['2013-03-16', '2013-03-17', ...]) - will remove all events for specified dates + * to get events of any date use $('#calendar').calendarGetEvents('2013-03-16') * */ @@ -261,6 +262,13 @@ fillCalendar(); }; + // return array of events for specified date + plugin.getEvents = function (date) { + var mom = date ? moment(date) : moment(); + var dateStr = mom.format('YYYY-MM-DD'); + return calendarEvents[dateStr]; + } + // clearing events // dates: // - string - 'YYYY-MM-DD' - clearing events for this date @@ -290,7 +298,6 @@ plugin.setDate(date); } }; - // sets event $.fn[pluginName + 'SetEvent'] = function(event) { var plugin = $(this.get(0)).data(pluginName); @@ -307,6 +314,13 @@ }); } }; + // get events + $.fn[pluginName + 'GetEvents'] = function(date) { + var plugin = $(this.get(0)).data(pluginName); + if (typeof plugin !== 'undefined') { + return plugin.getEvents(date); + } + }; // clear events for any date $.fn[pluginName + 'ClearEvents'] = function(dates) { var plugin = $(this.get(0)).data(pluginName); @@ -374,6 +388,7 @@ * $('#datepicker').datepickerClearEvents('all') - will remove all events * $('#datepicker').datepickerClearEvents('2013-03-16') - will remove all events for specified date * $('#datepicker').datepickerClearEvents(['2013-03-16', '2013-03-17', ...]) - will remove all events for specified dates + * to get events of any date use $('#datepicker').datepickerGetEvents('2013-03-16') * */ (function($) { @@ -463,12 +478,12 @@ function dateSelected (event, dateString, dateMoment) { hideCalendar(); $input.val(dateMoment.format('ll')); - $input.data('date', dateMoment); + $element.data('date', dateMoment); $input.trigger('date-selected', [dateString, dateMoment]); } function dateSetted (event, dateString, dateMoment) { $input.val(dateMoment.format('ll')); - $input.data('date', dateMoment); + $element.data('date', dateMoment); } plugin.init(); @@ -498,6 +513,13 @@ }); } }; + // get events + $.fn[pluginName + 'GetEvents'] = function(date) { + var $calendar = $(this.get(0)).data('calendar'); + if (typeof $calendar !== 'undefined') { + return $calendar.calendarGetEvents(date); + } + }; // clear events for any date $.fn[pluginName + 'ClearEvents'] = function(dates) { var $calendar = $(this.get(0)).data('calendar');