<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meeting Room Schedule</title>
<link href='https://cdn.jsdelivr.net/npm/[email protected]/main.min.css' rel='stylesheet' />
<script src='https://cdn.jsdelivr.net/npm/[email protected]/main.min.js'></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 40px;
}
</style>
</head>
<body>
<div id='calendar'></div>
<script src="app.js"></script>
</body>
</html>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
initialView: 'resourceTimeGridWeek',
allDaySlot: false,
slotMinTime: '08:00:00',
slotMaxTime: '21:00:00',
editable: true,
selectable: true,
locale: 'zh-cn', // 设置语言为中文
timeZone: 'local', // 使用本地时间
resources: '/api/rooms', // 从后端获取会议室信息的URL
events: '/api/events', // 从后端获取事件的URL
eventClick: function(info) {
if (confirm("是否要删除这个事件?")) {
fetch(`/api/events/${info.event.id}`, {
method: 'DELETE'
}).then(response => {
if (response.ok) {
info.event.remove();
}
});
}
},
select: function(info) {
var title = prompt('请输入事件标题:');
var reserver = prompt('请输入预约人:');
if (title && reserver) {
var eventData = {
title: title,
start: info.startStr,
end: info.endStr,
resourceId: info.resource.id, // 获取选中的会议室ID
reserver: reserver
};
fetch('/api/events', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(eventData)
})
.then(response => response.json())
.then(data => {
calendar.addEvent({
id: data.id,
title: title,
start: info.startStr,
end: info.endStr,
resourceId: info.resource.id,
extendedProps: {
reserver: reserver
}
});
});
}
calendar.unselect();
},
eventContent: function(arg) {
let customHtml = `
<div class="fc-event-title">${arg.event.title}</div>
<div class="fc-event-time">${arg.timeText}</div>
<div class="fc-event-reserver">预约人: ${arg.event.extendedProps.reserver}</div>
`;
return { html: customHtml };
}
});
calendar.render();
});