Merehim 10 hours ago

Мини система web управления графиком смен сотрудников

28 min

603

Может быть, кому-то пригодится.
Кадровики у нас ленивые (а может, просто не умеют) постоянно формировать график для сменных дежурных. Я понимаю, что в Excel такой табель заполняется за 5 минут, но мне захотелось сделать это проще.
Я выбрал XAMPP — просто и быстро. Думаю, его установка не составит труда.
В моём случае каталог для проекта назвал schedule.

Набор скриптов и шаблонов

HTML-шаблоны

Сделал два шаблона:

Для работы с графиком
Для печатной формы

Первый шаблон (index.php, лежит в корне проекта):

<?php include 'includes/db.php'; ?>
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>График смен</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="container">
    <div class="nav-tabs">
      <a class="active" onclick="showTab('schedule')">График смен</a>
	<a href="view_schedule.php" target="_blank">Версия для печати</a>
      <a onclick="showTab('employees')">Сотрудники</a>
    </div>

    <div id="schedule-tab" class="tab-content active">
      <h2>График смен на <span id="current-month"></span></h2>
      <div class="controls">
        <button onclick="addEmployeeRow()">Добавить строку</button>
		<button onclick="autoGenerateSelectedRow()">Сгенерировать график 2/2</button>
      </div>
      <div class="schedule-wrapper">
        <table id="schedule-table">
          <thead id="schedule-header">
            <tr>
              <th>Сотрудник</th>
              <!-- Динамические заголовки дат -->
            </tr>
          </thead>
          <tbody id="schedule-body">
            <!-- Строки будут добавляться динамически -->
          </tbody>
        </table>
      </div>
    </div>

    <div id="employees-tab" class="tab-content">
      <h2>Управление сотрудниками</h2>
      <div class="employee-form">
        <input type="text" id="new-fullname" placeholder="ФИО сотрудника">
        <button onclick="addEmployee()">Добавить</button>
      </div>
      <div class="employee-list">
        <select id="employee-list" size="8" multiple></select>
        <button onclick="removeEmployee()">Удалить выбранных</button>
      </div>
      
      <div class="status-controls">
        <h3>Установка статуса</h3>
        <select id="status-employee"></select>
        <label>С: <input type="date" id="date-from"></label>
        <label>По: <input type="date" id="date-to"></label>
        <button onclick="setStatus('vacation')">Отпуск</button>
        <button onclick="setStatus('sick_leave')">Больничный</button>
      </div>
    </div>
  </div>

  <script src="js/main.js"></script>
  <script src="js/schedule.js"></script>
  <script src="js/employees.js"></script>
</body>
</html>

На основной странице два раздела:
Сам график
Управление сотрудниками (добавление, удаление, установка статусов: больничный и отпуск)

Скрипты для работы с сотрудниками и статусами

add_employee.php (добавление сотрудников, лежит в schedule/api):

<?php
include '../includes/db.php';
header('Content-Type: application/json');

$data = json_decode(file_get_contents("php://input"), true);
$fullname = trim($data['fullname']);

if (empty($fullname)) {
    http_response_code(400);
    echo json_encode(['error' => 'Fullname is required']);
    exit;
}

$stmt = $conn->prepare("INSERT INTO employees (fullname) VALUES (?)");
$stmt->bind_param("s", $fullname);

if ($stmt->execute()) {
    echo json_encode(['success' => true, 'id' => $stmt->insert_id]);
} else {
    http_response_code(500);
    echo json_encode(['error' => 'Database error']);
}
?>

delete_employee.php (удаление сотрудника, лежит в schedule/api):

<?php
include '../includes/db.php';
header('Content-Type: application/json');

$data = json_decode(file_get_contents("php://input"), true);
$id = (int)$data['id'];

$stmt = $conn->prepare("DELETE FROM employees WHERE id = ?");
$stmt->bind_param("i", $id);

if ($stmt->execute()) {
    echo json_encode(['success' => true]);
} else {
    http_response_code(500);
    echo json_encode(['error' => 'Database error']);
}
?>

get_schedule.php (возвращает график смен сотрудников для отображения расписания, включая статусы, лежит в schedule/api):

<?php
include '../includes/db.php';
header('Content-Type: application/json');

try {
    $result = [];
    
    // Получаем всех сотрудников
    $employees = $conn->query("SELECT id, fullname FROM employees ORDER BY fullname");
    
    // Подготавливаем запросы заранее
    $shiftQuery = $conn->prepare("SELECT shift_date, shift_type FROM shifts WHERE employee_id = ?");
    $statusQuery = $conn->prepare("SELECT start_date, end_date, status_type FROM employee_status WHERE employee_id = ?");
    
    while ($emp = $employees->fetch_assoc()) {
        $emp_id = $emp['id'];
        $schedule = []; // Объединенные данные смен и статусов
        
        // Получаем смены
        $shiftQuery->bind_param("i", $emp_id);
        $shiftQuery->execute();
        $shifts = $shiftQuery->get_result()->fetch_all(MYSQLI_ASSOC);
        
        foreach ($shifts as $shift) {
            $schedule[$shift['shift_date']] = [
                'type' => $shift['shift_type'],
                'is_status' => false
            ];
        }
        
        // Получаем статусы
        $statusQuery->bind_param("i", $emp_id);
        $statusQuery->execute();
        $statuses = $statusQuery->get_result()->fetch_all(MYSQLI_ASSOC);
        
        foreach ($statuses as $status) {
            $start = new DateTime($status['start_date']);
            $end = new DateTime($status['end_date']);
            
            // Перебираем все даты периода статуса (включая последний день)
            for ($date = $start; $date <= $end; $date->modify('+1 day')) {
                $dateStr = $date->format('Y-m-d');
                $schedule[$dateStr] = [
                    'type' => $status['status_type'],
                    'is_status' => true
                ];
            }
        }
        
        // Формируем результат только с типами (статусы перезаписывают смены)
        $formattedShifts = [];
        foreach ($schedule as $date => $item) {
            $formattedShifts[$date] = $item['type'];
        }
        
        $result[] = [
            "id" => $emp_id,
            "fullname" => $emp['fullname'],
            "shifts" => $formattedShifts
        ];
    }
    
    echo json_encode($result);
    
} catch (Exception $e) {
    http_response_code(500);
    echo json_encode(['error' => 'Database error: ' . $e->getMessage()]);
}
?>

