前端页面 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会议室预约系统</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<!--    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/5.11.3/main.min.css" />-->
    <style>
        .calendar-container {
            max-width: 900px;
            margin: 0 auto;
        }
        .calendar-table td, .calendar-table th {
            width: 100px;
            height: 100px;
            text-align: center;
            vertical-align: middle;
        }
        .calendar-table th {
            background-color: #f2f2f2;
        }
        .calendar-table td {
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
<div class="container">
    <h1 class="my-4">会议室预约系统</h1>

    <!-- 会议室列表 -->
    <div class="row">
        <div class="col-md-12">
            <ul class="list-group" id="roomList">
                <!-- 会议室将通过JavaScript动态插入 -->
            </ul>
        </div>
    </div>

    <!-- 预约表格 -->
    <div class="row my-4" id="calendarContainer">
        <div class="col-md-12 calendar-container">
            <div id="calendar"></div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/5.11.3/main.min.js"></script>-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="
https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js
"></script>


<script>
    const rooms = [
        { id: 1, name: '会议室 A' },
        { id: 2, name: '会议室 B' },
        { id: 3, name: '会议室 C' }
    ];

    function renderRoomList() {
        const roomList = document.getElementById('roomList');
        rooms.forEach(room => {
            const li = document.createElement('li');
            li.className = 'list-group-item';
            li.textContent = room.name;
            li.dataset.roomId = room.id;
            li.addEventListener('click', () => showCalendar(room.id));
            roomList.appendChild(li);
        });
    }

    function showCalendar(roomId) {
        const calendarContainer = document.getElementById('calendar');
        calendarContainer.innerHTML = ''; // Clear previous calendar

        const calendar = new FullCalendar.Calendar(calendarContainer, {
            initialView: 'dayGridWeek',
            editable: true,
            selectable: true,
            events: fetchEventsForRoom(roomId),
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,dayGridWeek,dayGridDay'
            },
            eventClick: (info) => {
                alert('Event: ' + info.event.title);
            },
            select: (info) => {
                const title = prompt('Enter Event Title:');
                if (title) {
                    calendar.addEvent({
                        title: title,
                        start: info.startStr,
                        end: info.endStr
                    });
                }
            }
        });

        calendar.render();
    }

    function fetchEventsForRoom(roomId) {
        // For demo purposes, we'll generate fake events
        return [
            {
                title: '已预约',
                start: '2024-07-25T08:00:00',
                end: '2024-07-25T09:00:00'
            },
            {
                title: '已预约',
                start: '2024-07-25T10:00:00',
                end: '2024-07-25T11:00:00'
            }
        ];
    }

    document.addEventListener('DOMContentLoaded', () => {
        renderRoomList();
    });
</script>
</body>
</html>
posted @ 2024-07-25 08:08  佬zz  阅读(20)  评论(0)    收藏  举报