[英]Highlight date if it has an event using fullCalendar
我正在嘗試獲取數據庫中的所有事件,並突出顯示UI中具有事件的日期。 現在,我只能使用靜態數據來完成它,並且在我的測試代碼中,它顯示事件名稱,而我想要的是僅突出顯示日期而不顯示事件名稱,我如何獲取它?
$('#calendars').fullCalendar({
height: 395,
header: {
// title, prev, next, prevYear, nextYear, today
left: 'prev',
center: 'title',
right: 'next'
},
events: [
{
title : 'event1',
start : '2019-03-01'
},
{
title : 'event2',
start : '2019-03-05',
},
{
title : 'event3',
start : '2019-03-15'
},
{
title : 'event5',
start : '2019-05-15'
}
],
eventRender: function (event, element, view) {
// like that
var dateString = moment(event.start).format('YYYY-MM-DD');
$('#calendar').find('.fc-day-number[data-date="' + dateString + '"]').css('background-color', '#FAA732');
},
});
結果是這樣的:
我打算使用像這樣的ajax:
events: [
$.ajax({
type: 'GET',
url: '/events',
success: function(events){
//return the result as the events data.
}
});
],
但我不知道如何實現。 這是我的eventController;
public function allEvents(){
$events = Events::whereNotNull('event_date')->get();
return $events;
}
我怎么可能實現我的目標?
您可以嘗試如下操作:
events: function(start, end, timezone, callback) {
$.ajax({
url: "http://yourwebsite.com/events", // complete URL here.. you need to change it
dataType: "json",
type: 'GET',
success: function(data){
callback(data);
},
error: function(error){
console.log("Error:");
console.log(error);
}
})
}
並更改控制器代碼以返回JSON
public function allEvents(){
$events = Events::whereNotNull('event_date')->get();
// make sure events data has title and start values returned from the database.
return response()->json($events);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.