2014-01-16 113 views
0

我正在使用fullcalendar,一旦用戶點擊日期,那天的事件應該顯示在彈出窗口中。Fullcalendar,想要顯示所有事件的日子裏沒有顯示出來

目前我有我的事件列表,我可以顯示當天在日曆上的事件,並使其可點擊。

但是現在我想讓這些事件在dayclick上顯示,而我無法做到。

下面的代碼顯示在日曆上當天的事件:

eventClick: function(event) { 
     $.colorbox({html:"<h1>"+event.title+"</h1><br><p>Tour 
     starts on :"+$.fullCalendar.formatDate(event.start, 
     'yyyy-M-dd')+"<br>Tour type : 
     <a href='http://reservations.valantech.com/order- 
     tour/"+$.fullCalendar.formatDate(event.start,'yyyy-M- 
     dd')+"/"+event.ID+"'>"+event.type+"</a></p>"}); 
}, 

下面的代碼打開一個彈出時的日期被點擊:

dayClick: function(date, allDay, jsEvent, view) { 

     if (allDay) { 
      alert('Clicked on the entire day: ' + date); 
     }else{ 
      alert('Clicked on the slot: ' + date); 
     } 

     alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY); 

     alert('Current view: ' + view.name); 

     // change the day's background color just for fun 
     //$(this).css('background-color', 'red'); 

    }, 

現在,我想這兩個基本融合。

點擊日期應該打開一個彈出窗口,列出當天所有可用的事件。

我試圖做的:

dayClick: function(date, allDay, jsEvent, view) { 
$('#calendar').fullCalendar('clientEvents', function(event) { 
       if(event.start <= date && event.end >= date) { 
        return true; 
       } 
       return false; 
      }); 

但它沒有爲我工作。

+0

嘿,你有沒有得到答案爲dayclick顯示事件?我正在尋找相同的請發佈您的答案謝謝。 –

回答

0

試試這個

dayClick: function(date, allDay, jsEvent, view) { 
$('#calendar').fullCalendar('changeView', 'basicDay'); 
$('#calendar').fullCalendar('gotoDate', date ); 
}; 
+0

它將視圖更改爲日期。在drupal函數中,我通過編寫來顯示事件:drupal_json_output($ events);現在它顯示日曆上的事件,但我想在日期上顯示點擊可以幫助我如何去做 – user3058875

+0

我的問題是我能夠在日曆上顯示它,但我想在日曆上顯示它而不是在日曆上。它在日曆上顯示使用:drupal_json_output($ events); – user3058875

0

它應該是這樣的。 如果返回true將返回實際事件並添加到您的array Array中,您可以更改返回值的條件。 最後你會得到array Array變量與該日期的所有事件。 請根據您的要求檢查條件。

dayClick: function(date, allDay, jsEvent, view) { 
    console.log(date); 
    $('#agenda_calendar').fullCalendar('changeView', 'month'); 
    //$('#agenda_calendar').fullCalendar('gotoDate', date ); 
    var array = $('#agenda_calendar').fullCalendar('clientEvents', function(event){ 
     return (event.start >= date && event.end < date); // May be change 
    }); 
    console.log(array); 
});