一、介绍
FullCalendar 是一个功能强大、高度可定制的 JavaScript 日历组件，用于在网页中显示和管理日历事件。它支持多种视图（月、周、日等），可以轻松集成各种框架，并提供丰富的事件处理功能。
二、实操
案例具体代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FullCalendar 日期选择</title>
<!-- FullCalendar CSS -->
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.css" rel="stylesheet">
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
#calendar {
max-width: 900px;
margin: 0 auto;
}
.selection-info {
margin-top: 20px;
padding: 15px;
background-color: #f0f8ff;
border-radius: 5px;
text-align: center;
font-size: 18px;
}
.highlight {
background-color: #ffeb3b;
}
</style>
</head>
<body>
<div id="calendar"></div>
<div class="selection-info">
<p>您选择的日期是: <strong><span id="selectedDate">请点击日历选择</span></strong></p>
</div>
<!-- FullCalendar JS -->
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/locales/zh-cn.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var selectedDateEl = document.getElementById('selectedDate');
var currentSelectedDate = null;
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
locale: 'zh-cn',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
// 点击日期时触发
dateClick: function(info) {
// 移除之前的高亮
if (currentSelectedDate) {
var prevSelected = document.querySelector('.fc-day[data-date="' + currentSelectedDate + '"]');
if (prevSelected) prevSelected.classList.remove('highlight');
}
// 添加新选择的高亮
info.dayEl.classList.add('highlight');
// 更新选择的日期
currentSelectedDate = info.dateStr;
selectedDateEl.textContent = formatChineseDate(info.date);
// 你也可以在这里执行其他操作，如提交表单等
// console.log('选择的日期:', info.dateStr);
},
// 初始化后添加今天的高亮
datesSet: function() {
if (currentSelectedDate) {
var selectedDay = document.querySelector('.fc-day[data-date="' + currentSelectedDate + '"]');
if (selectedDay) selectedDay.classList.add('highlight');
}
}
});
calendar.render();
// 格式化日期为中文显示
function formatChineseDate(date) {
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var weekdays = ['日', '一', '二', '三', '四', '五', '六'];
var weekday = weekdays[date.getDay()];
return year + '年' + month + '月' + day + '日 星期' + weekday;
}
});
</script>
</body>
</html>效果图如下：