get_employees.php (отображение списка сотрудников, лежит в schedule/api):

<?php
include '../includes/db.php';
header('Content-Type: application/json');

$result = $conn->query("SELECT id, fullname FROM employees ORDER BY fullname");
$employees = [];

while ($row = $result->fetch_assoc()) {
    $employees[] = $row;
}

echo json_encode($employees);

?>

save_auto_schedule.php (автоматическое сохранение графика после генерации, лежит в schedule/api):

<?php
include '../includes/db.php';
header('Content-Type: application/json');

$data = json_decode(file_get_contents("php://input"), true);
$employeeId = $data['employee_id'];
$shifts = $data['shifts'];

try {
    $conn->begin_transaction();
    
    foreach ($shifts as $shift) {
        $stmt = $conn->prepare("INSERT INTO shifts (employee_id, shift_date, shift_type) 
                              VALUES (?, ?, ?)
                              ON DUPLICATE KEY UPDATE shift_type = VALUES(shift_type)");
        $stmt->bind_param("iss", $employeeId, $shift['date'], $shift['shiftType']);
        $stmt->execute();
    }
    
    $conn->commit();
    echo json_encode(['success' => true]);
} catch (Exception $e) {
    $conn->rollback();
    http_response_code(500);
    echo json_encode(['success' => false, 'message' => $e->getMessage()]);
}
?>

set_schedule.php (установка и обновление графика для сотрудника, лежит в schedule/api):

<?php
include '../includes/db.php';
include '../includes/functions.php';

header('Content-Type: application/json');

$data = json_decode(file_get_contents("php://input"), true);
$employeeId = $data['employee_id'];
$date = $data['date'];
$shiftType = $data['shift_type'];

if (!employeeExists($employeeId)) {
    echo json_encode(['success' => false, 'message' => 'Сотрудник не найден']);
    exit;
}

if (!validateDate($date)) {
    echo json_encode(['success' => false, 'message' => 'Неверный формат даты']);
    exit;
}

if (!in_array($shiftType, ['day', 'night', 'off'])) {
    echo json_encode(['success' => false, 'message' => 'Неверный тип смены']);
    exit;
}

$stmt = $conn->prepare("SELECT id FROM shifts WHERE employee_id = ? AND shift_date = ?");
$stmt->bind_param("is", $employeeId, $date);
$stmt->execute();
$result = $stmt->get_result();

if ($result->num_rows > 0) {
    $stmt = $conn->prepare("UPDATE shifts SET shift_type = ? WHERE employee_id = ? AND shift_date = ?");
    $stmt->bind_param("sis", $shiftType, $employeeId, $date);
} else {
    $stmt = $conn->prepare("INSERT INTO shifts (employee_id, shift_date, shift_type) VALUES (?, ?, ?)");
    $stmt->bind_param("iss", $employeeId, $date, $shiftType);
}

if ($stmt->execute()) {
    echo json_encode(['success' => true]);
} else {
    echo json_encode(['success' => false, 'message' => 'Ошибка базы данных']);
}
?>

set_status.php (установка статуса для сотрудника за период, лежит в schedule/api):

<?php
include '../includes/db.php';
header('Content-Type: application/json');

$data = json_decode(file_get_contents("php://input"), true);
$employee_id = (int)$data['employee_id'];
$start_date = $data['start_date'];
$end_date = $data['end_date'];
$status_type = $data['status_type'];

if (empty($employee_id) || empty($start_date) || empty($end_date) || empty($status_type)) {
    http_response_code(400);
    echo json_encode(['error' => 'All fields are required']);
    exit;
}

$stmt = $conn->prepare("DELETE FROM shifts WHERE employee_id = ? AND shift_date BETWEEN ? AND ?");
$stmt->bind_param("iss", $employee_id, $start_date, $end_date);
$stmt->execute();

$stmt = $conn->prepare("INSERT INTO employee_status (employee_id, start_date, end_date, status_type) VALUES (?, ?, ?, ?)");
$stmt->bind_param("isss", $employee_id, $start_date, $end_date, $status_type);

if ($stmt->execute()) {
    echo json_encode(['success' => true]);
} else {
    http_response_code(500);
    echo json_encode(['error' => 'Database error']);
}
?>

status.php (взаимодействие с БД, лежит в schedule/api):

<?php
include '../includes/db.php';
include '../includes/functions.php';

header('Content-Type: application/json');

$method = $_SERVER['REQUEST_METHOD'];

switch ($method) {
    case 'GET':
        getEmployeeStatus();
        break;
    case 'POST':
        setEmployeeStatus();
        break;
    case 'DELETE':
        removeEmployeeStatus();
        break;
    default:
        http_response_code(405);
        echo json_encode(['error' => 'Method not allowed']);
}

function getEmployeeStatus() {
    global $conn;
    
    $employeeId = isset($_GET['employee_id']) ? (int)$_GET['employee_id'] : null;
    $date = isset($_GET['date']) ? $_GET['date'] : null;
    
    $sql = "SELECT es.*, e.fullname 
            FROM employee_status es
            JOIN employees e ON es.employee_id = e.id";
    
    $conditions = [];
    $params = [];
    $types = '';
    
    if ($employeeId) {
        $conditions[] = "employee_id = ?";
        $params[] = $employeeId;
        $types .= 'i';
    }
    
    if ($date) {
        $conditions[] = "? BETWEEN start_date AND end_date";
        $params[] = $date;
        $types .= 's';
    }
    
    if (!empty($conditions)) {
        $sql .= " WHERE " . implode(" AND ", $conditions);
    }
    
    $stmt = $conn->prepare($sql);
    
    if (!empty($params)) {
        $stmt->bind_param($types, ...$params);
    }
    
    $stmt->execute();
    $result = $stmt->get_result();
    $statuses = [];
    
    while ($row = $result->fetch_assoc()) {
        $statuses[] = $row;
    }
    
    echo json_encode($statuses);
}

function setEmployeeStatus() {
    global $conn;
    
    $data = json_decode(file_get_contents("php://input"), true);
    
    $errors = [];
    
    if (empty($data['employee_id'])) {
        $errors[] = 'Employee ID is required';
    }
    
    if (empty($data['start_date']) || !validateDate($data['start_date'])) {
        $errors[] = 'Valid start date is required';
    }
    
    if (empty($data['end_date']) || !validateDate($data['end_date'])) {
        $errors[] = 'Valid end date is required';
    }
    
    if (empty($data['status_type']) || !in_array($data['status_type'], ['vacation', 'sick_leave'])) {
        $errors[] = 'Valid status type is required (vacation or sick_leave)';
    }
    
    if (!empty($errors)) {
        http_response_code(400);
        echo json_encode(['errors' => $errors]);
        return;
    }
    
    if (!employeeExists($data['employee_id'])) {
        http_response_code(404);
        echo json_encode(['error' => 'Employee not found']);
        return;
    }
    
    $deleteStmt = $conn->prepare("DELETE FROM shifts WHERE employee_id = ? AND shift_date BETWEEN ? AND ?");
    $deleteStmt->bind_param("iss", $data['employee_id'], $data['start_date'], $data['end_date']);
    $deleteStmt->execute();
    
    $insertStmt = $conn->prepare("INSERT INTO employee_status (employee_id, start_date, end_date, status_type) VALUES (?, ?, ?, ?)");
    $insertStmt->bind_param("isss", $data['employee_id'], $data['start_date'], $data['end_date'], $data['status_type']);
    
    if ($insertStmt->execute()) {
        echo json_encode(['success' => true, 'id' => $insertStmt->insert_id]);
    } else {
        http_response_code(500);
        echo json_encode(['error' => 'Database error']);
    }
}

function removeEmployeeStatus() {
    global $conn;
    
    $statusId = isset($_GET['id']) ? (int)$_GET['id'] : null;
    
    if (!$statusId) {
        http_response_code(400);
        echo json_encode(['error' => 'Status ID is required']);
        return;
    }
    
    $stmt = $conn->prepare("DELETE FROM employee_status WHERE id = ?");
    $stmt->bind_param("i", $statusId);
    
    if ($stmt->execute()) {
        echo json_encode(['success' => true]);
    } else {
        http_response_code(500);
        echo json_encode(['error' => 'Database error']);
    }
}
?>

Скрипты выполняют следующие операции:
Добавление сотрудников в систему
Генерацию рабочих графиков
Установку статусов сотрудников на заданный период
Особенности работы со статусами:
Функция set_status имеет приоритет над статусами смен в графике. Это означает, что если сотрудник, например, находится в отпуске с 1 по 10 число, система не будет проставлять ему рабочие смены на этот период.

Теперь немного JavaScript:
employees.js (обработка действий пользователя: добавление, удаление, установка статусов, лежит в schedule/js):

function fetchEmployees() {
  fetch('api/get_employees.php')
    .then(response => response.json())
    .then(data => {
      const employeeList = document.getElementById('employee-list');
      const statusEmployee = document.getElementById('status-employee');
      
      employeeList.innerHTML = '';
      statusEmployee.innerHTML = '';
      
      data.forEach(employee => {
        const option1 = document.createElement('option');
        option1.value = employee.id;
        option1.textContent = employee.fullname;
        employeeList.appendChild(option1);
        
        const option2 = document.createElement('option');
        option2.value = employee.id;
        option2.textContent = employee.fullname;
        statusEmployee.appendChild(option2);
      });
    });
}

function addEmployee() {
  const fullname = document.getElementById('new-fullname').value.trim();
  
  if (!fullname) {
    alert('Введите ФИО сотрудника');
    return;
  }
  
  fetch('api/add_employee.php', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ fullname: fullname })
  })
  .then(response => {
    if (!response.ok) throw new Error('Ошибка сервера');
    return response.json();
  })
  .then(() => {
    document.getElementById('new-fullname').value = '';
    fetchEmployees();
  })
  .catch(error => {
    console.error('Error:', error);
    alert('Ошибка при добавлении сотрудника');
  });
}

