How to make Calendar works from 8 PM to next day 2 AM in same view

[Hani]

How to make Calendar works from 8 PM to next day 2 AM in same view
as like in Ramadan we work for after midnight or shifts overall can be from 10 PM to 2 AM

[Mugunthan Ramalingam]

Hi Hani,

In SfCalendar, the Day view renders time slots from top to bottom within a single calendar date. Because of this vertical rendering behavior, an appointment that crosses midnight (for example, 8:00 PM to 2:00 AM) will be split across two separate day columns and will not display as a single continuous block. This is the current expected behavior of the Day view.

However, you can achieve this requirement by using CalendarView.timelineDay combined with the numberOfDaysInView property in TimeSlotViewSettings. The timeline view renders time slots horizontally and based on the number of days specified in numberOfDaysInView, it spans across those days and renders the cross-midnight appointment as one continuous bar flowing seamlessly across the day columns without any issues.

We have shared the code snippet for your reference,

SfCalendar(

  view: CalendarView.timelineDay,

  timeSlotViewSettings: const TimeSlotViewSettings(

    startHour: 0,

    endHour: 24,

    numberOfDaysInView: 2,

    timeIntervalWidth: 72,

    timeFormat: 'h:mm a',

  ),

  . . .

)

Please feel free to contact us if you need any further assistance. We are happy to help.

Regards,

Mugunthan.

[Clone 51 Job]

Thanks for your answer! I agree in you

[miller chaney]

It depends on which calendar component you're using. Some libraries support displaying hours past midnight in the same day view, while others don't. Could you let us know which calendar or framework you're working with (Syncfusion, FullCalendar, DevExpress, space waves, etc.)? That will make it much easier to suggest the right approach.

[Mugunthan Ramalingam]

Hi Miller,

Thank you for your suggestion.

Based on the requirement discussed in this thread, we have already provided the recommended approach and a sample demonstrating how this scenario can be achieved. For anyone following this discussion, please refer to the solution shared above.

If there are any further questions or additional requirements related to this scenario, please let us know.

 

Regards,
Mugunthan.