Multi-Week schedule visibility issue in Week/Month View

[Yongkee Cho]

I’m using the SfSchedule component in my booking application, and I’ve encountered an issue related to displaying reservations that span multiple weeks.

Current Behavior: When a reservation spans multiple weeks (e.g., from Nov 10 to Dec 5), it only appears in the initial week in weekly view and initial month in monthly view where the booking starts. If I navigate to subsequent weeks in the calendar view, the reservation does not show up, even though it is still active during those weeks.

Expected Behavior: Reservations should appear on all weeks they impact, so users can see ongoing bookings when scrolling through the calendar.

Question: Is there a built-in way to achieve this behavior in SfSchedule? Or do I need to implement a custom solution (e.g., splitting the appointment into multiple week segments or using a custom recurrence rule)?

Any guidance or best practices would be greatly appreciated.

Thank you!

[Vijay Ravi]

Hi Yongkee Cho,

Greetings from Syncfusion Support.
 

We have checked and validated your reported query for your requirement. We tested appointments that span multiple weeks and months and navigated to subsequent weeks/months in the calendar. In our validation, the spanning appointments rendered correctly and remained visible across all impacted weeks/months. We were unable to reproduce the issue where the reservation disappears on later weeks.

 

1. Share a minimal sample that replicates the problem, or
2. Replicate the issue in our shared sample.
3. Share the entire code snippets,
4. Share the css styles and appointment details

 

Sample link: https://blazorplayground.syncfusion.com/BjheMirsUmiFmZgC

 

Please get back to us with the required details for further assistance.

Regards,

Vijay

[Yongkee Cho]

<SfSchedule @ref="_scheduler"
            ID="scheduler"
            @bind-SelectedDate="@_selectedDate"
            @bind-CurrentView="@_currentView"
            TValue="Schedule"
            CssClass="e-droppable"
            AllowDragAndDrop="true"
            AllowMultiDrag="false"
            AllowMultiCellSelection="false"
            AllowOverlap="true"
            EnableAutoRowHeight="false"
            EnablePersistence="false"
            QuickInfoOnSelectionEnd="false"
            ShowQuickInfo="true"
            Timezone="@_timeZoneId"
            FirstDayOfWeek="@_firstDayOfWeek"
            ShowWeekNumber="@_showWeekNumber"
            WeekRule="@_weekRule"
            WorkDays="@_workDays"
            StartHour="@_dayStartHour"
            EndHour="@_dayEndHour"
            TimeFormat="@_timeFormat"
            Width="auto"
            Height="auto">
    <ScheduleViews>
        <ScheduleView Option="View.Day"></ScheduleView>
        <ScheduleView Option="View.Week"></ScheduleView>
        <ScheduleView Option="View.WorkWeek"></ScheduleView>
        <ScheduleView Option="View.Month" MaxEventsPerRow="4">
            <EventTemplate>
                @{
                    var schedule = context as Schedule;
                    <div class="e-time">@(schedule.StartTime.ToString("HH:mm", CultureInfo.InvariantCulture))</div>
                    <div class="e-subject">@schedule.Subject; @schedule.Location</div>
                }
            </EventTemplate>
        </ScheduleView>
        <ScheduleView Option="View.Agenda">
            <EventTemplate>
                @{
                    var schedule = context as Schedule;
                    <div style="display: unset">
                        <div class="e-subject-wrap">
                            <div class="e-subject">@schedule.Subject</div>
                            <div class="e-location">@schedule.Location</div>
                        </div>
                        <div class="e-reservedBy">
                            <span class="e-badge bg-dark text-white target" title="@schedule.ReservedBy">@schedule.ReservedBy</span>
                        </div>
                        <div class="e-date-time">@($"{schedule.StartTime.ToString("HH:mm", CultureInfo.InvariantCulture)} - {schedule.EndTime.ToString("HH:mm", CultureInfo.InvariantCulture)}")</div>
                    </div>
                }
            </EventTemplate>
        </ScheduleView>
    </ScheduleViews>
    <ScheduleEventSettings TValue="Schedule" Query="@_filterQuery" IgnoreWhitespace="true">
        <ChildContent>
            <SfDataManager AdaptorInstance="@typeof(ScheduleDataAdapter)" Adaptor="Syncfusion.Blazor.Adaptors.CustomAdaptor" />
            <ScheduleField>
                <FieldStartTimezone Name="StartTimeZone" Title="Start TimeZone"></FieldStartTimezone>
                <FieldEndTimezone Name="EndTimeZone" Title="End TimeZone"></FieldEndTimezone>
            </ScheduleField>
        </ChildContent>
        <Template>
            @{
                var schedule = context as Schedule;
                <div class="e-subject">@schedule.Subject</div>
                <div class="e-time">@($"{schedule.StartTime.ToString("HH:mm", CultureInfo.InvariantCulture)} - {schedule.EndTime.ToString("HH:mm", CultureInfo.InvariantCulture)}")</div>
                <div class="e-reservedBy">
                    <span class="e-badge bg-dark text-white target" title="@schedule.ReservedBy">@schedule.ReservedBy</span>
                </div>
                <div class="e-location">@schedule.Location</div>
            }
        </Template>
    </ScheduleEventSettings>
    <ScheduleEvents TValue="Schedule"
                    OnPopupOpen="OnPopupOpen"
                    OnPopupClose="OnPopupClose"
                    OnActionFailure="OnActionFailure"
                    OnCellDoubleClick="OnCellDoubleClick"
                    EventRendered="OnEventRendered" />
    <ScheduleWorkHours Start="@_workStartHour" End="@_workEndHour" />
    <ScheduleTemplates>
        <EditorTemplate>
            <ScheduleEdit Content="@(context as Schedule)" TimeZoneId="@_timeZoneId" ReadOnly="false" />
        </EditorTemplate>
    </ScheduleTemplates>
    <ScheduleQuickInfoTemplates TemplateType="TemplateType.Both">
        <ContentTemplate>
            @{
                SelectSchedule(context as Schedule);
                <ScheduleQuickInfo Content="@_selectedSchedule" />
            }
        </ContentTemplate>
    </ScheduleQuickInfoTemplates>
