Issue with Eventcalendar invalids when using data/display timezones

I’m attempting to show times before and after a shift as invalid. I’d previously implemented this as invalids

{
start: 'start_of_day',
end: 'start of shift',
resource: 'shift_id'
}, 
{
start: 'end_of_shift',
end: 'end_of_day',
resource: 'shift_id',
}

This has worked great until I got a requirement to display everything in the timezone of the current organization instead of the browser’s timezone.

I implemented timezones according to Welcome to the Mobiscroll Docs | Mobiscroll Documentation and this works fine until 15:00 UTC (ex: 2024-03-21T15:00:00Z)

At this point, the invalid is rendered for the whole day (greyed out).

Here’s a minimal reproduction of the issue:

/* eslint-disable @typescript-eslint/no-magic-numbers */
import type { MbscEventcalendarView } from '@mobiscroll/react'
import { Eventcalendar, luxonTimezone } from '@mobiscroll/react'
import '@mobiscroll/react/dist/css/mobiscroll.min.css'
// eslint-disable-next-line import/no-extraneous-dependencies
import * as luxon from 'luxon'
import type { ReactElement } from 'react'

const view: MbscEventcalendarView = {
	schedule: {
		type: 'day',
		allDay: false,
		timeCellStep: 30,
		timeLabelStep: 60
	}
}
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
luxonTimezone.luxon = luxon

export default function App(): ReactElement {
	return (
		<Eventcalendar
			theme='ios'
			themeVariant='light'
			clickToCreate={false}
			dragToCreate={false}
			dragToMove={false}
			dragToResize={false}
			eventDelete={false}
			view={view}
			data={[{ id: 1, resource: 1 }]}
			resources={[{ id: 1, assignment: 'test' }]}
			invalid={[
				{
					start: '2024-03-21T04:00:00Z',
					// Works
					// end: '2024-03-21T14:59:00Z',
					end: '2024-03-21T15:00:00Z',
					resource: 1
				}
			]}
			width='100%'
			selectedDate='2024-03-21'
			dataTimezone='utc'
			timezonePlugin={luxonTimezone}
			displayTimezone='America/New_York'
		/>
	)
}

2024-03-21T14:59:00Z as an end time works great. ‘2024-03-21T15:00:00Z’ does not. I also tried with America/Los_Angeles as the tz and had no luck

Hi @tomprince :wave:

As Szili mentioned on the other thread, this seems like a bug on our end.
Your voice is already added to a bug report and when it’s fixed, I’ll let you know.

1 Like

Hello @tomprince :wave:

Good news: we have shipped Mobiscroll 5.29.2, where we fixed an issue where the invalids were not always displayed correctly when used with timezones.

Here you can find a guide on how you can update the Mobiscroll version to the latest: Welcome to the Mobiscroll Docs | Mobiscroll Documentation.

1 Like

Thanks! This is awesome