FullCalendar - Могу ли я достичь этой точки зрения (см. Изображения) - PullRequest
Новая
       11

FullCalendar - Могу ли я достичь этой точки зрения (см. Изображения)

1 голос
/ 05 ноября 2019

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

В настоящее время он настроен для отображения так:

enter image description here

Однако мне в конечном итоге нужно, чтобы он отображался вот так (сторонарядом):

enter image description here

Это для последовательного процесса, и важно передать порядок событий, и если одно событие (синее) распространяется нав другой день события следующего дня (фиолетового цвета) должны ждать, пока это не будет сделано. На верхнем изображении это не так ясно, как на нижнем.

Это что-то, что можно настроить, или для этого потребуется, чтобы я изменил источник или перехватил событие рендеринга и управлял им там?

Спасибо!

[ПРАВИТЬ] Добавлены фрагменты кода:

ШАБЛОН: 

<FullCalendar ref="fullCalendar"
          default-view="resourceTimelineMonth"
          :plugins="calendarPlugins"
          :events="calEvents"
          :resources="calResources"
          :weekends="true"
          :editable="true"
          :event-overlap="false"
          :slot-width="100"/>

СКРИПТ: 

data () {
  return {
    ...
    calendarPlugins: [ interactionPlugin, resourceTimelinePlugin ],
    calEvents: [
        { resourceId: "101", title: 'WO123', start: '2019-11-01T07:00:00', end: '2019-11-01T12:00:00', backgroundColor: 'red' },
        { resourceId: "101", title: 'WO127', start: '2019-11-01T12:00:00', end: '2019-11-01T18:00:00', backgroundColor: 'green'  },
        { resourceId: "101", title: 'WO144', start: '2019-11-01T18:00:00', end: '2019-11-02T03:00:00', backgroundColor: 'blue'  },
        { resourceId: "101", title: 'WO145', start: '2019-11-02T03:00:00', end: '2019-11-02T10:00:00', backgroundColor: 'purple'  }
    ],
    calResources: [
        {id: "101", title: "KM101"},
        {id: "102", title: "KM102"},
        {id: "103", title: "KM103"},
        {id: "104", title: "KM104"},
        {id: "105", title: "KM105"},
      ],
    ...
}

1 Ответ

1 голос
/ 06 ноября 2019

Как я намекал в комментариях выше, причина, по которой вы не видите, на что надеетесь, заключается в том, что когда вы сжимаете каждый слот до одного дня, появляется fullCalendar, чтобы переключиться в режим «весь день»дисплей, где он перестает принимать во внимание определенное время дня, и просто указывает дни, в которые происходит событие.

Способ получить отображение пути (или близко к пути)Вы хотите уменьшить длительность слота до половины дня (что, очевидно, создает наименьшее деление дня, которое вы можете сделать), а также слегка изменить метки слотов, чтобы они подходили. Как только длительность слота исчисляется часами, fullCalendar снова начнет учитывать компонент времени события при его рендеринге.

Я не знаю синтаксис vue.js и не могу сделать его демонстрацию, поэтомуЯ сделал код и демонстрацию ниже в vanilla JS, но, надеюсь, вы сможете без труда перевести это в синтаксис, используемый плагином vue.

Параметры, добавляемые в конфигурацию вашего календаря: 

slotDuration: { hours: 12 },
slotLabelFormat: [
  { weekday: "short" },
  { hour: "2-digit", },
],

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

См. https://fullcalendar.io/docs/date-display для соответствующей документации.

...