function removeEmployee() {
  const employeeList = document.getElementById('employee-list');
  const selectedOptions = Array.from(employeeList.selectedOptions);
  
  if (selectedOptions.length === 0) {
    alert('Выберите сотрудников для удаления');
    return;
  }
  
  if (!confirm(`Удалить ${selectedOptions.length} сотрудников?`)) {
    return;
  }
  
  const promises = selectedOptions.map(option => {
    return fetch('api/delete_employee.php', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ id: option.value })
    });
  });
  
  Promise.all(promises)
    .then(() => fetchEmployees())
    .catch(error => {
      console.error('Error:', error);
      alert('Ошибка при удалении сотрудников');
    });
}

function setStatus(statusType) {
  const employeeId = document.getElementById('status-employee').value;
  const dateFrom = document.getElementById('date-from').value;
  const dateTo = document.getElementById('date-to').value;
  
  if (!employeeId || !dateFrom || !dateTo) {
    alert('Заполните все поля');
    return;
  }
  
  fetch('api/set_status.php', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      employee_id: employeeId,
      start_date: dateFrom,
      end_date: dateTo,
      status_type: statusType
    })
  })
  .then(response => {
    if (!response.ok) throw new Error('Ошибка сервера');
    return response.json();
  })
  .then(() => {
    alert('Статус успешно установлен');
    loadSchedule(); 
  })
  .catch(error => {
    console.error('Error:', error);
    alert('Ошибка при установке статуса');
  });
}

main.js (настройка интерфейса и загрузка данных, лежит в schedule/js):

document.addEventListener('DOMContentLoaded', function() {
  const months = ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 
                 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'];
  const currentDate = new Date();
  document.getElementById('current-month').textContent = 
    `${months[currentDate.getMonth()]} ${currentDate.getFullYear()}`;
  
  fetchEmployees();
  initSchedule();
  
  const today = new Date();
  document.getElementById('date-from').valueAsDate = today;
  document.getElementById('date-to').valueAsDate = new Date(today.getTime() + 7 * 24 * 60 * 60 * 1000);
});

function showTab(tabId) {
  document.querySelectorAll('.tab-content').forEach(tab => {
    tab.classList.remove('active');
  });
  
  document.querySelectorAll('.nav-tabs a').forEach(tab => {
    tab.classList.remove('active');
  });
  
  document.getElementById(tabId + '-tab').classList.add('active');
  
  event.target.classList.add('active');
}

