diff --git a/media_commons_booking_app/src/client/routes/booking/components/RoomCalendar.tsx b/media_commons_booking_app/src/client/routes/booking/components/RoomCalendar.tsx index 35a57f6f..8dd6c062 100644 --- a/media_commons_booking_app/src/client/routes/booking/components/RoomCalendar.tsx +++ b/media_commons_booking_app/src/client/routes/booking/components/RoomCalendar.tsx @@ -12,6 +12,7 @@ import googleCalendarPlugin from '@fullcalendar/google-calendar'; import interactionPlugin from '@fullcalendar/interaction'; // for selectable import { serverFunctions } from '../../../utils/serverFunctions'; import timeGridPlugin from '@fullcalendar/timegrid'; // a plugin! +import { HIDING_STATUS } from '../../../../policy'; const TITLE_TAG = '[Click to Delete]'; @@ -47,9 +48,54 @@ export const RoomCalendar = ({ ); }, []); + function renderEventContent(eventInfo) { + const match = eventInfo.event.title.match(/\[(.*?)\]/); + const title = match ? match[1] : eventInfo.event.title; + + const startTime = new Intl.DateTimeFormat('en-US', { + hour: '2-digit', + minute: '2-digit', + hour12: true, + }).format(eventInfo.event.start); + const endTime = new Intl.DateTimeFormat('en-US', { + hour: '2-digit', + minute: '2-digit', + hour12: true, + }).format(eventInfo.event.end); + + let backgroundColor = ''; + // Change the background color of the event depending on its title + if (eventInfo.event.title.includes(BookingStatusLabel.REQUESTED)) { + backgroundColor = '#d60000'; + } else if ( + eventInfo.event.title.includes(BookingStatusLabel.PRE_APPROVED) + ) { + backgroundColor = '#f6c026'; + } else if (eventInfo.event.title.includes(BookingStatusLabel.APPROVED)) { + backgroundColor = '#33b679'; + } + return ( +