</SfSchedule>

<style>
    /* hide today button */


    .e-date-header-container {
        padding: unset;
    }


    .e-toolbar {
        border: unset;
        background-color: transparent;
        box-shadow: unset;
    }


        .e-toolbar .e-toolbar-item {
            background-color: transparent;
        }


            .e-toolbar .e-toolbar-item .e-today {
                display: none !important;
            }


    .e-treeview {
        border: unset;
    }


        .e-treeview .e-text-content {
            padding: 0;
        }


        .e-treeview .e-ul {
            padding: 0;
            overflow: unset;
        }


        .e-treeview .e-list-item {
            border: dotted 1px #222;
            margin-bottom: 5px;
            padding: 0px;
        }


        .e-treeview .e-list-text {
            line-height: unset;
        }


        .e-treeview .e-fullrow {
            background-color: #fff;
            margin: 0px 1px;
            width: 237px;
            height: 55px;
        }


        .e-treeview .e-list-item.e-active > .e-fullrow {
            background-color: var(--bs-gray-400);
        }


    .sidebar-close {
        margin-top: 16px;
        margin-right: 12px;
        display: flex;
        justify-content: flex-end;
    }


    .filters {
        padding: 65px 5px 0px 15px;
    }


        .filters .filter-header {
            font-size: 16px;
        }


        .filters .filter-body {
            margin: 0px 0px 0px 10px;
        }


            .filters .filter-body .filter-name {
                font-size: 12px;
                font-weight: 600;
                color: #777;
                padding-bottom: 5px;
            }


    .batch {
        padding: 10px 5px 0px 15px;
    }


        .batch .batch-header {
            display: flex;
            justify-content: space-between;
            font-size: 16px;
            margin-bottom: 10px;
        }


        .batch .batch-new {
            margin-top: 10px;
            display: flex;
            justify-content: flex-end;
        }


    .e-menu-item .e-focused {
        background-color: #777;
    }


    .e-schedule .e-vertical-view .e-work-hours.custom-class {
        background-color: orange;
    }


    .e-appointment-details .e-equipment {
        display: flex;
        column-gap: 3px;
        row-gap: 3px
    }


    .e-appointment-details .e-equipment {
        display: flex;
        text-overflow: ellipsis;
    }
