forever/MR.ZLL

<!DOCTYPE html>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>School Calendar</title>
<style>
    body {
        font-family: 'Arial', sans-serif;
        margin: 0;
        padding: 20px;
        background-color: #f4f4f4;
    }

    h1 {
        text-align: center;
        color: #333;
    }

    .calendar-container {
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-top: 20px;
    }

    .week {
        display: flex;
        flex-direction: column;
        gap: 10px;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        padding: 15px;
        width: 100%;
    }

    .day {
        text-align: center;
        padding: 10px;
        border-radius: 5px;
        background-color: #e7e7e7;
        color: #333;
        width: 100%;
    }

    .week-number {
        font-weight: bold;
        margin-bottom: 10px;
        color: #007bff;
    }

    input[type="date"] {
        padding: 10px;
        margin: 10px 0;
        border: 1px solid #ccc;
        border-radius: 5px;
    }

    button {
        padding: 10px 20px;
        background-color: #007bff;
        color: #fff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        margin-top: 10px;
    }

    button:hover {
        background-color: #0056b3;
    }
    .calendar-container {
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-top: 20px;
    }

    .week-header {
        display: flex;
        gap: 10px;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        padding: 15px;
        width: 100%;
    }

    .week-header .day {
        text-align: center;
        padding: 10px;
        border-radius: 5px;
        background-color: #e7e7e7;
        color: #333;
        width: calc(100% / 7 - 20px);
    }

    .week {
        display: flex;
        flex-direction: column;
        gap: 10px;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        padding: 15px;
        width: 100%;
    }

    .week .day {
        text-align: center;
        padding: 10px;
        border-radius: 5px;
        background-color: #e7e7e7;
        color: #333;
        width: calc(100% / 7 - 20px);
    }

    .week-number {
        font-weight: bold;
        margin-bottom: 10px;
        color: #007bff;
    }
    .calendar-table {
        width: 100%;
        border-collapse: collapse;
    }

    .calendar-table th,
    .calendar-table td {
        padding: 10px;
        border: 1px solid #ccc;
        text-align: center;
    }

    .calendar-table th {
        background-color: #f0f0f0;
        font-weight: bold;
    }

    .week-number-cell {
        background-color: #e7e7e7;
        font-weight: bold;
    }

.editable-date {
cursor: pointer;
transition: background-color 0.3s;

}

.editable-date:hover {
background-color: #7e7a7a;

}

.note-editor {
display: none; /* 默认情况下隐藏备注编辑器 */
position: absolute;
background-color: #fff;
border: 1px solid #ccc;
padding: 10px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

}

</style>

<h1>School Calendar</h1>
<div>
    <label for="start-date">Start Date:</label>
    <input type="date" id="start-date">
</div>
<div>
    <label for="end-date">End Date:</label>
    <input type="date" id="end-date">
</div>
<button onclick="generateCalendar()">Generate Calendar</button>
<table id="calendar" class="calendar-table">
    <thead>
        <tr>
            <th>周次</th>
            <th>周一</th>
            <th>周二</th>
            <th>周三</th>
            <th>周四</th>
            <th>周五</th>
            <th>周六</th>
            <th>周日</th>
        </tr>
    </thead>
    <tbody id="calendar-body"></tbody>
    <!-- 备注编辑器表单 -->

<textarea id="note-textarea" rows="3" placeholder="添加备注信息..."></textarea>
<button id="save-note" onclick="saveNote()">保存</button>
<button onclick="cancelNoteEdit()">取消</button>

<button onclick="moveNote('up')">上移</button>
<button onclick="moveNote('down')">下移</button>
<button onclick="copyNote()">复制</button>
<button onclick="swapNote()">交换</button>
<button onclick="deleteNote()">删除</button>
<button onclick="addNote()">增加</button>

</table>