schedule.js (основная логика работы с графиком, лежит в schedule/js):

\\Имя файла schedule.js. Отвечает за ВСЕ, фаил лежит в schedule\js
function initSchedule() {
  const headerRow = document.querySelector('#schedule-header tr');
  const currentDate = new Date();
  const daysInMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0).getDate();
  
  headerRow.innerHTML = '<th>Сотрудник</th>';
  
  for (let day = 1; day <= daysInMonth; day++) {
    const th = document.createElement('th');
    th.textContent = day;
    headerRow.appendChild(th);
  }
  
  const addTh = document.createElement('th');
  addTh.innerHTML = '<button onclick="addEmployeeRow()">+</button>';
  headerRow.appendChild(addTh);
  
  loadSchedule();
}

function addEmployeeRow(employeeId = null) {
  const tbody = document.getElementById('schedule-body');
  const currentDate = new Date();
  const daysInMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0).getDate();
  
  const row = document.createElement('tr');
  
  const nameCell = document.createElement('td');
  nameCell.className = 'name-cell';
  
  const select = document.createElement('select');
  select.innerHTML = '<option value="">Выберите сотрудника</option>';
  
  const employeeList = document.getElementById('employee-list');
  if (employeeList) {
    Array.from(employeeList.options).forEach(option => {
      select.innerHTML += `<option value="${option.value}">${option.text}</option>`;
    });
  }
  
  if (employeeId) {
    select.value = employeeId;
  }
  
  select.addEventListener('change', function() {
    updateEmployeeSchedule(this.value);
  });
  
  nameCell.appendChild(select);
  row.appendChild(nameCell);
  
  for (let day = 1; day <= daysInMonth; day++) {
    const cell = document.createElement('td');
    cell.className = 'shift-cell';
    cell.textContent = '-';
    cell.onclick = function() {
      setShiftForCell(this, row.rowIndex - 1, day);
    };
    row.appendChild(cell);
  }
  
  const deleteCell = document.createElement('td');
  deleteCell.innerHTML = '<button onclick="removeScheduleRow(this)">×</button>';
  row.appendChild(deleteCell);
  
  tbody.appendChild(row);
  return row;
}

function setShiftForCell(cell, rowIndex, day) {
  const shiftType = prompt('Выберите тип смены:\nД - День\nН - Ночь\nВ - Выходной')?.toUpperCase();
  
  if (shiftType && ['Д', 'Н', 'В'].includes(shiftType)) {
    cell.textContent = shiftType;
    cell.className = `shift-cell ${
      shiftType === 'Д' ? 'day-shift' : 
      shiftType === 'Н' ? 'night-shift' : 'day-off'
    }`;
    
    // Если это одна из первых двух ячеек, предлагаем сгенерировать остальное
    if (day <= 2) {
      const row = document.querySelector(`#schedule-body tr:nth-child(${rowIndex + 1})`);
      const firstCell = row.querySelector('td:nth-child(2)');
      const secondCell = row.querySelector('td:nth-child(3)');
      
      if (firstCell.textContent !== '-' && secondCell.textContent !== '-' &&
          confirm('Сгенерировать остальные смены на основе первых двух дней?')) {
        generatePairSchedule(rowIndex, [
          firstCell.textContent,
          secondCell.textContent
        ]);
      }
    }
  }
}

// Основная функция парной генерации графика
function generatePairSchedule(rowIndex, firstPair) {
  const row = document.querySelector(`#schedule-body tr:nth-child(${rowIndex + 1})`);
  if (!row) return;

  const cells = row.querySelectorAll('.shift-cell');
  const daysInMonth = cells.length;
  
  // Устанавливаем первую пару
  if (firstPair && firstPair.length === 2) {
    cells[0].textContent = firstPair[0];
    cells[0].className = `shift-cell ${getShiftClass(firstPair[0])}`;
    cells[1].textContent = firstPair[1];
    cells[1].className = `shift-cell ${getShiftClass(firstPair[1])}`;
  }

  // Генерируем остальные дни на основе пар
  for (let i = 2; i < daysInMonth; i += 2) {
    const prevPair = [cells[i-2].textContent, cells[i-1].textContent];
    const nextPair = getNextPair(prevPair);
    
    // Устанавливаем следующую пару
    cells[i].textContent = nextPair[0];
    cells[i].className = `shift-cell ${getShiftClass(nextPair[0])}`;
    
    if (i+1 < daysInMonth) {
      cells[i+1].textContent = nextPair[1];
      cells[i+1].className = `shift-cell ${getShiftClass(nextPair[1])}`;
    }
  }

  saveAutoGeneratedSchedule(row);
}

// Определяет следующую пару смен на основе предыдущей
function getNextPair(prevPair) {
  const [a, b] = prevPair;
  
  // Основные правила чередования
  if (a === 'Д' && b === 'Н') return ['В', 'В']; // ДН → ВВ
  if (a === 'В' && b === 'В') return ['Д', 'Н']; // ВВ → ДН
  if (a === 'В' && b === 'Д') return ['Н', 'В']; // ВД → НВ
  if (a === 'Н' && b === 'В') return ['В', 'Д']; // НВ → ВД
  
  // Если паттерн не распознан, возвращаем выходные
  return ['В', 'В'];
}

// Возвращает CSS-класс для типа смены
function getShiftClass(shift) {
  return shift === 'Д' ? 'day-shift' : 
         shift === 'Н' ? 'night-shift' : 'day-off';
}

// Генерация графика для выбранной строки
function autoGenerateSelectedRow() {
  const selectedRow = document.querySelector('#schedule-body tr.selected');
  if (!selectedRow) {
    alert('Выберите строку с сотрудником');
    return;
  }

  const firstPair = prompt('Введите первую пару смен (2 символа: Д, Н или В)\nПримеры:\nДН - День-Ночь\nВВ - Выходные\nВД - Выходной-День\nНВ - Ночь-Выходной')
    ?.toUpperCase()
    ?.split('');
  
  if (!firstPair || firstPair.length !== 2 || 
      !['Д', 'Н', 'В'].includes(firstPair[0]) || 
      !['Д', 'Н', 'В'].includes(firstPair[1])) {
    alert('Некорректный ввод. Введите 2 символа (Д, Н или В)');
    return;
  }

  const rowIndex = Array.from(document.querySelectorAll('#schedule-body tr')).indexOf(selectedRow);
  generatePairSchedule(rowIndex, firstPair);
}

