首页>>Jquery文字>>日历日程安排表(2014-08-27)

日历日程安排表

日历日程安排表
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

JavaScript Code
  1. (function ($) {  
  2.   
  3.     var eCalendar = function (options, object) {  
  4.         // Initializing global variables  
  5.         var adDay = new Date().getDate();  
  6.         var adMonth = new Date().getMonth();  
  7.         var adYear = new Date().getFullYear();  
  8.         var dDay = adDay;  
  9.         var dMonth = adMonth;  
  10.         var dYear = adYear;  
  11.         var instance = object;  
  12.   
  13.         var settings = $.extend({}, $.fn.eCalendar.defaults, options);  
  14.   
  15.         function lpad(value, length, pad) {  
  16.             if (typeof pad == 'undefined') {  
  17.                 pad = '0';  
  18.             }  
  19.             var p;  
  20.             for (var i = 0; i < length; i++) {  
  21.                 p += pad;  
  22.             }  
  23.             return (p + value).slice(-length);  
  24.         }  
  25.   
  26.         var mouseOver = function () {  
  27.             $(this).addClass('c-nav-btn-over');  
  28.         };  
  29.         var mouseLeave = function () {  
  30.             $(this).removeClass('c-nav-btn-over');  
  31.         };  
  32.         var mouseOverEvent = function () {  
  33.             $(this).addClass('c-event-over');  
  34.             var d = $(this).attr('data-event-day');  
  35.             $('div.c-event-item[data-event-day="' + d + '"]').addClass('c-event-over');  
  36.         };  
  37.         var mouseLeaveEvent = function () {  
  38.             $(this).removeClass('c-event-over')  
  39.             var d = $(this).attr('data-event-day');  
  40.             $('div.c-event-item[data-event-day="' + d + '"]').removeClass('c-event-over');  
  41.         };  
  42.         var mouseOverItem = function () {  
  43.             $(this).addClass('c-event-over');  
  44.             var d = $(this).attr('data-event-day');  
  45.             $('div.c-event[data-event-day="' + d + '"]').addClass('c-event-over');  
  46.         };  
  47.         var mouseLeaveItem = function () {  
  48.             $(this).removeClass('c-event-over')  
  49.             var d = $(this).attr('data-event-day');  
  50.             $('div.c-event[data-event-day="' + d + '"]').removeClass('c-event-over');  
  51.         };  
  52.         var nextMonth = function () {  
  53.             if (dMonth < 11) {  
  54.                 dMonth++;  
  55.             } else {  
  56.                 dMonth = 0;  
  57.                 dYear++;  
  58.             }  
  59.             print();  
  60.         };  
  61.         var previousMonth = function () {  
  62.             if (dMonth > 0) {  
  63.                 dMonth--;  
  64.             } else {  
  65.                 dMonth = 11;  
  66.                 dYear--;  
  67.             }  
  68.             print();  
  69.         };  
  70.   
  71.         function loadEvents() {  
  72.             if (typeof settings.url != 'undefined' && settings.url != '') {  
  73.                 $.ajax({url: settings.url,  
  74.                     async: false,  
  75.                     success: function (result) {  
  76.                         settings.events = result;  
  77.                     }  
  78.                 });  
  79.             }  
  80.         }  
  81.   
  82.         function print() {  
  83.             loadEvents();  
  84.             var dWeekDayOfMonthStart = new Date(dYear, dMonth, 1).getDay();  
  85.             var dLastDayOfMonth = new Date(dYear, dMonth + 1, 0).getDate();  
  86.             var dLastDayOfPreviousMonth = new Date(dYear, dMonth + 1, 0).getDate() - dWeekDayOfMonthStart + 1;  
  87.   
  88.             var cBody = $('<div/>').addClass('c-grid');  
  89.             var cEvents = $('<div/>').addClass('c-event-grid');  
  90.             var cEventsBody = $('<div/>').addClass('c-event-body');  
  91.             cEvents.append($('<div/>').addClass('c-event-title c-pad-top').html(settings.eventTitle));  
  92.             cEvents.append(cEventsBody);  
  93.             var cNext = $('<div/>').addClass('c-next c-grid-title c-pad-top');  
  94.             var cMonth = $('<div/>').addClass('c-month c-grid-title c-pad-top');  
  95.             var cPrevious = $('<div/>').addClass('c-previous c-grid-title c-pad-top');  
  96.             cPrevious.html(settings.textArrows.previous);  
  97.             cMonth.html(settings.months[dMonth] + ' ' + dYear);  
  98.             cNext.html(settings.textArrows.next);  
  99.   
  100.             cPrevious.on('mouseover', mouseOver).on('mouseleave', mouseLeave).on('click', previousMonth);  
  101.             cNext.on('mouseover', mouseOver).on('mouseleave', mouseLeave).on('click', nextMonth);  
  102.   
  103.             cBody.append(cPrevious);  
  104.             cBody.append(cMonth);  
  105.             cBody.append(cNext);  
  106.             for (var i = 0; i < settings.weekDays.length; i++) {  
  107.                 var cWeekDay = $('<div/>').addClass('c-week-day c-pad-top');  
  108.                 cWeekDay.html(settings.weekDays[i]);  
  109.                 cBody.append(cWeekDay);  
  110.             }  
  111.             var day = 1;  
  112.             var dayOfNextMonth = 1;  
  113.             for (var i = 0; i < 42; i++) {  
  114.                 var cDay = $('<div/>');  
  115.                 if (i < dWeekDayOfMonthStart) {  
  116.                     cDay.addClass('c-day-previous-month c-pad-top');  
  117.                     cDay.html(dLastDayOfPreviousMonth++);  
  118.                 } else if (day <= dLastDayOfMonth) {  
  119.                     cDay.addClass('c-day c-pad-top');  
  120.                     if (day == dDay && adMonth == dMonth && adYear == dYear) {  
  121.                         cDay.addClass('c-today');  
  122.                     }  
  123.                     for (var j = 0; j < settings.events.length; j++) {  
  124.                         var d = settings.events[j].datetime;  
  125.                         if (d.getDate() == day && (d.getMonth() - 1) == dMonth && d.getFullYear() == dYear) {  
  126.                             cDay.addClass('c-event').attr('data-event-day', d.getDate());  
  127.                             cDay.on('mouseover', mouseOverEvent).on('mouseleave', mouseLeaveEvent);  
  128.                         }  
  129.                     }  
  130.                     cDay.html(day++);  
  131.                 } else {  
  132.                     cDay.addClass('c-day-next-month c-pad-top');  
  133.                     cDay.html(dayOfNextMonth++);  
  134.                 }  
  135.                 cBody.append(cDay);  
  136.             }  
  137.             var eventList = $('<div/>').addClass('c-event-list');  
  138.             for (var i = 0; i < settings.events.length; i++) {  
  139.                 var d = settings.events[i].datetime;  
  140.                 if ((d.getMonth() - 1) == dMonth && d.getFullYear() == dYear) {  
  141.                     var date = lpad(d.getDate(), 2) + '/' + lpad(d.getMonth(), 2) + ' ' + lpad(d.getHours(), 2) + ':' + lpad(d.getMinutes(), 2);  
  142.                     var item = $('<div/>').addClass('c-event-item');  
  143.                     var title = $('<div/>').addClass('title').html(date + '  ' + settings.events[i].title + '<br/>');  
  144.                     var description = $('<div/>').addClass('description').html(settings.events[i].description + '<br/>');  
  145.                     item.attr('data-event-day', d.getDate());  
  146.                     item.on('mouseover', mouseOverItem).on('mouseleave', mouseLeaveItem);  
  147.                     item.append(title).append(description);  
  148.                     eventList.append(item);  
  149.                 }  
  150.             }  
  151.             $(instance).addClass('calendar');  
  152.             cEventsBody.append(eventList);  
  153.             $(instance).html(cBody).append(cEvents);  
  154.         }  
  155.   
  156.         return print();  
  157.     }  
  158.   
  159.     $.fn.eCalendar = function (oInit) {  
  160.         return this.each(function () {  
  161.             return eCalendar(oInit, $(this));  
  162.         });  
  163.     };  
  164.   
  165.     // plugin defaults  
  166.     $.fn.eCalendar.defaults = {  
  167.         weekDays: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'],  
  168.         months: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],  
  169.         textArrows: {previous: '<', next: '>'},  
  170.         eventTitle: 'Eventos',  
  171.         url: '',  
  172.         events: [  
  173.             {title: 'Brasil x Croácia', description: 'Abertura da copa do mundo 2014', datetime: new Date(2014, 8, 13, 17)},  
  174.             {title: 'Brasil x México', description: 'Segundo jogo da seleção brasileira', datetime: new Date(2014, 8, 25, 16)},  
  175.             {title: 'Brasil x Camarões', description: 'Terceiro jogo da seleção brasileira', datetime: new Date(2014, 9, 23, 16)},  
  176.             {title: 'Brasil x Camarões', description: 'Terceiro jogo da seleção brasileira', datetime: new Date(2014, 10, 15, 16)},  
  177.             {title: 'Brasil x Camarões', description: 'Terceiro jogo da seleção brasileira', datetime: new Date(2014, 11, 10, 16)},  
  178.             {title: 'Brasil x Camarões', description: 'Terceiro jogo da seleção brasileira', datetime: new Date(2014, 12, 8, 16)},  
  179.             {title: 'Brasil x Camarões', description: 'Terceiro jogo da seleção brasileira', datetime: new Date(2015, 1,28, 16)},  
  180.             {title: 'Brasil x Camarões', description: 'Terceiro jogo da seleção brasileira', datetime: new Date(2015, 2, 17, 16)}  
  181.         ]  
  182.     };  
  183.   
  184. }(jQuery));  

 


原文地址:http://www.freejs.net/article_jquerywenzi_418.html