使用FullCalendar做日程安排
以下是一个使用FullCalendar创建日程安排的基本示例代码。请确保你已经引入了FullCalendar的必要CSS和JS文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FullCalendar Example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.css">
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/locales-all.js"></script>
</head>
<body>
<div id="calendar"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
locale: 'en',
editable: true,
selectable: true,
selectMirror: true,
dayMaxEvents: true,
events: [
{ title: 'Event 1', start: '2021-04-01', color: '#378006' },
{ title: 'Event 2', start: '2021-04-07', color: '#378006' }
// more events here...
],
select: function(arg) {
// Handle the date selection
console.log('Selected: ' + arg.startStr + ' to ' + arg.endStr);
var title = prompt('Enter Event Title');
if(title) {
calendar.addEvent({
title: title,
start: arg.start,
allDay: arg.allDay
});
}
calendar.unselect();
}
});
calendar.render();
});
</script>
</body>
</html>这段代码创建了一个日历，并在加载时预设了两个事件。用户可以通过选择日历上的时间区段来添加新的事件。添加事件时，会弹出一个提示框让用户输入事件标题。如果提供了标题，则会在选择的日期上创建一个新的事件。
评论已关闭