Corp/backend/templates/base.html

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{% block title %}EUSRR{% endblock %}</title>

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- FullCalendar CSS -->
  <link href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.css" rel="stylesheet">
  <!-- Bootstrap Icons -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">

  {% block extra_css %}{% endblock %}

  <style>
    nav.navbar.position-relative { position: relative; }
    #calendarContainer {
      position: absolute;
      top: -9999px;
      right: 1rem;
      z-index: 1050;
      width: 350px; max-width: 100%; height: 400px; max-height: 90vh;
      overflow: hidden;
      transition: top 0.2s ease-in-out;
    }
    #calendarContainer.visible { top: 100%; }
    #mini-calendar { width: 100%; height: 100%; }
    .fc .fc-toolbar-title { font-size: 1.2rem; font-weight: 500; }
    .fc .fc-daygrid-day-number { font-size: 1rem; font-weight: 400; }
    .fc .fc-daygrid-day-frame { padding: 0.5rem; }
  </style>
</head>
<body class="bg-light">

<nav class="navbar navbar-expand-lg navbar-dark bg-primary position-relative">
  <div class="container">
    <a class="navbar-brand" href="/">EUSRR</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
            data-bs-target="#navbarContent" aria-controls="navbarContent"
            aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarContent">
      <ul class="navbar-nav me-auto">
        {% if user.is_authenticated %}
          <li class="nav-item">
            <a class="nav-link" href="{% url 'documents:document_list' %}">
              <i class="bi-file-earmark-text"></i> Документы
            </a>
          </li>
        {% endif %}
      </ul>

      <div class="d-flex align-items-center">
        {% if user.is_authenticated %}
          <span class="navbar-text me-3">Добро пожаловать, {{ user.get_short_name }}</span>

          <!-- Кнопка переключения календаря -->
          <button id="toggleCalendarBtn" class="btn btn-outline-light me-3" type="button">
            <i class="bi-calendar3"></i>
          </button>

          <!-- Контейнер календаря -->
          <div id="calendarContainer">
            <div class="card shadow-sm">
              <div class="card-body p-2">
                <div id="mini-calendar"></div>
              </div>
            </div>
          </div>

          <form action="{% url 'logout' %}" method="post" class="d-inline">
            {% csrf_token %}
            <button type="submit" class="btn btn-outline-light">Выйти</button>
          </form>
        {% else %}
          <a class="btn btn-outline-light me-2" href="{% url 'login' %}">Войти</a>
          <a class="btn btn-light" href="{% url 'register' %}">Регистрация</a>
        {% endif %}
      </div>
    </div>
  </div>
</nav>

<div class="container mt-5">
  {% block content %}{% endblock %}
</div>

<!-- Bootstrap JS Bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- FullCalendar JS -->
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js"></script>

{% if user.is_authenticated %}
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const container = document.getElementById('calendarContainer');
    const toggleBtn = document.getElementById('toggleCalendarBtn');

    // Инициализация FullCalendar
    const calendar = new FullCalendar.Calendar(
      document.getElementById('mini-calendar'),
      {
        initialView: 'dayGridMonth',
        headerToolbar: { left: 'prev,next today', center: 'title', right: '' },
        height: 400,
        events: '/calendar/api/events/',
        eventDidMount: info => {
          if (info.event.extendedProps.recurrence === 'annual') {
            info.el.style.borderColor = '#28a745';
          }
        }
      }
    );
    calendar.render();

    // Показ/скрытие календаря
    toggleBtn.addEventListener('click', () => {
      container.classList.toggle('visible');
      if (container.classList.contains('visible')) {
        calendar.updateSize();
      }
    });

    // Закрытие по клику вне области
    document.addEventListener('click', (e) => {
      if (container.classList.contains('visible')
          && !container.contains(e.target)
          && e.target !== toggleBtn) {
        container.classList.remove('visible');
      }
    });
  });
</script>
{% endif %}

{% block extra_js %}{% endblock %}

</body>
</html>