Блог

Главная - Вопросы по программированию - Рендеринг полнокалендарного ресурсетимегридного месячного представления

Рендеринг полнокалендарного ресурсетимегридного месячного представления

#javascript #fullcalendar #render #fullcalendar-scheduler #fullcalendar-5

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

Вопрос:

Привет, ребята, я хочу разделить месяц на 4-5 недель, чтобы в каждой неделе было 7 дней.Я не могу найти способ отобразить весь месяц в этом представлении только текущую неделю, поскольку вы можете видеть, что каждый столбец недели содержит фактические дни недели, но я хотел бы отобразить весь месяц с помощью этой схемы.

   this.calendarOptions = {
  headerToolbar: {
    left: '',
    center: 'title',
    right: 'prev next'
  },
  defaultAllDay:false,
  aspectRatio: 2.45,
  editable: false,
  slotMinWidth: 75,
  selectable: false,
  eventClassNames: ['mt-1'],
  eventResourceEditable: false,
  eventOverlap: false,
  initialView: 'resourceTimeGridSevenDay',
  resourceLabelClassNames: ['p-0'],
  resourceGroupLabelContent: (arg) => {
    return {html: `<strong>${arg.groupValue}</strong> `};
  },
  resourceLabelContent : (arg) => {
    return {html: `<span> ${arg.resource._resource.title}</span> `};
  },
  slotLabelContent: (arg) => {
    return {html: ` `};
  },

  eventClick: (arg) => {
    console.log('event click')
  },
  now: new Date().toISOString(), 
  resourceAreaHeaderContent: 'Sponsor/Protocol',
  resourceAreaWidth: '10%',
  views: {
    resourceTimeGridSevenDay: {
      type: 'resourceTimeGrid',
      duration: {days: 7},
      slotDuration: { weeks: 4 },
    }
  },
  events: 'https://fullcalendar.io/demo-events.json?with-resources=2',
  fixedWeekCount: false,
  rerenderDelay: 2,
  progressiveEventRendering: true,
  
  showNonCurrentDates: false,
  initialDate: new Date().toISOString(),
 
  }
}

введите описание изображения здесь

Ответ №1:

Я не уверен, что вы можете создать именно то, что вы показали на скриншоте, используя FullCalendar, но это можно сделать довольно близко, и это может быть достаточно хорошо.

В документации к slotLabelFormat настройке упоминается, что для представления временной шкалы его можно настроить с несколькими строками в области меток.

Таким образом, вы все равно можете использовать представление «месяц», чтобы получить правильное количество дней, но настроить маркировку слота следующим образом:

 views: {
  resourceTimelineMonth: {
    slotLabelFormat: [
      { week: 'long', }, // top level of text
      { weekday: 'short', day: '2-digit' } // lower level of text
    ],
  }
},

Он показывает номер недели как неделю года, а не неделю месяца, а формат даты похож, но не идентичен (и в любом случае будет немного отличаться в зависимости от вашего региона).

Живая демонстрация: https://codepen.io/ADyson82/pen/BawNMEp

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

Документация:

Метки: