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
