How to set the width automatically to show all events

[Alex]

Hi, we are trying to fit as much data into the scheduler, however when we set the start and end times we have to scroll across to view all of the events (as shown below) how can we get all of the events displayed and the cell width automatically reduced?

Interestingly, when using Chrome and we open and close the dev tools (f12) the scheduler resizes and shows more events (as shown below).

Thanks,

Alex

[Vinitha Devi Murugan]

Hi Alex,

Greetings from Syncfusion support.

We have validated your reported query “how can we get all of the events displayed and the cell width automatically reduced” and suspect that you want to remove the horizontal scroller while rendering scheduler to view all the events and achieved it by using following CSS with TimeScale property. We have prepared the below sample for your reference.

Sample: https://www.syncfusion.com/downloads/support/forum/168660/ze/ScheduleSample1428185392

<SfSchedule TValue="ResourceAppointmentData" Width="100%" Height="800px" @bind-SelectedDate="@CurrentDate" @bind-CurrentView="@CurrentView" CssClass = "schedule-cell-dimension" >

<ScheduleGroup Resources="@GroupData">ScheduleGroup>

<ScheduleResources>

<ScheduleResource TItem="ResourceData" TValue="int" DataSource="@ProjectData" Field="ProjectId" Title="Choose Project" Name="Projects" TextField="Text" IdField="Id" ColorField="Color">ScheduleResource>

<ScheduleResource TItem="ResourceData" TValue="int[]" DataSource="@TaskData" Field="TaskId" Title="Category" Name="Categories" TextField="Text" IdField="Id" GroupIDField="GroupId" ColorField="Color" AllowMultiple="true">ScheduleResource>

ScheduleResources>

<ScheduleTimeScale Enable="false" />

<ScheduleViews>

<ScheduleView Option="View.TimelineDay">ScheduleView>

<ScheduleView Option="View.TimelineWeek">ScheduleView>

<ScheduleView Option="View.TimelineMonth">ScheduleView>

ScheduleViews>

<ScheduleEventSettings DataSource="@DataSource">ScheduleEventSettings>

SfSchedule>

<style>

.schedule-cell-dimension.e-schedule .e-timeline-view .e-date-header-wrap table col,

.schedule-cell-dimension.e-schedule .e-timeline-view .e-content-wrap table col {

width: 40px;

}

.schedule-cell-dimension.e-schedule .e-timeline-month-view .e-date-header-wrap table col,

.schedule-cell-dimension.e-schedule .e-timeline-month-view .e-content-wrap table col {

width: 20px;

}

.schedule-cell-dimension.e-schedule .e-timeline-view .e-content-wrap,

.schedule-cell-dimension.e-schedule .e-timeline-month-view .e-content-wrap {

overflow-x: hidden;

}

style>

Kindly try with the above sample and get back to us if you need any further assistance.

Regards,

Vinitha

[Jameel Shah]

This is the the result that we are getting, and this is not what we want, we need a way to set the width of the cell such a way that user doesn't have to scroll to view all the available slot and it should be fit in one view.

at the moment width is dynamic and changes when you change the slots

[Vinitha Devi Murugan]

Hi Jameel, 

  

Sorry for the inconvenience. 

 

We have validated your reported query and suspect that you want to remove the horizontal scroller while rendering scheduler and achieved it by using below CSS. We have prepared the below sample for your reference. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/168660/ze/RemoveHorizontalScrollBar453276485  

 

.schedule-cell-dimension.e-schedule .e-timeline-view .e-date-header-wrap table col, 

.schedule-cell-dimension.e-schedule .e-timeline-view .e-content-wrap table col, 

.schedule-cell-dimension.e-schedule .e-timeline-month-view .e-date-header-wrap table col, 

.schedule-cell-dimension.e-schedule .e-timeline-month-view .e-content-wrap table col { 

    width: auto !important; 

} 

 

Kindly try with the above sample and get back to us if you need any further assistance. 

 

Regards, 

Vinitha