搬砖联盟

想要飞的小乌龟

11-29

Java软件开发

前往下载

使用 HTML + JavaScript 实现单会议室周日历管理系统

效果演示该系统通过日历视图的形式展示单个会议室在一周内的使用情况。用户可以选择特定会议室并查看其在本周的预订状态，还能申请新的会议，删除已有会议。系统采用颜色编码来区分不同的会议状态，使用户能够快速识... 查看全文

效果演示

该系统通过日历视图的形式展示单个会议室在一周内的使用情况。用户可以选择特定会议室并查看其在本周的预订状态，还能申请新的会议，删除已有会议。系统采用颜色编码来区分不同的会议状态，使用户能够快速识别会议室的可用性。

页面结构

系统主要包括以下几个功能区域：

控制面板区域

控制面板位于页面顶部，提供会议室选择和基本操作按钮。用户可以通过下拉菜单选择要查看的会议室。

<div class="form">
<select id="roomSel">
<option value="">选择会议室</option>
</select>
<button onclick="search()">查询</button>
<button onclick="openApplyModal()">申请会议</button>
</div>

历展示区域

这是系统的核心展示区域，以表格形式呈现选定会议室在一周内每天的使用情况。

<div id="calendar" class="calendar"></div>

核心功能实现

日历渲染

日历渲染是系统最核心的功能，通过 renderCal 函数实现。该函数负责将会议数据转换为可视化的日历表格：

创建表头行，显示星期和日期信息

为每个时间槽创建一行，显示该时段在每天的会议情况

根据会议持续时间合并单元格，正确显示跨时段的会议

function renderCal(map, days) {
var box = document.getElementById('calendar');
box.innerHTML = '';

var hRow = document.createElement('div');
hRow.className = 'row';
// 使用新的日期格式显示
hRow.innerHTML = '<div class="cell cell-time">时间</div>' +
days.map(d => `<div class="cell cell-time">${d.day}</div>`).join('');
box.appendChild(hRow);

for(var i = 0; i < timeArr.length - 1; i++) {
var row = document.createElement('div');
row.className = 'row';

var html = `<div class="cell">${timeArr[i]} ~ ${timeArr[i+1]}</div>`;

days.forEach(d => {
var key = `${d.date}#${timeArr[i]}`;
if(map[key]) {
var m = map[key];
var colorClass = {1:'yellow', 3:'blue', 4:'pink', 5:'gray'}[m.status];

// 计算会议跨越的单元格数量
var startIndex = timeArr.indexOf(m.start);
var span = m.time;

// 只在会议开始时间渲染会议元素
if (startIndex === i) {
// 计算宽度：跨越的单元格数 * 100% + 边框宽度
var height = `calc(${span * 100}% + ${(span - 1) * 2}px)`;

html += `<div class="cell">
<div class="meeting-container">
<div class="meeting ${colorClass}"
style="width:100%;height: ${height}"
onclick="showMeetingDetail(event, '${m.id}', '${m.date}')">
${m.title}
${m.isCreator === 'true' && [1, 3].includes(m.status) ?
`<button class="close-btn" onclick="delMeet(event,'${m.id}', '${m.date}', '${m.room}')">×</button>` : ''}
</div>
</div>
</div>`;
} else if (i > startIndex && i < startIndex + span) {
// 对于被会议跨越的中间单元格，保持空单元格
html += '<div class="cell"></div>';
} else {
html += '<div class="cell"></div>';
}
} else {
html += '<div class="cell"></div>';
}
});

row.innerHTML = html;
box.appendChild(row);
}
}

完整代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>单会议室周日历</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #f5f5f5;
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 1500px;
margin: 0 auto;
background: white;
border-radius: 15px;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
overflow: hidden;
}
.header {
background: #4a5568;
color: white;
padding: 20px;
text-align: center;
}

.header h1 {
font-size: 24px;
font-weight: 500;
}
.main {
padding: 20px;
}

.form {
display: flex;
gap: 10px;
margin-bottom: 20px;
flex-wrap: wrap;
align-items: center;
}

select, button, input, textarea {
padding: 8px 12px;
border: 1px solid #e0e0e0;
border-radius: 4px;
}

button {
background: #409EFF;
color: white;
border: none;
cursor: pointer;
transition: background 0.3s;
}

button:hover {
opacity: 0.9;
}

