我目前正在使用 FullCalendar v3 开发出勤功能。除了显示事件数据之外，我还想通过 API APIHariLibur 显示有关假期的信息。如果该 API 有假期，我想将单元格的背景颜色设置为“rgba(255, 156, 156, 0.2)”。
我已经设法使用以下代码更改背景颜色：
dayRender: function(date, cell) {
var dateString = date.format("YYYY-MM-DD");
// Periksa apakah tanggal tersebut adalah hari libur
if (holidays.includes(dateString)) {
cell.css("background-color", "rgba(255, 156, 156, 0.2)");
}
},
但是，我仍在努力更改日期数字的文本颜色。如何通过前面提到的 API 更改日期的文本颜色以指示这是假期？
完整代码如下：
<div class="card-body">
<div class="fc-overflow">
<div id="myEvent"></div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
axios.get('https://raw.githubusercontent.com/guangrei/APIHariLibur_V2/main/holidays.json')
.then(function (response) {
// Tangani data libur nasional yang Anda ambil di sini
var holidayData = response.data;
// Proses data libur nasional menjadi format yang sesuai
var holidays = [];
for (var date in holidayData) {
var dateString = date;
holidays.push(dateString);
}
// Ambil data acara dari server Anda menggunakan Axios
axios.get('{{ route('events.index') }}')
.then(function (eventResponse) {
// Tangani data acara Anda di sini
var events = eventResponse.data;
const modal = $('#modal-action');
const token = document.head.querySelector('meta[name="csrf-token"]').content;
$("#myEvent").fullCalendar({
height: 'auto',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
dayRender: function(date, cell) {
var dateString = date.format("YYYY-MM-DD");
// Periksa apakah tanggal tersebut adalah hari libur
if (holidays.includes(dateString)) {
cell.css("background-color", "rgba(255, 156, 156, 0.2)");
}
},
events: `{{ route('events.index') }}`,
editable: true,
navLinks: true,
fixedWeekCount: false,
weekNumbers: true,
weekNumbersWithinDays: true,
});
})
})
.catch(function (error) {
console.error('Error fetching holiday data: ' + error);
});
});
</script>
任何有关如何实现这一目标的帮助或指导将不胜感激。谢谢！
就像您将 CSS 应用到单元格的背景颜色一样，您也可以提供文本颜色。
dayRender: function(date, cell) {
var dateString = date.format("YYYY-MM-DD");
// Periksa apakah tanggal tersebut adalah hari libur
if (holidays.includes(dateString)) {
cell.css("background-color", "rgba(255, 156, 156, 0.2)");
cell.css("color", "rgba(255, 156, 156, 0.7)");
}
},
这是一个活生生的例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FullCalendar 3</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.js"></script>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
// FullCalendar options and settings
defaultView: 'month',
eventRender: function(event, element) {
var targetDate = moment('2023-09-14');
if (event.start.isSame(targetDate, 'day')) {
element.css('color', 'red');
}
},
events: [
{
title: 'Event 1',
start: '2023-09-13T10:00:00',
},
{
title: 'Event 2',
start: '2023-09-14T14:00:00',
},
],
});
});
</script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>