// Быстрая генерация по стандартным паттернам
function generateWithPattern(pattern) {
  const patterns = {
    'dayNight': ['Д', 'Н'],
    'offOff': ['В', 'В'],
    'offDay': ['В', 'Д'],
    'nightOff': ['Н', 'В']
  };
  
  const selectedRow = document.querySelector('#schedule-body tr.selected');
  if (!selectedRow) {
    alert('Выберите строку с сотрудником');
    return;
  }
  
  const rowIndex = Array.from(document.querySelectorAll('#schedule-body tr')).indexOf(selectedRow);
  generatePairSchedule(rowIndex, patterns[pattern]);
}

// Сохранение сгенерированного графика
function saveAutoGeneratedSchedule(row) {
  const employeeId = row.querySelector('select').value;
  if (!employeeId) return;

  const currentDate = new Date();
  const year = currentDate.getFullYear();
  const month = currentDate.getMonth();
  const shifts = [];

  row.querySelectorAll('.shift-cell').forEach((cell, dayIndex) => {
    const day = dayIndex + 1;
    const date = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
    
    let shiftType;
    if (cell.textContent === 'Д') shiftType = 'day';
    else if (cell.textContent === 'Н') shiftType = 'night';
    else shiftType = 'off';

    shifts.push({ date, shiftType });
  });

  fetch('api/save_auto_schedule.php', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ employee_id: employeeId, shifts })
  })
  .then(response => response.json())
  .then(data => {
    if (!data.success) {
      console.error('Ошибка сохранения графика');
    }
  });
}

function loadSchedule() {
  fetch('api/get_schedule.php')
    .then(response => response.json())
    .then(data => {
      data.forEach(employee => {
        const row = addEmployeeRow(employee.id);
        
        Object.keys(employee.shifts).forEach(date => {
          const day = new Date(date).getDate();
          const cell = row.cells[day];
          const shiftType = employee.shifts[date];
          
          switch(shiftType) {
            case 'day':
              cell.textContent = 'Д';
              cell.className = 'shift-cell day-shift';
              break;
            case 'night':
              cell.textContent = 'Н';
              cell.className = 'shift-cell night-shift';
              break;
            case 'off':
              cell.textContent = 'В';
              cell.className = 'shift-cell day-off';
              break;
          }
        });
      });
    });
}

function saveSchedule() {
  // Реализация сохранения всего графика
  alert('Функция сохранения графика будет реализована');
}

function removeScheduleRow(button) {
  if (confirm('Удалить эту строку из графика?')) {
    button.closest('tr').remove();
  }
}

// Выделение строки при клике
document.addEventListener('click', function(e) {
  if (e.target.closest('#schedule-body tr')) {
    document.querySelectorAll('#schedule-body tr').forEach(row => {
      row.classList.remove('selected');
    });
    e.target.closest('tr').classList.add('selected');
  }
});

// Быстрые кнопки генерации
document.addEventListener('DOMContentLoaded', function() {
  const quickControls = document.createElement('div');
  quickControls.className = 'quick-patterns';
  quickControls.innerHTML = `
    <button onclick="generateWithPattern('dayNight')">День-Ночь</button>
    <button onclick="generateWithPattern('offOff')">Выходные</button>
    <button onclick="generateWithPattern('offDay')">Вых-День</button>
    <button onclick="generateWithPattern('nightOff')">Ночь-Вых</button>
  `;
  document.querySelector('.controls').appendChild(quickControls);
});

// Добавляем в конец файла
function setupStatusButtons() {
    document.querySelectorAll('.name-cell').forEach(cell => {
        const employeeId = cell.closest('tr').querySelector('select')?.value;
        const employeeName = cell.textContent;
        
        if (employeeId) {
            const statusBtn = document.createElement('button');
            statusBtn.textContent = 'Статус';
            statusBtn.style.marginLeft = '10px';
            statusBtn.onclick = (e) => {
                e.stopPropagation();
                showStatusModal(employeeId, employeeName);
            };
            cell.appendChild(statusBtn);
        }
    });
}

// Вызываем эту функцию после загрузки графика
// В функции loadSchedule() после заполнения данных добавьте:
setupStatusButtons();

status.js (работа со статусами, лежит в schedule/js):

\\Имя файла status.js. Выполняет работу со статусами, фаил лежит в schedule\js
function showStatusModal(employeeId, employeeName) {
    const modal = document.createElement('div');
    modal.className = 'modal';
    modal.innerHTML = `
        <div class="modal-content">
            <span class="close">&times;</span>
            <h3>Установка статуса для ${employeeName}</h3>
            <div class="form-group">
                <label>Тип статуса:</label>
                <select id="status-type">
                    <option value="vacation">Отпуск</option>
                    <option value="sick_leave">Больничный</option>
                </select>
            </div>
            <div class="form-group">
                <label>С:</label>
                <input type="date" id="status-start-date">
            </div>
            <div class="form-group">
                <label>По:</label>
                <input type="date" id="status-end-date">
            </div>
            <button onclick="saveStatus(${employeeId})">Сохранить</button>
            <div id="status-list"></div>
        </div>
    `;
    
    document.body.appendChild(modal);
    
    const today = new Date();
    document.getElementById('status-start-date').valueAsDate = today;
    document.getElementById('status-end-date').valueAsDate = new Date(today.getTime() + 7 * 24 * 60 * 60 * 1000);
    
    modal.querySelector('.close').onclick = () => modal.remove();
    
    loadEmployeeStatuses(employeeId);
}

function loadEmployeeStatuses(employeeId) {
    fetch(`api/status.php?employee_id=${employeeId}`)
        .then(response => response.json())
        .then(statuses => {
            const statusList = document.getElementById('status-list');
            statusList.innerHTML = '<h4>Текущие статусы:</h4>';
            
            if (statuses.length === 0) {
                statusList.innerHTML += '<p>Нет активных статусов</p>';
                return;
            }
            
            statuses.forEach(status => {
                const statusDiv = document.createElement('div');
                statusDiv.className = 'status-item';
                statusDiv.innerHTML = `
                    <p>
                        ${status.status_type === 'vacation' ? 'Отпуск' : 'Больничный'} 
                        с ${status.start_date} по ${status.end_date}
                        <button onclick="deleteStatus(${status.id})">Удалить</button>
                    </p>
                `;
                statusList.appendChild(statusDiv);
            });
        });
}

