catalog/view/template/extension/task_manager/calendar.twig

Вот содержимое файла catalog/view/template/extension/task_manager/calendar.twig:

{% extends 'common/column_left.twig' %}

{% block content %}
  <div class="container">
    <h1>{{ heading_title }}</h1>
    
    <div id="calendar" class="calendar-container">
      <div class="calendar-header">
        <button type="button" class="btn btn-primary" id="prevMonth">{{ button_previous }}</button>
        <span id="currentMonth" class="current-month">{{ current_month }}</span>
        <button type="button" class="btn btn-primary" id="nextMonth">{{ button_next }}</button>
      </div>
      
      <div class="calendar-body">
        <div class="calendar-grid">
          {% for day in days %}
            <div class="calendar-cell" data-date="{{ day.date }}">
              <div class="calendar-day">{{ day.day }}</div>
              {% if day.events %}
                <ul class="event-list">
                  {% for event in day.events %}
                    <li class="event-item" data-event-id="{{ event.id }}">
                      <span class="event-title">{{ event.title }}</span>
                    </li>
                  {% endfor %}
                </ul>
              {% endif %}
            </div>
          {% endfor %}
        </div>
      </div>
    </div>

    <div id="taskModal" class="modal" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">{{ modal_title }}</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="{{ button_close }}">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <form action="{{ task_form_action }}" method="post" id="taskForm">
              <div class="form-group">
                <label for="task_title">{{ entry_task_title }}</label>
                <input type="text" name="task_title" id="task_title" class="form-control" required />
              </div>
              <div class="form-group">
                <label for="task_description">{{ entry_task_description }}</label>
                <textarea name="task_description" id="task_description" class="form-control" required></textarea>
              </div>
              <div class="form-group">
                <label for="due_date">{{ entry_due_date }}</label>
                <input type="text" name="due_date" id="due_date" class="form-control" required />
              </div>
              <div class="form-group">
                <button type="submit" class="btn btn-primary">{{ button_save }}</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ button_cancel }}</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      var calendarElement = document.getElementById('calendar');
      var prevMonthButton = document.getElementById('prevMonth');
      var nextMonthButton = document.getElementById('nextMonth');
      var currentMonthLabel = document.getElementById('currentMonth');
      
      // Initialize calendar functionality
      var currentDate = new Date();
      
      function renderCalendar() {
        var month = currentDate.getMonth();
        var year = currentDate.getFullYear();
        
        // Update current month label
        currentMonthLabel.textContent = new Date(year, month).toLocaleString('default', { month: 'long', year: 'numeric' });
        
        // Fetch days and events data
        fetch('/index.php?route=extension/task_manager/getCalendarData', {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            month: month + 1,
            year: year
          })
        })
        .then(response => response.json())
        .then(data => {
          var days = data.days;
          var daysGrid = document.querySelector('.calendar-grid');
          daysGrid.innerHTML = '';

          days.forEach(day => {
            var cell = document.createElement('div');
            cell.classList.add('calendar-cell');
            cell.dataset.date = day.date;
            cell.innerHTML = `
              <div class="calendar-day">${day.day}</div>
              ${day.events ? '<ul class="event-list">' + day.events.map(event => `<li class="event-item" data-event-id="${event.id}"><span class="event-title">${event.title}</span></li>`).join('') + '</ul>' : ''}
            `;
            daysGrid.appendChild(cell);
          });
        });
      }
      
      prevMonthButton.addEventListener('click', function () {
        currentDate.setMonth(currentDate.getMonth() - 1);
        renderCalendar();
      });

      nextMonthButton.addEventListener('click', function () {
        currentDate.setMonth(currentDate.getMonth() + 1);
        renderCalendar();
      });

      renderCalendar();
    });
  </script>
{% endblock %}

Объяснение:

1. Структура календаря:

   • Календарь включает в себя навигацию с кнопками для перехода к предыдущему и следующему месяцу.

   • Отображаются дни месяца, и если в определенный день есть задачи, они отображаются в виде списка с заголовками.

2. Модальное окно:

   • Когда пользователь кликает на день с задачами, появляется модальное окно для создания новой задачи. В нем есть поля для ввода названия задачи, описания и даты выполнения.

3. JavaScript:

   • Включает логику для переключения месяцев в календаре и загрузки задач для каждого дня.

   • Используется метод fetch для получения данных о днях и задачах с сервера.

   • Отображение задач на календаре с помощью динамического создания HTML-элементов.

4. Twig шаблон:

   • Используются переменные для динамического отображения данных, такие как: heading_title, button_previous, button_next, current_month, modal_title, и т. д.

Этот шаблон предназначен для отображения календаря задач, где можно перейти к следующему/предыдущему месяцу и создавать задачи на выбранные дни.

Если нужно внести изменения или добавить дополнительные функции, дайте знать!