jquery datePicker - 如何将事件放在特定日期并将其显示为工具提示

时间:2011-07-11 10:12:19

标签: jquery jquery-ui jquery-ui-datepicker

我在Jquery UI datepicker中的日期添加事件时遇到问题。

我必须做以下事情:

  • 将事件显示为工具提示

  • onclick分别显示它们,如添加新div

我已经为此完成了以下工作:

(function($){ 

/**  
 * Returns a dictionary, where the keys are the day of the month,  
 * and the value is the text. 
 * @param year - The year of the events. 
 * @param month - The month of the events. 
 * @param calendarID - Events for a specific calendar. 
 */ 
function getMonthEvents(year, month, calendarId){ 
 //   return eventArr;
  return {11: "My birthday.", 23: "My anniversary" }; 
} 

// Receives January->1 
function addTipsys(year, month, calendarId){

   var theEvents = getMonthEvents(year, month, calendarId); 
   var theDateLinks = $('#' + calendarId + ' .ui-datepicker-calendar a'); 

   for(eventDay in theEvents){ 
      // Minus one, because the date in the tipies are regular dates (1-31) 
      // and the links are 0-based. 
        alert(eventDay);
        theDateLinks.eq(eventDay-1)  // select the right link 
        .attr('original-title', theEvents[eventDay])  // set the text 
        .tipsy().css('background-color', '#DC143C');   // init the tipsy, set your properties. 

      // select the right link 
   } 
} 

// Because the the event `onChangeMonthYear` get's called before updating  
// the items, we'll add our code after the elements get rebuilt. We will hook  
// to the `_updateDatepicker` method in the `Datepicker`. 
// Saves the original function. 

var _updateDatepicker_o = $.datepicker._updateDatepicker; 
alert('HI'+$.datepicker.initialized); 
// Replaces the function. 
$.datepicker._updateDatepicker = function(inst){  
   // First we call the original function from the appropiate context. 
  _updateDatepicker_o.apply(this, [inst]);  
   // No we can update the Tipsys. 
   addTipsys(inst.drawYear, inst.drawMonth+1, inst.id); 
}; 

// Finally the calendar initializer. 
$(function(){
   // Creates the date picker, with your options. 
  $("#datepicker").datepicker()
   // Gets the date and initializes the first round of tipsies. 
   var currentDate = $("#datepicker").datepicker('getDate'); 
   // month+1 because the event considers January->1 
   // Last element is null, because, it doesn't actualy get used in the hanlder. 

   addTipsys(currentDate.getYear(), currentDate.getMonth()+1, 'datepicker'); 
}); 

})(jQuery);

但是这里给出了--uncaught exception: Missing instance data for this datepicker --

请指导如何进一步移动

0 个答案:

没有答案