當我查看在 FullCalendar 中更改日單元格的外觀或內容的示例時，它們看起來像這樣：
calendar: {
height: 650,
editable: true,
header: {
left: '',
center: 'prev title next',
right: ''
},
defaultView: 'month',
dayRender: function (date, cell) {
$r = $scope.getDateInfo(date);
if($r){
cell.css("background-color", "#ccf3ff");
}
cell.html('<i ></i>' $r.amount '<br/><i ></i>' $r.users '<br/><i ></i>' $r.income);
}
}
};
但我需要做的與這種情況不同。我對 PHP 后端進行 AJAX 呼叫以回傳假期串列，例如
0 => [
'2022-05-30',
'Memorial Day'
]
執行 AJAX 呼叫的被呼叫函式會傳遞一個 FullCalendar 物件。在成功部分，我可以訪問日歷物件和假期陣列。
我需要做的是在假期訪問單元格并對其進行更改......類似于
let cell = calendar.dayRender('2022-05-30');
cell.css("background-color", "ccf3ff");
cell.text("Memorial Day");
而不是遍歷整個日歷，將單元格日期與所需日期進行比較。
uj5u.com熱心網友回復：
如果您在瀏覽器的 devtools 中查看，檢查 Fullcalendar 生成的源代碼，您會注意到日歷表中的每個單元格都有一個data帶有日期的屬性。非常簡化，它看起來像這樣：
<td ... data-date="2022-04-29" ...>
<a ... aria-label="April 29, 2022">29</a>
</td>
通過 data-attribute 選擇 HTML 元素很容易：
let el = document.querySelector('[data-date="2022-04-29"]');
在與 Fullcalendar 本身為事件所做的相同位置和格式中添加內容可能是有意義的，這意味著將您的內容放在該.fc-daygrid-day-events單元格中的元素內。
我在下面包含了一個作業片段，但是通過手動執行此操作，您將不得不手動重現 Fullcalendar 為手動呈現事件所做的一切。例如，當前是 4 月底，因此 5 月前幾天（在查看 4 月時顯示）之后的任何假期都不會被渲染。如果您導航到 May，它們仍然不會被渲染。每次導航時，您都必須重新運行假期渲染代碼。Fullcalendar 已經為事件自動完成所有這些作業。
另一個問題是您的文本不適合/格式化當天發生的任何其他事件，如果恰好有足夠的 Fullcalendar 通常會隱藏一些并顯示“ 1 more”，則添加假日文本會搞砸的。
您還會遇到樣式問題，background-color除非您使用它，否則設定將不起作用，!important因為它與 Fullcalendar 的樣式沖突。
如果您將假期添加為單獨的事件源，則可以避免這一切。您描述它們已經作為 AJAX 提要提供，因此您可以簡單地將其添加為Event Source，Fullcalendar 將自動處理所有內容。您必須更新提要的格式，但這并不難（無論如何這可能是一個好主意，因為無論如何在其當前的非結構化格式中使用它更難）。
let holidays = [
['2022-04-29', 'Today'],
['2022-05-01', 'May Day'],
['2022-05-30', 'Memorial Day']
];
function addHolidays() {
let cell, events;
for (const holiday of holidays) {
cell = document.querySelector('[data-date="' holiday[0] '"]');
if (cell) {
events = cell.getElementsByClassName('fc-daygrid-day-events')[0];
events.insertAdjacentHTML('beforeend', '<div >' holiday[1] '</div>');
cell.style.setProperty("background-color", "red", "important");;
}
}
}
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth'
});
calendar.render();
addHolidays();
});<script src="https://cdn.jsdelivr.net/npm/[email protected]/main.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/main.min.css">
<div id="calendar"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/467651.html
標籤：javascript 阿贾克斯 全日历
上一篇：通過jQueryAjax呼叫獲取PHP生成影像的問題
下一篇：根據隱藏的輸入值更新表格單元格