function saveStatus(employeeId) {
    const statusType = document.getElementById('status-type').value;
    const startDate = document.getElementById('status-start-date').value;
    const endDate = document.getElementById('status-end-date').value;
    
    fetch('api/status.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
            employee_id: employeeId,
            start_date: startDate,
            end_date: endDate,
            status_type: statusType
        })
    })
    .then(response => response.json())
    .then(() => {
        alert('Статус успешно установлен');
        loadEmployeeStatuses(employeeId);
        loadSchedule();
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Ошибка при установке статуса');
    });
}

function deleteStatus(statusId) {
    if (!confirm('Удалить этот статус?')) return;
    
    fetch(`api/status.php?id=${statusId}`, {
        method: 'DELETE'
    })
    .then(response => response.json())
    .then(() => {
        alert('Статус удален');
        loadSchedule();
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Ошибка при удалении статуса');
    });
}

function addStatusStyles() {
    const style = document.createElement('style');
    style.textContent = `
        .modal {
            display: block;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.4);
        }
        
        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 50%;
        }
        
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        .status-item {
            padding: 10px;
            border-bottom: 1px solid #eee;
        }
    `;
    document.head.appendChild(style);
}

document.addEventListener('DOMContentLoaded', addStatusStyles);

PHP для работы с БД
db.php (подключение к БД, лежит в schedule/includes):

<?php
$host = 'localhost';
$user = 'root';
$pass = '';
$dbname = 'schedule_db';
$conn = new mysqli($host, $user, $pass, $dbname);
if ($conn->connect_error) {
    die('Ошибка подключения: ' . $conn->connect_error);
}
?>

functions.php (взаимодействие компонентов, лежит в schedule/includes):

<?php
function employeeExists($employeeId) {
    global $conn;
    $stmt = $conn->prepare("SELECT id FROM employees WHERE id = ?");
    $stmt->bind_param("i", $employeeId);
    $stmt->execute();
    $result = $stmt->get_result();
    return $result->num_rows > 0;
}

function validateDate($date, $format = 'Y-m-d') {
    $d = DateTime::createFromFormat($format, $date);
    return $d && $d->format($format) == $date;
}

function getEmployeeStatuses($employeeId, $date = null) {
    global $conn;
    
    $sql = "SELECT * FROM employee_status WHERE employee_id = ?";
    $params = [$employeeId];
    $types = "i";
    
    if ($date) {
        $sql .= " AND ? BETWEEN start_date AND end_date";
        $params[] = $date;
        $types .= "s";
    }
    
    $stmt = $conn->prepare($sql);
    $stmt->bind_param($types, ...$params);
    $stmt->execute();
    $result = $stmt->get_result();
    $statuses = [];
    
    while ($row = $result->fetch_assoc()) {
        $statuses[] = $row;
    }
    
    return $statuses;
}

