我正在使用 Fullcalendar 6.1.4 开发 ASP.NEt MVC 应用程序（visual studio 2022 for mac）。单击后，我想更改我的全日历的“月”“周”“日”fc 按钮的背景颜色。 我可以使用 :hover 或 :disabled css 方法更改它们的颜色，但是 :active 方法没有任何反应（:focus 也不起作用）。 你有什么主意吗 ？ 非常感谢!!!!!
这是我用于我的完整日历的代码：
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - CalendarTest</title>
<link href='https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css' rel='stylesheet'>
<link href='https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css' rel='stylesheet'>
<script src='https://cdn.jsdelivr.net/npm/[email protected]/index.global.js'></script>
<script src="https://unpkg.com/[email protected]/dist/boxicons.js"></script>
<script src='fullcalendar/fr.global.js'></script>
<script>var TODAY = new Date(Date.now());
var todayDate = "Today";
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
themeSystem: 'bootstrap5',
headerToolbar: {
left: 'prev,next today',
right: 'dayGridMonth timeGridWeek timeGridDay'
},
initialView: 'timeGridWeek',
initialDate: TODAY,
locale: 'en',
editable: true,
views: {
dayGridMonth: {
titleFormat: { year: 'numeric', month: '2-digit', day: '2-digit' }
},
},
buttonText: {
today: todayDate,
month: 'Month',
week: 'Week',
day: 'Day',
},
firstDay: '1',
events: [
{
title: 'Conference',
start: '2021-04-11',
end: '2021-04-13'
},
{
title: 'Meeting',
start: '2021-04-12T10:30:00',
end: '2021-04-12T12:30:00'
},
{
title: 'Meeting',
start: '2021-04-12T14:30:00'
},
{
title: 'Birthday Party',
start: '2021-04-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2021-04-28'
}
],
businessHours: [
{
daysOfWeek: [1, 2, 3, 4, 5],
startTime: '08:00',
endTime: '19:00'
},
],
eventTimeFormat: {
hour: '2-digit',
minute: '2-digit',
meridiem: false
},
displayEventEnd: true,
});
calendar.render();
});</script>
</head>
<body>
<div class="container">
<main role="main" class="pb-3">
@RenderBody()
</main>
</div>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
@await RenderSectionAsync("Scripts", required: false)
这是我拥有的 css 样式：
.fc .fc-col-header-cell-cushion {
display: inline-block;
padding: 2px 4px;
color: #000;
text-decoration:none;
font-family: "Helvetica Neue", "Arial", sans-serif;
font-weight:400;
}
.fc .fc-button {
background-color: white;
outline:none;
border:none;
border-radius: 12px;
color: lightgrey;
}
.fc .fc-button:hover {
background-color: lightgrey;
color: white;
}
.fc .fc-button:disabled {
background-color: lightgrey;
color: white;
}
.fc .fc-button:active:hover {
background-color:lightgrey;
}
.fc .fc-prevMonth-button,
.fc .fc-nextMonth-button {
font-size: 18px;
}
.fc-button:active {
border-color:none;
color: red;
}