Display events that take place overnight, on two different dates, in Day View

[Jessica Newman]

I need to display events from 8pm EST to 7am EST (overnight) and it's not working in the Day view (Weekly and Monthly views work just fine). Data shown below -- id 11889 startTime is 5/1 930PM EST. id 11890 startTime is 5/2 4:30am EST. As shown in my code, how do I get these appointments to display? (Neither show at the moment -- it would make sense to me that the first one would display since my selectedDate is 5/1, but neither are shown). 

Data: [{

        "id": 11889,

        "startTime": "2024-05-02T01:30:00.000Z",

        "endTime": "2024-05-02T01:45:00.000Z",

        "subject": "Meeting 1",

        "patientId": 62, },

    { "id": 11890,

        "startTime": "2024-05-02T08:30:00.000Z",

        "endTime": "2024-05-02T08:45:00.000Z",

        "subject": "Meeting 2",

        "patientId": 62, }]

For context on some of the variables in the code. 

SelectedDate: "2024-05-02T00:00:00.000Z"

CurrentView: "Day"

StartHour: 20:00

EndHour: 6:59

<ScheduleComponent

ref={scheduleObjRef}

eventSettings={{ dataSource: data, template: renderEventTemplate }}

showHeaderBar={false}

selectedDate={selectedDate || new Date()}

currentView={currentView}

timeScale={{ enable: true, interval: 30, slotCount: 2 }}

group={{ resources: ['Patients'] }}

resourceHeaderTemplate={data => <ResourceHeaderTemplate data={data} />}

startHour={format24HrTime(period.from())}

endHour={format24HrTime(period.to())}

cellClick={onCellClick}

eventClick={onEventClick}

popupOpen={args => (args.cancel = true)}

>

<ResourcesDirective>

<ResourceDirective field="patientId" idField="id" name="Patients" dataSource={patients} />

</ResourcesDirective>

<Inject services={[Day, Week, Month]} />

</ScheduleComponent>

[Jessica Newman]

Hi - Can someone please tend to this inquiry? It is a time sensitive feature I need to push into production.

Thank you. 

[Jessica Newman]

Hi - Why is it taking so long to get a response here? I really need a solution to this and have spent hours deciphering the underlying behavior to cause this discrepancy and have yet to find a fix.

[Ram Raju Elaiyaperumal]

Hi Jessica Newman,

Sorry for the delay,

We understand that you are experiencing issues with appointments not rendering correctly in the Day view.

And from the information you've provided, it appears that the startHour is set to 20:00 and the endHour is set to 6:59. Please note that the startHour and endHour properties are used to specify the start and end times of a single day. In your current configuration, the startHour is later than the endHour, which could be causing the issue.

Another potential cause of the problem could be that the events do not fall within the specified startHour and endHour range. For example, if you have an appointment from 21:45 to 5:30, but your startHour and endHour are set to 8:00 and 20:00 respectively, the appointment will not be visible because it falls outside of this range.

We also found in your Data the time range specified is only 15 mins, if  your requirement is to render the appointments for multiple days, kindly modify the EndTime.

For a better understanding of how the startHour and endHour properties work, we have prepared a statckblitz sample and tested in EST timezone and the appointments are rendering properly.

https://stackblitz.com/edit/schedule-starthour

Please review and get back to us if you need further assistance.

Regards,

Ram