<script>
    let currentEditCell = null;
    let dragging = false;
    let dragOverCell = null;

    function generateCalendar() {
        const startDate = new Date(document.getElementById('start-date').value);
        const endDate = new Date(document.getElementById('end-date').value);
        const calendarBody = document.getElementById('calendar-body');
        calendarBody.innerHTML = ''; // 清空之前的日历内容

        let currentDate = new Date(startDate);
        let weekNumber = 1;
        while (currentDate <= endDate) {
            const row = document.createElement('tr');

            // 添加周次
            const weekNumberCell = document.createElement('td');
            weekNumberCell.className = 'week-number-cell';
            weekNumberCell.textContent = `第${weekNumber}周`;
            row.appendChild(weekNumberCell);

            // 创建一周的日期
            for (let i = 0; i < 7; i++) {
                const cell = document.createElement('td');
                cell.className = 'editable-date';
                cell.textContent = currentDate.getDate();
                cell.setAttribute('data-date', currentDate.toISOString());
                cell.addEventListener('click', () => editNote(cell));
                row.appendChild(cell);

                currentDate.setDate(currentDate.getDate() + 1);
                if (currentDate > endDate) {
                    break;
                }
            }

            calendarBody.appendChild(row);
            weekNumber++;
        }
    }

    function editNote(cell) {
const note = cell.getAttribute('data-note') || '';
const noteEditor = document.getElementById('note-editor');
const noteTextarea = document.getElementById('note-textarea');
noteTextarea.value = note;
noteEditor.style.display = 'block';
noteEditor.style.left = cell.offsetLeft + 'px';
noteEditor.style.top = (cell.offsetTop + cell.offsetHeight) + 'px';
noteEditor.style.width = cell.offsetWidth + 'px';
noteEditor.style.height = cell.offsetHeight + 'px';
currentEditCell = cell; // 设置当前编辑单元格

} function saveNote() {

if (currentEditCell) {
    const noteTextarea = document.getElementById('note-textarea');
    currentEditCell.setAttribute('data-note', noteTextarea.value);
    currentEditCell.textContent += noteTextarea.value ? ' *' : ''; // 在日期旁边添加一个标记，表示有备注
    noteTextarea.value = ''; // 清空文本域
    document.getElementById('note-editor').style.display = 'none'; // 隐藏备注编辑器
    currentEditCell = null; // 重置当前编辑单元格
} else {
    alert('请先选择一个日期单元格来编辑备注信息。');
}

}

    function cancelNoteEdit() {
        const noteEditor = document.getElementById('note-editor');
        noteEditor.style.display = 'none';
        currentEditCell = null;
    }
    function moveNote(direction) {
    if (currentEditCell) {
        const row = currentEditCell.parentElement;
        const cells = Array.from(row.cells);
        const index = cells.indexOf(currentEditCell);
        if (direction === 'up' && index > 1) {
            swapCells(currentEditCell, cells[index - 1]);
        } else if (direction === 'down' && index < cells.length - 1) {
            swapCells(currentEditCell, cells[index + 1]);
        }
    }
}

function swapCells(cell1, cell2) {
    const tempNote = cell1.getAttribute('data-note');
    cell1.setAttribute('data-note', cell2.getAttribute('data-note'));
    cell2.setAttribute('data-note', tempNote);
    const tempText = cell1.textContent;
    cell1.textContent = cell2.textContent;
    cell2.textContent = tempText;
}

function copyNote() {
    if (currentEditCell) {
        const note = currentEditCell.getAttribute('data-note');
        const row = currentEditCell.parentElement;
        const nextCell = row.cells[currentEditCell.cellIndex + 1];
        if (nextCell) {
            nextCell.setAttribute('data-note', note);
            nextCell.textContent += note ? ' *' : '';
        }
    }
}

function swapNote() {
    // 这个功能可能需要更多的上下文来确定如何交换备注信息
    // 例如，可以交换两个相邻日期的备注信息，或者指定两个日期进行交换
    console.error('swapNote function not implemented');
}

function deleteNote() {
    if (currentEditCell) {
        currentEditCell.removeAttribute('data-note');
        currentEditCell.textContent = currentEditCell.textContent.replace(' *', '');
    }
}

function addNote() {
    // 这个功能可能需要更多的上下文来确定如何添加新的备注信息
    // 例如，可以在当前选中的日期旁边添加一个新的空白的备注单元格
    console.error('addNote function not implemented');
}

function handleDragStart(event) {
    currentDragCell = event.target;
    dragging = true;
    event.dataTransfer.effectAllowed = 'move';
    event.dataTransfer.setData('text/plain', currentDragCell.textContent);
}

function handleDragOver(event) {
    if (event.preventDefault) {
        event.preventDefault();
    }
    event.dataTransfer.dropEffect = 'move';
    return false;
}

function handleDragEnter(event) {
    event.target.style.backgroundColor = '#f0f0f0';
    dragOverCell = event.target;
}

function handleDragLeave(event) {
    event.target.style.backgroundColor = '';
    dragOverCell = null;
}
function handleDrop(event) {
if (event.stopPropagation) {
    event.stopPropagation();
}
if (dragging) {
    event.target.style.backgroundColor = '';
    const dragCell = currentDragCell;
    const dragCellNote = dragCell.getAttribute('data-note');
    const dragCellText = dragCell.textContent;
    const targetCell = event.target;
    const targetCellNote = targetCell.getAttribute('data-note');
    const targetCellText = targetCell.textContent;

    // 交换备注信息
    if (dragCellNote && targetCellNote) {
        dragCell.setAttribute('data-note', targetCellNote);
        targetCell.setAttribute('data-note', dragCellNote);
        dragCell.textContent = targetCellText;
        targetCell.textContent = dragCellText;
    }

    // 移动或复制日期单元格
    if (dragCell.parentElement !== targetCell.parentElement) {
        const dragRow = dragCell.parentElement;
        const targetRow = targetCell.parentElement;
        dragRow.removeChild(dragCell);
        targetRow.insertBefore(dragCell, targetRow.children[dragCell.cellIndex]);
    }

    // 更新日期单元格的索引
    dragCell.cellIndex = targetCell.cellIndex;

    // 清除拖动状态
    currentDragCell = null;
    dragging = false;
    dragOverCell = null;
}
return false;

} // 绑定拖放事件 const calendarBody = document.getElementById('calendar-body'); calendarBody.addEventListener('dragstart', handleDragStart); calendarBody.addEventListener('dragover', handleDragOver); calendarBody.addEventListener('dragenter', handleDragEnter); calendarBody.addEventListener('dragleave', handleDragLeave); calendarBody.addEventListener('drop', handleDrop);

</script>