</style>


@code {
// Calendar
private SfSchedule<Schedule>? _scheduler;
private Schedule? _selectedSchedule;
private CellClickEventArgs? _selectedCell;
private bool _isCell;
private bool _isEvent;
private bool _canNewBooking;
private bool _isRecurrence;
private bool _isResource;
private int _firstDayOfWeek;
private bool _showWeekNumber;
private CalendarWeekRule _weekRule = CalendarWeekRule.FirstDay;
private View _currentView = View.Week;
private string? _dayStartHour;
private string? _dayEndHour;
private string? _workStartHour;
private string? _workEndHour;
private string? _timeFormat;
private DateTime _selectedDate;
private int[]? _workDays = [1, 2, 3, 4, 5];
}

[Yongkee Cho]

As you can see on the next week, all-day-cells' height=0em seem to make them hidden.

[Yongkee Cho]

Ah ... looks like height=0em because there's no data in the next week.

[Yongkee Cho]

So it's not likely a style issue but more rendering issue. all-day-appointment spanning multiple weeks are not rendered in the next week or month.

[Yongkee Cho]

public class Schedule : IEquatable<Schedule>
{
    public Guid Id { get; set; }
    public string? Subject { get; set; }
    [Required]
    public string? ReservedBy { get; set; }
    [Required]
    public DateTime StartTime { get; set; }
    public string? StartTimeZone { get; set; }
    [Required]
    public DateTime EndTime { get; set; }
    public string? EndTimeZone { get; set; }
    public string? Location { get; set; }
    public string? Description { get; set; }
    public bool? IsAllDay { get; set; }
    public bool IsReadonly { get; set; }
    public Guid? RecurrenceId { get; set; }
    public string? RecurrenceRule { get; set; }
    public string? RecurrenceException { get; set; }
    public ISet<string>? EquipmetIds { get; set; }
    public virtual IList<Equipmet>? Equipmet { get; set; }
    public ISet<string>? BenchIds { get; set; }
    public virtual IList<Bench>? Benches { get; set; }
    public ISet<string>? BioSafetyCabinetIds { get; set; }
    public virtual IList<Equipmet>? BioSafetyCabinets { get; set; }
    public bool? CheckedIn { get; set; }
    public bool? CheckedOut { get; set; }
    public IList<string>? TestMethodBatches { get; set; }
    public string? DepartmentId { get; set; }
    public bool Archived { get; set; }
    public bool Equals(Schedule? other) => Id.Equals(other?.Id);
}

[Vijay Ravi]

Hi Yongkee Cho,
 

We have reviewed your query and, based on the code snippets you shared, prepared a sample on our end. In our sample, multi-week spanning appointments render correctly across previous and next weeks. The appointment DOM elements are created properly, and the height styles are applied as expected.

Please run our sample and let us know whether the issue reproduces. If the problem occurs only in your application, compare your implementation with our sample to identify differences. If you are still facing the issue, please share a minimal reproducible example or modify our shared sample to replicate the problem so we can investigate further.

Don't hesitate to get in touch if you require further help or more information.

Regards,

Vijay

Attachment: video_demo_for_spanning_appointment_193d78d2.zip

[Vijay Ravi]

Hi Yongkee Cho,

Here is the attached sample link for your reference.

Sample link: https://blazorplayground.syncfusion.com/LZVoiMLzfdqhVxqO

Regards,
Vijay