突出顯示特定的日子

Question

我想強調某些天，然後能夠捕獲點擊這樣的日子事件（通過AJAX飼料我可以設計我喜歡的獲得）：

我有看看events handler，但它顯然是設計來顯示個人事件，我不知道是否可以調整，以做我想做的事情。你能想出一種方法來爲這些日子添加一個類名，然後用CSS來設置它的樣式嗎？

我正在使用FullCalendar v2.3.2（升級不是一個真正的選擇，因爲它已經在網站上使用了）。

Answer 1

我修改了一個假裝ajax調用，..基本上等待1秒，就好像做了一個ajax調用等，然後重新呈現。

唯一不好的是我如何完成刷新，可能有更好的方法。渲染方法不會重新渲染視圖。

然後，您可以通過從ajax獲得的數據修改其他內容。

var dtoday = moment().dayOfYear(); 
 
var days = []; 
 

 
function pretendAjax() { 
 
    setTimeout(function() { 
 
    days = [dtoday - 2, dtoday + 2]; 
 
    //force calendar refresh, there might be a better 
 
    //way than below, but will do for now 
 
    $('#calendar').fullCalendar('changeView','basicWeek'); 
 
    $('#calendar').fullCalendar('changeView','month'); 
 
    }, 1000); 
 
} 
 

 

 
$('#calendar').fullCalendar({ 
 
    dayRender: function (date, cell) { 
 
    var dofyear = date.dayOfYear(); 
 
    if (days.indexOf(dofyear) >= 0) { 
 
     cell.css({backgroundColor: 'pink'}); 
 
    } 
 
    }, 
 
}); 
 

 
pretendAjax();

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.2/moment.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.js"></script> 
 
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.css' /> 
 

 

 
<div id='calendar'></div>

Answer 2

我撰寫這段醜陋的黑客攻擊，這是對概念主要是一個證明，揭示了我的FullCalendar API的深無知和仍然需要優化的手（例如，我們應該刪除引用到不再存在的細胞）。

我在濫用最初的dayRender執行來將單元格存儲在自定義變量中。然後，我可以根據自己的喜好訪問該變量，並將我選擇的任何jQuery函數應用於鏈接單元格，這是一個很好的舊jQuery對象。

var days = {}; 
 
$('#calendar').fullCalendar({ 
 
    dayRender: function (date, cell) { 
 
     days[date.toISOString()] = cell; 
 
    }, 
 
    events: function(start, end, timezone, callback){ 
 
     // Emulated AJAX response 
 
     var data = [ 
 
      start.add(1, "days").format("YYYY-MM-DD"), 
 
      start.add(2, "days").format("YYYY-MM-DD"), 
 
      start.add(5, "days").format("YYYY-MM-DD") 
 
     ]; 
 
     $.map(data, function(elementOfArray){ 
 
      days[elementOfArray].addClass("has-stuff"); 
 
      callback([]); 
 
     }); 
 
    } 
 
});

.has-stuff { 
 
    background-color: yellow !important; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.2/moment.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.js"></script> 
 
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.css' /> 
 

 

 
<div id='calendar'></div>

優化之外，其門坎需要額外的工作來落實上突出顯示天點擊事件。

學分轉到基思爲最初的片段骨架，錯誤都是我的。