function hasActiveStatus($employeeId, $date) {
    global $conn;
    
    $stmt = $conn->prepare("SELECT id FROM employee_status 
                          WHERE employee_id = ? AND ? BETWEEN start_date AND end_date");
    $stmt->bind_param("is", $employeeId, $date);
    $stmt->execute();
    $result = $stmt->get_result();
    return $result->num_rows > 0;
}

employees.php (веб-интерфейс для управления сотрудниками, лежит в schedule):

<?php include 'includes/db.php'; ?>
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Сотрудники</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <nav>
    <a href="index.php">График</a> |
    <a href="employees.php">Сотрудники</a>
  </nav>
  <div class="container">
    <h2>Управление сотрудниками</h2>
    <input type="text" id="new-name" placeholder="Введите ФИО">
    <button onclick="addEmployee()">Добавить</button>
    <br><br>
    <select id="employee-list"></select>
    <button onclick="deleteEmployee()">Удалить</button>
  </div>
  <script src="js/script.js"></script>
</body>
</html>

Второй HTML-шаблон
Как я писал в начале, у меня два HTML-шаблона. Второй я сделал потому что не получалось нормально реализовать функции больничного и отпуска (как показано на первом скриншоте: у первого сотрудника с 1 по 7 число стоят прочерки, но в "Версии для печати" у него отображается "Отпуск"). Также там выводится общее число отработанных часов за месяц (из расчёта: 1 смена = 11 часов).

view_schedule.php (версия для печати, расчёт времени, лежит в schedule):

<?php include 'includes/db.php'; ?>
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Просмотр графика смен</title>
  <link rel="stylesheet" href="css/style.css">
  <style>
    /* Основные стили */
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }
    
    .container {
      width: 100%;
      padding: 20px;
      box-sizing: border-box;
    }
    
    /* Шапка документа */
    .document-header {
      text-align: center;
      margin-bottom: 20px;
    }
    
    .department-name {
      font-size: 14pt;
      font-weight: bold;
      margin-bottom: 5px;
    }
    
    .document-title {
      font-size: 16pt;
      font-weight: bold;
      margin: 15px 0;
    }
    
    .document-date {
      font-size: 12pt;
      margin-bottom: 15px;
    }
    
    .approval-block {
      text-align: right;
      margin: 30px 0;
    }
    
    /* Таблица с графиком */
    .schedule-wrapper {
      width: 100%;
      overflow-x: auto;
      margin-bottom: 30px;
    }
    
    #schedule-table {
      border-collapse: collapse;
      width: 100%;
      font-size: 10pt;
    }
    
    #schedule-table th, #schedule-table td {
      border: 1px solid #000;
      padding: 2px;
      text-align: center;
      min-width: 22px;
    }
    
    #schedule-table th {
      background-color: #f2f2f2;
      font-weight: bold;
    }
    
    .name-cell {
      min-width: 150px;
      background-color: #f9f9f9;
      position: sticky;
      left: 0;
    }
    
    .hours-cell {
      font-weight: bold;
      background-color: #f2f2f2;
    }
    
    /* Подпись */
    .signature-block {
      margin-top: 50px;
      width: 100%;
    }
    
    .signature-line {
      border-top: 1px solid #000;
      width: 200px;
      display: inline-block;
      margin: 0 20px;
    }
    
    /* Стили для печати */
    @media print {
      @page {
        size: A4 landscape;
        margin: 10mm;
      }
      
      body {
        padding: 0;
        margin: 0;
        font-size: 10pt;
      }
      
      .no-print {
        display: none;
      }
      
      #schedule-table {
        width: 100%;
        font-size: 8pt;
      }
      
      #schedule-table th, #schedule-table td {
        padding: 3px;
      }
      
      .hours-cell {
        font-weight: bold;
        background-color: #f2f2f2 !important;
      }
      #employee-signatures div {
        font-family: monospace;
        white-space: pre;
        margin-bottom: 10px;
        line-height: 1.3;
      }
    }
    
    /* Цвета смен */
    .day-shift { background-color: #d4edda; }
    .night-shift { background-color: #cce5ff; }
    .day-off { background-color: #fff3cd; }
    .vacation { background-color: #ffcccc; }
    .sick-leave { background-color: #ff9999; }
  </style>
</head>
<body>
  <div class="container">
    <!-- Шапка документа -->
    <div class="document-header">
      <div class="department-name">ЗАПИСАТЬ СВОИ ДАННЫЕ</div>
      <div class="document-date">Дата составления графика: <?= date('d.m.Y') ?></div>
      <?php
        $months = [
          1 => 'Январь',
          2 => 'Февраль',
          3 => 'Март',
          4 => 'Апрель',
          5 => 'Май',
          6 => 'Июнь',
          7 => 'Июль',
          8 => 'Август',
          9 => 'Сентябрь',
          10 => 'Октябрь',
          11 => 'Ноябрь',
          12 => 'Декабрь'
        ];
        $currentMonth = $months[date('n')];
      ?>
      <div class="document-title">График работы на <?= $currentMonth . ' ' . date('Y') ?> г.</div>
    </div>
    
    <div class="approval-block">
      УТВЕРЖДАЮ<br>
      ЗАПИСАТЬ СВОИ ДАННЫЕ (ДОЛЖНОСТЬ, ЕСЛИ НУЖНО)<br>
      ___________________ (подпись)
    </div>
    
    <!-- Основная таблица с графиком -->
    <div class="schedule-wrapper">
      <table id="schedule-table">
        <thead id="schedule-header">
          <tr>
            <th>Сотрудник</th>
            <!-- Динамические заголовки дат -->
          </tr>
        </thead>
        <tbody id="schedule-body">
          <!-- Строки будут добавляться динамически -->
        </tbody>
      </table>
    </div>
    
    <!-- Блок подписи -->
    <div class="signature-block">
      <div style="float: left; width: 50%;">
        Ответственное лицо:<br>
        ЗАПИСАТЬ СВОИ ДАННЫЕ (ДОЛЖНОСТЬ)<br>
        ___________________ (подпись)
      </div>
      
      <div style="float: right; width: 35%; text-align: left;">
        С графиком работы ознакомлены:<br>
        <div id="employee-signatures"></div>
      </div>
      <div style="clear: both;"></div>
    </div>
    
    <button class="no-print" onclick="window.print()" style="padding: 10px 20px; margin-top: 20px; cursor: pointer;">Печать</button>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      loadSchedule();
    });

    function loadSchedule() {
      fetch('api/get_schedule.php')
        .then(response => response.json())
        .then(data => {
          const currentDate = new Date();
          const year = currentDate.getFullYear();
          const month = currentDate.getMonth();
          const daysInMonth = new Date(year, month + 1, 0).getDate();
          
          // Заголовок с датами
          const headerRow = document.querySelector('#schedule-header tr');
          headerRow.innerHTML = '<th>Сотрудник</th>';
          
          for (let day = 1; day <= daysInMonth; day++) {
            const th = document.createElement('th');
            th.textContent = day;
            headerRow.appendChild(th);
          }
          
          // Добавляем заголовок для часов
          headerRow.innerHTML += '<th>Часы</th>';
          
          // Заполняем данные сотрудников
          const tbody = document.getElementById('schedule-body');
          const signatures = document.getElementById('employee-signatures');
          tbody.innerHTML = '';
          
          data.forEach(employee => {
            let totalHours = 0;
            
            // Добавляем строку в таблицу
            const row = document.createElement('tr');
            
            // Ячейка с именем
            const nameCell = document.createElement('td');
            nameCell.className = 'name-cell';
            nameCell.textContent = employee.fullname;
            row.appendChild(nameCell);
            
            // Ячейки смен
            for (let day = 1; day <= daysInMonth; day++) {
              const date = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
              const shiftType = employee.shifts[date] || '';
              const cell = document.createElement('td');
              
              switch(shiftType) {
                case 'day':
                  cell.textContent = 'Д';
                  cell.className = 'day-shift';
                  totalHours += 11;
                  break;
                case 'night':
                  cell.textContent = 'Н';
                  cell.className = 'night-shift';
                  totalHours += 11;
                  break;
                case 'off':
                  cell.textContent = 'В';
                  cell.className = 'day-off';
                  break;
                case 'vacation':
                  cell.textContent = 'Отп';
                  cell.className = 'vacation';
                  break;
                case 'sick_leave':
                  cell.textContent = 'Б';
                  cell.className = 'sick-leave';
                  break;
                default:
                  cell.textContent = '-';
              }
              
              row.appendChild(cell);
            }
            
            // Добавляем ячейку с общим количеством часов
            const hoursCell = document.createElement('td');
            hoursCell.textContent = totalHours > 0 ? totalHours : '';
            hoursCell.className = 'hours-cell';
            row.appendChild(hoursCell);
            
            tbody.appendChild(row);
            
            // Добавляем подпись сотрудника
            const signature = document.createElement('div');
            signature.style.fontFamily = 'monospace';
            signature.style.whiteSpace = 'pre';

            // Вычисляем длину ФИО и добавляем подчеркивания
            const nameLength = employee.fullname.length;
            const totalLength = 40; // Общая длина строки
            const underlineLength = totalLength - nameLength - 10; // 10 - место для "(подпись)"

            signature.innerHTML = `
  ${employee.fullname} ${'_'.repeat(underlineLength)} (подпись)
`;
            signatures.appendChild(signature);
          });
        })
        .catch(error => {
          console.error('Ошибка загрузки графика:', error);
          alert('Не удалось загрузить график');
        });
    }
  </script>
</body>
</html>

view_schedule.js (отображение графика для печати, лежит в schedule/js):

document.addEventListener('DOMContentLoaded', function() {
  loadSchedule();
});

function loadSchedule() {
  fetch('api/get_schedule.php')
    .then(response => response.json())
    .then(data => {
      const currentDate = new Date();
      const year = currentDate.getFullYear();
      const month = currentDate.getMonth();
      const daysInMonth = new Date(year, month + 1, 0).getDate();
      
      const headerRow = document.querySelector('#schedule-header tr');
      headerRow.innerHTML = '<th>Сотрудник</th>';
      
      for (let day = 1; day <= daysInMonth; day++) {
        const th = document.createElement('th');
        th.textContent = day;
        headerRow.appendChild(th);
      }
      
      headerRow.innerHTML += '<th>Часы</th>';
      
      const tbody = document.getElementById('schedule-body');
      const signatures = document.getElementById('employee-signatures');
      tbody.innerHTML = '';
      
      data.forEach(employee => {
        let totalHours = 0;
        
        const row = document.createElement('tr');
        
        const nameCell = document.createElement('td');
        nameCell.className = 'name-cell';
        nameCell.textContent = employee.fullname;
        row.appendChild(nameCell);
        
        for (let day = 1; day <= daysInMonth; day++) {
          const date = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
          const shiftType = employee.shifts[date] || '';
          const cell = document.createElement('td');
          
          switch(shiftType) {
            case 'day':
              cell.textContent = 'Д';
              cell.className = 'day-shift';
              totalHours += 11;
              break;
            case 'night':
              cell.textContent = 'Н';
              cell.className = 'night-shift';
              totalHours += 11;
              break;
            case 'off':
              cell.textContent = 'В';
              cell.className = 'day-off';
              break;
            case 'vacation':
              cell.textContent = 'Отп';
              cell.className = 'vacation';
              break;
            case 'sick_leave':
              cell.textContent = 'Б';
              cell.className = 'sick-leave';
              break;
            default:
              cell.textContent = '-';
          }
          
          row.appendChild(cell);
        }
        
        const totalCell = document.createElement('td');
        totalCell.textContent = totalHours > 0 ? totalHours : '';
        totalCell.className = 'employee-total';
        row.appendChild(totalCell);
        
        tbody.appendChild(row);
        
        const signature = document.createElement('div');
        signature.innerHTML = `
          ${employee.fullname} ___________________ 
          <span style="font-size: 0.8em;">(подпись)</span><br><br>
        `;
        signatures.appendChild(signature);
      });
    })
    .catch(error => {
      console.error('Ошибка загрузки графика:', error);
      alert('Не удалось загрузить график');
    });
}

Итоговая структура проекта
schedule/
├── api/ # Скрипты API для работы с БД
│ ├── add_employee.php
│ ├── delete_employee.php
│ ├── get_employees.php
│ ├── get_schedule.php
│ ├── save_auto_schedule.php
│ ├── set_schedule.php
│ ├── set_status.php
│ └── status.php
├── includes/ # Вспомогательные файлы
│ ├── db.php # Подключение к БД
│ └── functions.php # Общие функции
├── js/ # Клиентские скрипты
│ ├── employees.js # Управление сотрудниками
│ ├── main.js # Инициализация системы
│ ├── schedule.js # Логика графика смен
│ ├── status.js # Управление статусами
│ └── view_schedule.js # Печатная версия графика
├── css/
│ └── style.css # Стили для всех страниц
└── views/ # HTML-шаблоны
├── index.php # Главная страница
├── employees.php # Интерфейс сотрудников
└── view_schedule.php # Страница печати
ссылки для работы
http://localhost/schedule/
http://localhost/schedule/view_schedule.php

Стили (style.css)

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
}

.nav-tabs {
  display: flex;
  margin-bottom: 20px;
  border-bottom: 1px solid #ddd;
}

.nav-tabs a {
  padding: 10px 15px;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 4px 4px 0 0;
  margin-right: 5px;
}

.nav-tabs a.active {
  border-color: #ddd #ddd #fff;
  background: #fff;
  color: #555;
  font-weight: bold;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.schedule-wrapper {
  overflow-x: auto;
}

#schedule-table {
  border-collapse: collapse;
  width: 100%;
}

#schedule-table th, #schedule-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}

#schedule-table th {
  background-color: #f2f2f2;
}

.name-cell {
  min-width: 150px;
  background-color: #f9f9f9;
}

.shift-cell {
  cursor: pointer;
}

.shift-cell:hover {
  background-color: #f0f0f0;
}

.day-shift {
  background-color: #d4edda;
}

.night-shift {
  background-color: #cce5ff;
}

.day-off {
  background-color: #fff3cd;
}

.controls {
  margin-bottom: 15px;
}

.employee-form, .employee-list, .status-controls {
  margin-bottom: 20px;
}

#schedule-body tr.selected {
  background-color: #e6f7ff;
  outline: 2px solid #1890ff;
}

.day-shift {
  background-color: #d4edda;
}

.night-shift {
  background-color: #cce5ff;
}

.day-off {
  background-color: #fff3cd;
}

/* Стили для страницы просмотра */
.view-mode {
  background: #fff;
  padding: 20px;
}

.view-mode #schedule-table {
  width: auto;
  margin: 0 auto;
}

.view-mode .name-cell {
  min-width: 200px;
  position: sticky;
  left: 0;
  background: #f9f9f9;
  z-index: 1;
}

.print-button {
  background: #4CAF50;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.print-button:hover {
  background: #45a049;
}

@media print {
  body {
    padding: 0;
    margin: 0;
  }
  .print-button {
    display: none;
  }
  #schedule-table {
    width: 100%;
    font-size: 12pt;
  }
}

.vacation {
    background-color: #ffcccc;
    position: relative;
}

.sick-leave {
    background-color: #ff9999;
    position: relative;
}

Надеюсь, кому-то это будет полезно!

Hubs: