Блог

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

У меня есть массив, в котором много объектов с заголовком, временем начала, временем окончания и продолжительностью. Например:

 [
   {title: "Event A", startTime: "01:00:00", endTime: "02:00:00",duration: "60 min"},
   {title: "Event B", startTime: "01:00:00", endTime: "03:00:00",duration: "120 min"},
   {title: "Event C", startTime: "02:00:00", endTime: "04:00:00",duration: "120 min"},
   {title: "Event D", startTime: "03:00:00", endTime: "04:00:00",duration: "60 min"},
]
 

И я хочу, чтобы он отображал событие, подобное этому
примеру календаря (я рисую его с помощью GG sheet)

Я просмотрел эту библиотеку https://github.com/duyluonglc / но в последний раз он обновлялся 3 года назад. Итак, я клонирую это репозиторий и просматриваю код. Но мне действительно сложно понять ту часть его кода, в которой он рассчитал количество столбцов и расширил ширину временного блока события.

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

Если кто-нибудь понимает алгоритм или имеет лучший способ его вычисления, пожалуйста, объясните это четко, чтобы я мог понять, как он отображается. Спасибо.