.calendar {
width: 100%;
border: 1px solid #e0e0e0;
background: #fff;
border-radius: 4px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.row {
display: table-row;
}

.cell {
display: table-cell;
border: 1px solid #e0e0e0;
text-align: center;
vertical-align: middle;
width: 14.28%;
min-width: 120px;
line-height: 36px;
height: 36px;
position: relative;
}

.cell-time {
width: 14.28%;
min-width: 120px;
color: #2691FF;
font-weight: bold;
background: #fafafa;
}

.meeting-container {
position: relative;
width: 100%;
height: 100%;
}

.meeting {
position: absolute;
top: 0;
left: 0;
height: 36px;
line-height: 36px;
background: #B160DA;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 25px 0 10px;
cursor: pointer;
z-index: 10;
}

.yellow { background: #FFCE1A; }
.blue { background: #409EFF; }
.pink { background: #DE1794; }
.gray { background: #777; }

.close-btn {
position: absolute;
right: 7px;
top: 10px;
transform: translateY(-50%);
width: 16px;
height: 16px;
cursor: pointer;
background: transparent;
border: none;
color: white;
font-weight: bold;
font-size: 16px;
line-height: 1;
padding: 0;
}

.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
}

.modal-content {
background-color: #fff;
margin: 10% auto;
padding: 20px;
border: none;
width: 90%;
max-width: 500px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
cursor: pointer;
line-height: 1;
}

.close:hover {
color: #000;
}

.meeting-detail div {
margin-bottom: 12px;
}

.meeting-detail label {
font-weight: bold;
margin-right: 10px;
display: inline-block;
width: 80px;
}

.legend {
margin: 15px 0;
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}

.legend-item {
display: flex;
align-items: center;
gap: 5px;
}

.legend-color {
width: 20px;
height: 10px;
border-radius: 3px;
}

.apply-form {
margin: 20px 0;
padding: 15px;
border: 1px solid #e0e0e0;
background: #fff;
border-radius: 4px;
}

.apply-form input,
.apply-form textarea,
.apply-form select {
margin-right: 10px;
margin-bottom: 10px;
}

.time-selection {
display: flex;
align-items: center;
gap: 10px;
margin: 15px 0;
}

.time-selection select {
padding: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>单会议室周日历视图</h1>
</div>

<div class="main">
<div class="form">
<select id="roomSel">
<option value="">选择会议室</option>
</select>
<button onclick="search()">查询</button>
<button onclick="openApplyModal()">申请会议</button>
</div>

<div id="applyModal" class="modal">
<div class="modal-content">
<span class="close" onclick="closeApplyModal()">×</span>
<h3>会议申请</h3>
<div class="meeting-detail">
<div>
<label>会议主题:</label>
<input type="text" id="modalMeetingTitle" placeholder="请输入会议主题">
</div>
<div>
<label>会议日期:</label>
<input type="date" id="modalApplyDate">
</div>
<div>
<label>会议室:</label>
<select id="modalApplyRoom">
<option value="">选择会议室</option>
</select>
</div>
<div class="time-selection">
<label>会议时间:</label>
<select id="startTimeSelect"></select>
<span>到</span>
<select id="endTimeSelect"></select>
</div>
<div>
<label>参会人数:</label>
<input type="number" id="modalAttendeeCount" min="1" placeholder="请输入人数">
</div>
<div>
<label>会议内容:</label>
<textarea id="modalMeetingContent" placeholder="请输入会议内容"></textarea>
</div>
<div style="text-align: right; margin-top: 15px;">
<button onclick="closeApplyModal()" style="background:#999">取消</button>
<button onclick="submitMeeting()">提交申请</button>
</div>
</div>
</div>
</div>

<div id="meetingModal" class="modal">
<div class="modal-content">
<span class="close" onclick="closeMeetingModal()">×</span>
<h3>会议详情</h3>
<div class="meeting-detail" id="meetingDetailContent"></div>
</div>
</div>

// 固定的模拟数据
var mockDataByDate = {
'2025-11-25': {
'梅花厅': [
{id: 'm1', start: '09:00', time: 2, status: 1, isCreator: 'true', title: '项目启动会', content: '讨论新项目启动相关事宜', attendeeCount: 15},
{id: 'm2', start: '14:00', time: 3, status: 3, isCreator: 'false', title: '技术评审会', content: '代码和技术方案评审', attendeeCount: 8}
],
// ... 其他数据
},
// ... 其他数据
};

// 用户申请的会议数据
var userMeetings = [];

function getWeekMeetings(room, startDate) {
var meetings = [];
var monday = new Date(startDate);
monday.setDate(monday.getDate() - monday.getDay() + 1);

for(var i = 0; i < 7; i++) {
var date = dayjs(monday).add(i, 'day').format('YYYY-MM-DD');
if(mockDataByDate[date] && mockDataByDate[date][room]) {
mockDataByDate[date][room].forEach(meeting => {
meetings.push({
...meeting,
date: date,
room: room
});
});
}

// 添加用户申请的会议
userMeetings.forEach(meeting => {
if(meeting.date === date && meeting.room === room) {
meetings.push(meeting);
}
});
}
return meetings;
}

function initTimeSelectors() {
var startTimeSelect = document.getElementById('startTimeSelect');
var endTimeSelect = document.getElementById('endTimeSelect');

startTimeSelect.innerHTML = '';
endTimeSelect.innerHTML = '';

timeArr.slice(0, -1).forEach(time => {
var option = document.createElement('option');
option.value = time;
option.textContent = time;
startTimeSelect.appendChild(option);
});

timeArr.slice(1).forEach(time => {
var option = document.createElement('option');
option.value = time;
option.textContent = time;
endTimeSelect.appendChild(option);
});

startTimeSelect.selectedIndex = 0;
endTimeSelect.selectedIndex = 0;

startTimeSelect.onchange = updateEndTimeOptions;
}