Ver Mensaje Individual
  #2 (permalink)  
Antiguo 26/01/2012, 16:09
bartman742
 
Fecha de Ingreso: enero-2012
Mensajes: 64
Antigüedad: 12 años, 10 meses
Puntos: 0
Respuesta: calendario jquery

Código Javascript:
Ver original
  1. (function($){
  2.    
  3.     $.fn.extend({
  4.  
  5.         renderCalendar  :   function(s)
  6.         {
  7.             var dc = function(a)
  8.             {
  9.                 return document.createElement(a);
  10.             };
  11.  
  12.             s = $.extend({}, $.fn.datePicker.defaults, s);
  13.            
  14.             if (s.showHeader != $.dpConst.SHOW_HEADER_NONE) {
  15.                 var headRow = $(dc('tr'));
  16.                 for (var i=Date.firstDayOfWeek; i<Date.firstDayOfWeek+7; i++) {
  17.                     var weekday = i%7;
  18.                     var day = Date.dayNames[weekday];
  19.                     headRow.append(
  20.                         jQuery(dc('th')).attr({'scope':'col', 'abbr':day, 'title':day, 'class':(weekday == 0 || weekday == 6 ? 'weekend' : 'weekday')}).html(s.showHeader == $.dpConst.SHOW_HEADER_SHORT ? day.substr(0, 1) : day)
  21.                     );
  22.                 }
  23.             };
  24.            
  25.             var calendarTable = $(dc('table'))
  26.                                     .attr(
  27.                                         {
  28.                                             'cellspacing':2
  29.                                         }
  30.                                     )
  31.                                     .addClass('jCalendar')
  32.                                     .append(
  33.                                         (s.showHeader != $.dpConst.SHOW_HEADER_NONE ?
  34.                                             $(dc('thead'))
  35.                                                 .append(headRow)
  36.                                             :
  37.                                             dc('thead')
  38.                                         )
  39.                                     );
  40.             var tbody = $(dc('tbody'));
  41.            
  42.             var today = (new Date()).zeroTime();
  43.             today.setHours(12);
  44.            
  45.             var month = s.month == undefined ? today.getMonth() : s.month;
  46.             var year = s.year || today.getFullYear();
  47.            
  48.             var currentDate = (new Date(year, month, 1, 12, 0, 0));
  49.            
  50.            
  51.             var firstDayOffset = Date.firstDayOfWeek - currentDate.getDay() + 1;
  52.             if (firstDayOffset > 1) firstDayOffset -= 7;
  53.             var weeksToDraw = Math.ceil(( (-1*firstDayOffset+1) + currentDate.getDaysInMonth() ) /7);
  54.             currentDate.addDays(firstDayOffset-1);
  55.            
  56.             var doHover = function(firstDayInBounds)
  57.             {
  58.                 return function()
  59.                 {
  60.                     if (s.hoverClass) {
  61.                         var $this = $(this);
  62.                         if (!s.selectWeek) {
  63.                             $this.addClass(s.hoverClass);
  64.                         } else if (firstDayInBounds && !$this.is('.disabled')) {
  65.                             $this.parent().addClass('activeWeekHover');
  66.                         }
  67.                     }
  68.                 }
  69.             };
  70.             var unHover = function()
  71.             {
  72.                 if (s.hoverClass) {
  73.                     var $this = $(this);
  74.                     $this.removeClass(s.hoverClass);
  75.                     $this.parent().removeClass('activeWeekHover');
  76.                 }
  77.             };
  78.  
  79.             var w = 0;
  80.             while (w++<weeksToDraw) {
  81.                 var r = jQuery(dc('tr'));
  82.                 var firstDayInBounds = s.dpController ? currentDate > s.dpController.startDate : false;
  83.                 for (var i=0; i<7; i++) {
  84.                     var thisMonth = currentDate.getMonth() == month;
  85.                     var d = $(dc('td'))
  86.                                 .text(currentDate.getDate() + '')
  87.                                 .addClass((thisMonth ? 'current-month ' : 'other-month ') +
  88.                                                     (currentDate.isWeekend() ? 'weekend ' : 'weekday ') +
  89.                                                     (thisMonth && currentDate.getTime() == today.getTime() ? 'today ' : '')
  90.                                 )
  91.                                 .data('datePickerDate', currentDate.asString())
  92.                                 .hover(doHover(firstDayInBounds), unHover)
  93.                             ;
  94.                     r.append(d);
  95.                     if (s.renderCallback) {
  96.                         s.renderCallback(d, currentDate, month, year);
  97.                     }
  98.                    
  99.                     currentDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate()+1, 12, 0, 0);
  100.                 }
  101.                 tbody.append(r);
  102.             }
  103.             calendarTable.append(tbody);
  104.            
  105.             return this.each(
  106.                 function()
  107.                 {
  108.                     $(this).empty().append(calendarTable);
  109.                 }
  110.             );
  111.         },
  112.  
  113.         datePicker : function(s)
  114.         {          
  115.             if (!$.event._dpCache) $.event._dpCache = [];
  116.            
  117.             // initialise the date picker controller with the relevant settings...
  118.             s = $.extend({}, $.fn.datePicker.defaults, s);
  119.            
  120.             return this.each(
  121.                 function()
  122.                 {
  123.                     var $this = $(this);
  124.                     var alreadyExists = true;
  125.                    
  126.                     if (!this._dpId) {
  127.                         this._dpId = $.guid++;
  128.                         $.event._dpCache[this._dpId] = new DatePicker(this);
  129.                         alreadyExists = false;
  130.                     }
  131.                    
  132.                     if (s.inline) {
  133.                         s.createButton = false;
  134.                         s.displayClose = false;
  135.                         s.closeOnSelect = false;
  136.                         $this.empty();
  137.                     }
  138.                    
  139.                     var controller = $.event._dpCache[this._dpId];
  140.                    
  141.                     controller.init(s);
  142.                    
  143.                     if (!alreadyExists && s.createButton) {
  144.                         // create it!
  145.                         controller.button = $('<a href="#" class="dp-choose-date" title="' + $.dpText.TEXT_CHOOSE_DATE + '">' + $.dpText.TEXT_CHOOSE_DATE + '</a>')
  146.                                 .bind(
  147.                                     'click',
  148.                                     function()
  149.                                     {
  150.                                         $this.dpDisplay(this);
  151.                                         this.blur();
  152.                                         return false;
  153.                                     }
  154.                                 );
  155.                         $this.after(controller.button);
  156.                     }
  157.                    
  158.                     if (!alreadyExists && $this.is(':text')) {
  159.                         $this
  160.                             .bind(
  161.                                 'dateSelected',
  162.                                 function(e, selectedDate, $td)
  163.                                 {
  164.                                     this.value = selectedDate.asString();
  165.                                 }
  166.                             ).bind(
  167.                                 'change',
  168.                                 function()
  169.                                 {
  170.                                     if (this.value == '') {
  171.                                         controller.clearSelected();
  172.                                     } else {
  173.                                         var d = Date.fromString(this.value);
  174.                                         if (d) {
  175.                                             controller.setSelected(d, true, true);
  176.                                         }
  177.                                     }
  178.                                 }
  179.                             );
  180.                         if (s.clickInput) {
  181.                             $this.bind(
  182.                                 'click',
  183.                                 function()
  184.                                 {
  185.                                     // The change event doesn't happen until the input loses focus so we need to manually trigger it...
  186.                                     $this.trigger('change');
  187.                                     $this.dpDisplay();
  188.                                 }
  189.                             );
  190.                         }
  191.                         var d = Date.fromString(this.value);
  192.                         if (this.value != '' && d) {
  193.                             controller.setSelected(d, true, true);
  194.                         }
  195.                     }
  196.                    
  197.                     $this.addClass('dp-applied');
  198.                    
  199.                 }
  200.             )
  201.         },