标签：function 前端 event error var roomId response
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FullCalendar Example</title>
<!-- 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 引入 FullCalendar 的 CSS 文件 -->
<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>
</head>
<body>
<label for="roomSelect">选择:</label>
<select id="roomSelect">会议室</select>
<!-- FullCalendar 容器 -->
<div id="myCalendar"></div>
<!-- 您的 JavaScript 代码将放在这里 -->
<!--<script src="js/one.js"></script>-->
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('myCalendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'timeGridWeek',
editable: true,
selectable: true,
locale: 'zh-cn',
timeZone: 'local',
events: function(fetchInfo, successCallback, failureCallback) {
var roomId = document.getElementById('roomSelect').value;
if (!roomId) {
failureCallback("Please select a room first.");
return;
}
fetch('/BookId/' + roomId) // 后端API，根据roomId查询事件
.then(response => response.ok ? response.json() : Promise.reject('Failed to fetch events'))
.then(events => {
successCallback(events.map(event => ({
id: event.reservationId,
title: event.topic,
start: event.startTime,
end: event.endTime
})));
})
.catch(error => {
console.error('There was a problem with the fetch operation:', error);
failureCallback(error);
});
},
select: function(selectInfo) {
var roomId = document.getElementById('roomSelect').value; // 获取当前选中的roomId
var title = prompt('Please enter event title:');
if (title) {
var newEvent = {
// 简单的 ID 生成策略
title: title,
start: selectInfo.start,
end: selectInfo.end,
allDay: selectInfo.allDay,
extendedProps: { // 扩展属性，用于存储额外信息
roomId: roomId // 将roomId添加到事件的扩展属性中
}
};
// 将事件添加到日历中
calendar.addEvent(newEvent);
// 调用函数发送请求到后端保存事件
saveEventToBackend(newEvent);
}
selectInfo.jsEvent.preventDefault();
},
});
// 初始化日历
calendar.render();
// 加载会议室列表
function loadRoomList() {
fetch('/rooms') // 后端API，返回会议室列表
.then(response => response.ok ? response.json() : Promise.reject('Failed to fetch rooms'))
.then(rooms => {
var roomSelect = document.getElementById('roomSelect');
roomSelect.innerHTML = ''; // 清空现有选项
rooms.forEach(room => {
var option = document.createElement('option');
option.value = room.room_id;
option.textContent = room.room_name;
roomSelect.appendChild(option);
});
roomSelect.addEventListener('change', function() {
fetchEventsByRoomId(this.value);
});
// 默认选择第一个会议室并加载事件
var defaultRoomId = roomSelect.options[0].value;
calendar.refetchEvents(); // 重新获取事件
})
.catch(error => console.error('Failed to fetch room list:', error));
}
// 事件点击时的处理
calendar.on('eventClick', function(clickInfo) {
var reservationId = clickInfo.event.id;
if (confirm('Are you sure you want to delete this event?')) {
deleteEvent(reservationId).then(() => {
clickInfo.calendar.removeEventById(reservationId); // 从日历中删除事件
});
}
});
// 删除事件的函数
function deleteEvent(reservationId) {
return fetch('/deleteBook/' + reservationId, {
method: 'DELETE',
headers: {
'Content-Type': 'application/json'
}
}).then(function(response) {
if (!response.ok) {
throw new Error('Failed to delete event');
}
return response.text(); // 返回响应的文本
}).then(function(text) {
alert(text); // 显示后端返回的字符串消息
window.location.reload();
}).catch(function(error) {
console.error('Error deleting event:', error);
alert('Error: ' + error.message);
});
}
// 根据roomId查询事件
function fetchEventsByRoomId(roomId) {
if (!roomId) return;
calendar.removeAllEvents(); // 清除日历上的所有事件
fetch('/BookId/' + roomId) // 后端API，根据roomId查询事件
.then(response => response.ok ? response.json() : Promise.reject('Failed to fetch events'))
.then(events => {
events.forEach(event => {
calendar.addEvent({
id: event.reservationId,
title: event.topic,
start: event.startTime,
end: event.endTime
});
});
})
.catch(error => console.error('Failed to fetch events:', error));
}
function saveEventToBackend(eventData) {
// 从事件的扩展属性中获取roomId
var roomId = eventData.extendedProps.roomId;
// 构建请求的body
var body = {
title: eventData.title,
start: eventData.start.toString(),
end: eventData.end.toString(),
roomId: roomId
};
fetch('/addReservation', { // 替换为您的后端API端点
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(body)
})
.then(response => response.json())
.then(response => {
console.log('Event saved successfully', response);
// 事件保存成功后的逻辑
})
.catch(error => {
console.error('Error saving event', error);
// 事件保存失败后的逻辑
});
}
// 初始化操作
loadRoomList();
});
</script>
</body>
</html>
标签：function,
前端,
event,
error,
var,
roomId,
response
From： https://www.cnblogs.com/lz2z/p/18329288