We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Schedule - increase the cell width (ie., Day)

I have a question on how to increase the width of a group of cells (ie., day). For example, if I drag a bunch of events (ie., 10-20) for a given day and within a short period of time (ie., 10am-11am).  I noticed the group of events shrink its width since the "day" is a specific width (see the image in the zip file). I would like to increase the width of the day along with keeping the event's width the same and not decrease its width. Also, I would like to do this on the horizontal axis for a given user.



Attachment: schedule1_2cabf5c8.zip

9 Replies

AA Arulraj A Syncfusion Team September 17, 2018 02:51 AM

Hi Patrick, 

Thanks for using Syncfusion product. 

You can achieve your requirement by increasing cell width by setting the width to the schedule columns using the CSS style based on each view class. Please refer to the following code example to set the width depends on the view. 
 
Vertical View: 
 
Code Example: 
Default.component.ts page: 
import { Component, ViewEncapsulation } from '@angular/core'; 
import { extend } from '@syncfusion/ej2-base'; 
import { EventSettingsModel, DayService, WeekService, WorkWeekService, MonthService, AgendaService } from '@syncfusion/ej2-ng-schedule'; 
import { scheduleData } from './datasource'; 
 
@Component({ 
    selector: 'control-content', 
    templateUrl: 'default.html', 
    styles: [`     
     .schedule-cell-dimension.e-schedule .e-vertical-view.e-day-view .e-work-cells,  
   .schedule-cell-dimension.e-schedule .e-vertical-view.e-day-view .e-date-header-wrap table col,  
    .schedule-cell-dimension.e-schedule .e-vertical-view.e-day-view .e-content-wrap table col {  
        width: 400px;  
    }  
 
    .schedule-cell-dimension.e-schedule .e-vertical-view.e-week-view .e-work-cells,  
    .schedule-cell-dimension.e-schedule .e-vertical-view.e-week-view .e-date-header-wrap table col,  
    .schedule-cell-dimension.e-schedule .e-vertical-view.e-week-view .e-content-wrap table col {  
        width: 300px;  
    }  
 
    .schedule-cell-dimension.e-schedule .e-vertical-view.e-work-week-view  .e-work-cells,  
    .schedule-cell-dimension.e-schedule .e-vertical-view.e-work-week-view  .e-date-header-wrap table col,  
    .schedule-cell-dimension.e-schedule .e-vertical-view.e-work-week-view  .e-content-wrap table col {  
        width: 250px;  
    }  
 
    .schedule-cell-dimension.e-schedule .e-month-view .e-work-cells,  
    .schedule-cell-dimension.e-schedule .e-month-view .e-date-header-wrap table col {  
        width: 300px;  
    }`], 
    encapsulation: ViewEncapsulation.None 
 
}) 
export class DefaultComponent { 
    public selectedDate: Date = new Date(2018, 1, 15); 
    public eventSettings: EventSettingsModel = { dataSource: <Object[]>extend([], scheduleData, null, true) }; 
    public cssClass: string = 'schedule-cell-dimension'; 
} 
 
 
 
Timeline View: 
 
Code Example: 
Default.component.ts page: 
import { Component, ViewEncapsulation } from '@angular/core'; 
import { extend } from '@syncfusion/ej2-base'; 
import { EventSettingsModel, View, TimelineViewsService, TimelineMonthService, AgendaService, ResizeService, DragAndDropService } from '@syncfusion/ej2-ng-schedule'; 
import { scheduleData } from './datasource'; 
 
@Component({ 
    selector: 'control-content', 
    templateUrl: 'default.html', 
    styles: [`     
  .schedule-cell-dimension.e-schedule .e-timeline-view.e-timeline-day-view .e-work-cells,  
  .schedule-cell-dimension.e-schedule .e-timeline-view.e-timeline-day-view .e-date-header-wrap table col,  
 .schedule-cell-dimension.e-schedule .e-timeline-view.e-timeline-day-view .e-content-wrap table col {  
     width: 150px;  
 }  
 
.schedule-cell-dimension.e-schedule .e-timeline-view.e-timeline-week-view .e-work-cells,  
 .schedule-cell-dimension.e-schedule .e-timeline-view.e-timeline-week-view .e-date-header-wrap table col,  
 .schedule-cell-dimension.e-schedule .e-timeline-view.e-timeline-week-view .e-content-wrap table col {  
     width: 200px;  
 }  
 
.schedule-cell-dimension.e-schedule .e-timeline-view.e-timeline-work-week-view  .e-work-cells,  
 .schedule-cell-dimension.e-schedule .e-timeline-view.e-timeline-work-week-view  .e-date-header-wrap table col,  
 .schedule-cell-dimension.e-schedule .e-timeline-view.e-timeline-work-week-view  .e-content-wrap table col {  
     width: 200px;  
 }  
 
.schedule-cell-dimension.e-schedule .e-timeline-month-view .e-work-cells,  
 .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: 300px;  
 }`], 
    encapsulation: ViewEncapsulation.None 
 
}) 
export class DefaultComponent { 
    public selectedDate: Date = new Date(2018, 1, 15); 
    public eventSettings: EventSettingsModel = { dataSource: <Object[]>extend([], scheduleData, null, true) }; 
    public cssClass: string = 'schedule-cell-dimension'; 
    public currentView: View = 'TimelineWeek'; 
} 
 
 
 
