Как корректно передать eventPropGetter?
Всем привет! Пишу на рекат, использую библиотеку react-big-calendar. Есть задача выделить все ивенты, где найдена почта юзера другим цветом. Однако по какой-то причине не работает (хотя с ивентом текущего дня все отлично, выделяется как надо). Почта точно находится, в консоль вываливаются все нужные данные.
Я что-то не так передаю? Или он воспринимает не более одного ретерна?
const customEventPropGetter = (event, start, end) => { const currentUserEmail = localStorage.getItem("email"); event.participants.forEach(element => { if (element.email === currentUserEmail) { console.log(element) return { className: "participates-event", }; } }); const currentDate = new Date(); const currentDateFormatted = format(currentDate, "yyyy-MM-dd"); const startFormatted = format(start, "yyyy-MM-dd"); const endFormatted = format(end, "yyyy-MM-dd"); if (startFormatted === currentDateFormatted && endFormatted === currentDateFormatted) { return { className: "event-today", }; } }; |
const customEventPropGetter = (event, start, end) => { const currentUserEmail = localStorage.getItem("email"); event.participants.forEach(element => { if (element.email === currentUserEmail) { console.log(element) return { className: "participates-event", }; } }); const currentDate = new Date(); const currentDateFormatted = format(currentDate, "yyyy-MM-dd"); const startFormatted = format(start, "yyyy-MM-dd"); const endFormatted = format(end, "yyyy-MM-dd"); if (startFormatted === currentDateFormatted && endFormatted === currentDateFormatted) { return { className: "event-today", }; } };
Вот так передаю в календарь:
<Calendar localizer={localizer} events={events} startAccessor="start" date={currentDate} endAccessor="end" selectable eventPropGetter={customEventPropGetter} onSelectEvent={handleEventClick} onSelectSlot={(slotInfo) => { setSelectedSlot(slotInfo); openCreateEventModal(); }} components={{ month: { dateHeader: CustomDateHeader, }, }} onNavigate={(newDate) => { setCurrentDate(newDate); }} /> |
<Calendar localizer={localizer} events={events} startAccessor="start" date={currentDate} endAccessor="end" selectable eventPropGetter={customEventPropGetter} onSelectEvent={handleEventClick} onSelectSlot={(slotInfo) => { setSelectedSlot(slotInfo); openCreateEventModal(); }} components={{ month: { dateHeader: CustomDateHeader, }, }} onNavigate={(newDate) => { setCurrentDate(newDate); }} />
Дополнительно:
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для передачи eventPropGetter в React Big Calendar вы можете использовать следующий подход:
1. Создайте функцию eventPropGetter в вашем компоненте, которая будет принимать event и start, end как параметры и возвращать объект с необходимыми свойствами стилей.
```html
function eventPropGetter(event, start, end, isSelected) { const style = { backgroundColor: 'blue', color: 'white', borderRadius: '0px', border: 'none' }; return { style: style }; }
```
2. Передайте эту функцию в качестве prop eventPropGetter в компонент BigCalendar.
```html
```
3. В вашем компоненте, использующем BigCalendar, убедитесь, что у вас правильно импортирован компонент BigCalendar и необходимые стили.
```html
import BigCalendar from 'react-big-calendar'; import 'react-big-calendar/lib/css/react-big-calendar.css';
```
Этот подход позволит вам передать eventPropGetter в React Big Calendar и настроить стили для событий в календаре. Не забудьте адаптировать стили и логику функции eventPropGetter под ваши потребности.