No events this month.
\";\r\n const nextMonthCtaText = window.nextMonthCtaText || \"View {0} ({1} event(s))\";\r\n const prevMonthCtaText = window.prevMonthCtaText || \"View {0} ({1} event(s))\";\r\n const todaysDate = dayjs().startOf('day');\r\n const sortedEvents = sortEventsChronologically(pdpEvents);\r\n const startDate = sortedEvents[0]?.eventDate;\r\n const endDate = sortedEvents[sortedEvents.length - 1]?.eventDate;\r\n const dateRange = { startDate: dayjs(startDate).startOf('month').format(DATE_FORMAT), endDate: dayjs(endDate).endOf('month').format(DATE_FORMAT) };\r\n const calendarOfEvents = insertEventsIntoCalendar(pdpEvents, dateRange, true);\r\n const listHeading = useRef(null);\r\n const firstLoad = useRef(true);\r\n const appContainer = useRef(null);\r\n const [layoutType, setLayoutType] = useState(startWithList ? 'list' : 'calendar');\r\n const [currentMonth, setMonth] = useState(0);\r\n const [selectedDate, setSelectedDate] = useState(null);\r\n const [currentPage, setCurrentPage] = useState(1);\r\n const appIsInViewport = useInViewport(appContainer);\r\n const flatEventList = calendarOfEvents?.flatMap(month => {\r\n return month.days.flatMap(day => day.events);\r\n });\r\n const daysWithEvents = calendarOfEvents?.flatMap(month => {\r\n return month.days.filter(day => {\r\n return day.events.length > 0;\r\n });\r\n });\r\n const getCurrentEventList = () => {\r\n if (selectedDate) {\r\n return calendarOfEvents[currentMonth]?.days.filter(day => day.date == selectedDate).flatMap(day => day.events);\r\n }\r\n else {\r\n if (layoutType == 'calendar') {\r\n return calendarOfEvents[currentMonth]?.days.flatMap(day => day.events);\r\n }\r\n else {\r\n return flatEventList;\r\n }\r\n }\r\n };\r\n const allEvents = getCurrentEventList();\r\n let currentEvents = allEvents.filter(event => todaysDate.isBefore(event.eventDate));\r\n if (currentEvents.length == 0) {\r\n currentEvents = allEvents;\r\n }\r\n const totalMonths = calendarOfEvents.map(month => month.month);\r\n const monthSelected = (newMonth) => {\r\n setSelectedDate(null);\r\n setMonth(newMonth);\r\n };\r\n const nextAvailableDate = () => {\r\n const currentDateIndex = daysWithEvents.findIndex(day => dayjs(day.date).format(DATE_FORMAT) == selectedDate);\r\n if (currentDateIndex > -1 && currentDateIndex != daysWithEvents.length - 1) {\r\n let nextDayWithAvailableEvents = null;\r\n for (let i = currentDateIndex + 1; i < daysWithEvents.length; i++) {\r\n if (daysWithEvents[i].events.some(event => event.isAvailable && event.onSale)) {\r\n nextDayWithAvailableEvents = dayjs(daysWithEvents[i].date).format(DATE_FORMAT);\r\n break;\r\n }\r\n }\r\n return nextDayWithAvailableEvents;\r\n }\r\n else {\r\n return null;\r\n }\r\n };\r\n const goToNextAvailableDate = () => {\r\n const nextDate = nextAvailableDate();\r\n if (nextDate) {\r\n if (!dayjs(nextDate).isSame(totalMonths[currentMonth], 'month')) {\r\n setMonth(currentMonth + 1);\r\n }\r\n setSelectedDate(nextDate);\r\n }\r\n };\r\n const toggleLayout = () => {\r\n if (layoutType == 'list') {\r\n setLayoutType('calendar');\r\n }\r\n else {\r\n setLayoutType('list');\r\n }\r\n };\r\n const scrollToTopOfList = () => {\r\n if (listHeading.current) {\r\n listHeading.current.scrollIntoView({ block: \"start\" });\r\n listHeading.current.focus({ preventScroll: true });\r\n }\r\n };\r\n const navigateToPage = (page) => {\r\n setCurrentPage(page);\r\n scrollToTopOfList();\r\n };\r\n useEffect(() => {\r\n if (currentPage != 1) {\r\n setCurrentPage(1);\r\n }\r\n if (firstLoad.current == true) {\r\n firstLoad.current = false;\r\n }\r\n else {\r\n scrollToTopOfList();\r\n }\r\n }, [selectedDate, currentMonth]);\r\n useEffect(() => {\r\n setSelectedDate(null);\r\n setMonth(0);\r\n setCurrentPage(1);\r\n }, [layoutType]);\r\n useEffect(() => {\r\n if (appIsInViewport) {\r\n document.documentElement.setAttribute('data-calendar-on-screen', 'true');\r\n }\r\n else {\r\n document.documentElement.setAttribute('data-calendar-on-screen', 'false');\r\n }\r\n }, [appIsInViewport]);\r\n const quantityMessage = () => {\r\n let somePerformancesArray = replaceWithTags(showingSomePerformancesText, \"{0}\", {currentPage * paginationLimit - paginationLimit + 1} – {Math.min(currentPage * paginationLimit, currentEvents.length)}, \"{1}\", {currentEvents.length} performances);\r\n return ({ctaText}
);\r\n }\r\n };\r\n return (\r\n {dayjs(eventDate).format(\"MMM D\")}\r\n
\r\n\r\n {dayjs(eventDate).format(\"ddd\")}\r\n
\r\n\r\n {event?.eventTimeString} {!!event?.programName ? <>— : null}\r\n
\r\n {!!event?.moreInfo &&\r\n\r\n {getCta()}\r\n
\r\n\r\n \r\n {flag.description}\r\n