Kindly try with the above code example and sample and let us know if you need any further assistance on this. 

Arulraj A 



PW Patrick Whittingham September 17, 2018 10:51 AM

Hi,

I see how the CSS markup will change the width of columns, but I might an individual day (ie., Sun 11 ) to increase while the other days stay the same. I guess some Javascript would be involved to add a different class to increase the width.


Please see the image in the zip file


Attachment: schedule2_4609f9f7.zip


AA Arulraj A Syncfusion Team September 18, 2018 01:34 AM

Hi Patrick, 

Thanks for the update. 

We are sorry to let you know that currently there is no specific option to customize the single day (ex: Sunday) width. Therefore, could you please share some more details about this requirement like actual scenario of expecting to increase the particular day width. The information provided by you will be more helpful for us to analyze your requirement further and provide you a possible solution. 

Arulraj A 
  



PW Patrick Whittingham September 20, 2018 11:11 AM

I hope the attachment shows the use-case visually. By increasing the width of a single day (ie., Sunday), the user will be able to see all of the content for each event for that specific day. Currently, I can only see some of the content of each event and as I add more events for a short period of time (ie., 10am-11am), the content becomes more shrunken and useless. Also, one can use this functionality on the horizontal axis showing users and allowing a single user to expand its height when adding more events for a short period of time (ie., 10am-11am). Both of these situations are most important in the day view. 

I know that Google calendar shows some of the events with a cell and shows an up-arrow to view the other events. This could be an optional feature.

If I was going to perform this functionality via Javascript, I would make sure if the events near each other's height is greater than the height of the height of the user, I would add a new class containing the new height of the user. I would delete the 'old' class from this user's cell(s). Just my 2 cents.

The scheduler component seems to need this new functionality. We will be using React

Attachment: schedule2_528e0dca.zip


AA Arulraj A Syncfusion Team September 20, 2018 10:16 PM

Hi Patrick, 

Thanks for your update. 

Please find the following response for your queries. 

Query #1: Increase width for single day: 
 
As we mentioned earlier there is no specific option to customize the single day (ex: Sunday) width. Therefore, we recommend you to use our workdays option to display only required days (ex: you can display only the days which is having appointments) and to avoid use less days (i.e. remove the rendering of days which doesn’t having the appointments) along with the given option (i.e. CSS markup) to meet your requirement. Please refer to the following sample link to know about the workdays option. 
 

Query #2: I know that Google calendar show some of the events with a cell and shows an up-arrow to view the other events. This could be an optional feature. 
 
There is an option to view the more/remaining event details for the particular cell/day as shown in the following screenshot. If your requirement is different from this kindly share some more details like sample link or required option screenshot. 
 
 
Screenshot: 
 
 

Query #3: If I was going to perform this functionality via Javascript, I would make sure if the events near each other's height is greater than the height of the height of the user, I would add a new class containing the new height of the user. I would delete the 'old' class from this user's cell(s). Just my 2 cents. The scheduler component seems to need this new functionality. We will be using React. 
 
We regret to let you know that, we are unclear about this scenario whether you are expecting this for increasing the single day width or to show case the up arrow to view the events or to add the additional class to the each events which is displaying in the Schedule control. Therefore, could you please share some more clear information about this to proceed further and provide you the possible solution. 

Kindly try with the above suggestion and let us know if you need any further assistance on this. 

Arulraj A 



PW Patrick Whittingham September 25, 2018 05:31 AM

Your possible solution to "Query #1" does work for my situation, since we will have an 'appointment planner' which will contain multiple users ( 2 - 1000) and the events will be dragged from one user to another user. 
 I want to nominate a new feature to the scheduler to allow for the "Query #1" functionality. This dynamic functionality will increase the height of the user's cells (ie., Day view) for the entire day (12:00 am - 11:59 pm), if the height of multiple events (ie, 10 events, 30px/event, near 11am - 11:30 am) are greater than the height of the user's cells (ie., 100 px). This ability will make the scheduler have a better user experience.



AA Arulraj A Syncfusion Team September 26, 2018 03:08 AM

Hi Patrick, 

Thanks for your update. 

We have considered your requirement “Provide auto fit support in Schedule control” and added it to our feature request list which will be available in any of our upcoming release. 
 
We appreciate your patience until then.  

Arulraj A 



KK Karthigeyan Krishnamurthi Syncfusion Team March 14, 2019 04:35 AM

Hi  Patrick,   
   
Adaptive row feature is included in Volume 1, 2019 beta. 
 
Regards, 
Karthi 
 



KK Karthigeyan Krishnamurthi Syncfusion Team March 14, 2019 10:38 PM

Hi Patrick,   
 
Please find the below Volume 1, 2019 beta download link. 
 
Regards, 
Karthi 


Loader.
Live Chat Icon For mobile
Up arrow icon