Блог

Главная - Вопросы по программированию - Полный календарь 4: рабочие часы через AJAX не отображаются в timeGridWeek

Полный календарь 4: рабочие часы через AJAX не отображаются в timeGridWeek

#javascript #fullcalendar #fullcalendar-scheduler

#javascript #полный календарь #полный календарь-планировщик

Вопрос:

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

Проблема, с которой я сталкиваюсь, связана с рабочими часами. Я правильно понимаю JSON, потому что он отлично работает в resourceTimeGridDay, но когда я переключаюсь на timeGridWeek, рабочие часы не отображаются.

Я получаю ресурсы через AJAX, и возвращаемый JSON структурирован следующим образом:

 [
   {
      "id":"2-1",
      "title":"Silvano",
      "businessHours":[
         {
            "startTime":"08:00",
            "endTime":"12:30",
            "daysOfWeek":"[1]"
         },
         {
            "startTime":"14:00",
            "endTime":"17:30",
            "daysOfWeek":"[1]"
         },
         {
            "startTime":"08:00",
            "endTime":"15:00",
            "daysOfWeek":"[2]"
         },
         {
            "startTime":"08:00",
            "endTime":"12:30",
            "daysOfWeek":"[3]"
         },
         {
            "startTime":"14:00",
            "endTime":"17:30",
            "daysOfWeek":"[3]"
         },
         {
            "startTime":"08:00",
            "endTime":"15:00",
            "daysOfWeek":"[4]"
         },
         {
            "startTime":"08:00",
            "endTime":"12:30",
            "daysOfWeek":"[5]"
         },
         {
            "startTime":"14:00",
            "endTime":"17:30",
            "daysOfWeek":"[5]"
         }
      ],
      "eventColor":"#bdbdbd",
      "servizi":[
         "2"
      ]
   }
]

При копировании / вставке этих значений в коде рендеринга календаря отображаются рабочие часы:

 document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'timeGridWeek',
    businessHours: [{"startTime":"08:00","endTime":"12:30","daysOfWeek":"[1]"},{"startTime":"14:00","endTime":"17:30","daysOfWeek":"[1]"},{"startTime":"08:00","endTime":"15:00","daysOfWeek":"[2]"},{"startTime":"08:00","endTime":"12:30","daysOfWeek":"[3]"},{"startTime":"14:00","endTime":"17:30","daysOfWeek":"[3]"},{"startTime":"08:00","endTime":"15:00","daysOfWeek":"[4]"},{"startTime":"08:00","endTime":"12:30","daysOfWeek":"[5]"},{"startTime":"14:00","endTime":"17:30","daysOfWeek":"[5]"}]
  });

  calendar.render();
});

Однако мне нужно, чтобы они выбирались динамически (могут отличаться от недели к неделе). Я просмотрел документацию, но не смог найти никакого ответа на этот вопрос. Любой намек будет оценен.

Комментарии:

1. Проблема не в AJAX. Проблема в том, что вы указываете рабочие часы для каждого ресурса . И timeGridWeek не является ресурсоориентированным представлением, поэтому, естественно, поскольку он не может отображать ресурсы, он также не может отображать рабочие часы, связанные с каким-либо конкретным ресурсом. Вторая часть кода, которую вы показали, не эквивалентна первой.

2. «Мне нужно, чтобы они выбирались динамически (могут отличаться от недели к неделе)»… не имеет ничего общего (напрямую) с их привязкой к определенному ресурсу, а также не имеет ничего общего с тем, почему они не отображаются в вашем представлении timeGrid.

Ответ №1:

Проблема решена путем добавления пользовательского представления в календарь на основе resourceTimeGrid:

 var calendar = new FullCalendar.Calendar(calendarEl, {
                        
                        plugins: [ 'interaction', 'resourceDayGrid', 'timeGrid', 'list', 'resourceTimeGrid' ],
                        timeZone: 'UTC',
                        height: 'parent',
                        header: {
                            left: 'prev,next today',
                            center: 'title',
                            right: 'dayGridMonth,customResourceTimeGridWeek,resourceTimeGridDay,listWeek'
                        },
                        views: {
                            customResourceTimeGridWeek: {
                              type: 'resourceTimeGrid',
                              duration: { days: 7 },
                              buttonText: 'Week'
                            }
                        },...