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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Scheduler change row height

Thread ID:

Created:

Updated:

Platform:

Replies:

142575 Feb 8,2019 02:29 PM UTC Feb 1,2021 07:28 AM UTC JavaScript - EJ 2 15
loading
Tags: Schedule
Arwin
Asked On February 8, 2019 02:40 PM UTC

Hi,

How can I change the row height of the scheduler rows?
I have set this:
.e-schedule .e-vertical-view .e-time-cells-wrap table td, .e-schedule .e-vertical-view .e-work-cells {
    height: 22px;
}
But now the event names are not shown correctly (see event second column on 13:30 in attachment). The max-height of the element is set incorrectly by the lib so I assume that the way I have changed the height is incorrect.

Is there a way to fix this?

Thanks!



Attachment: examplerowheight.png_46a8c2e7.zip

Karthigeyan Krishnamurthi [Syncfusion]
Replied On February 11, 2019 05:21 AM UTC

 
Thank you for contacting Syncfusion support. 
 
Kindly refer the below links to know more about Scheduler cell height customization. 
 
Regards, 
Karthigeyan 


Arwin
Replied On February 11, 2019 11:46 AM UTC

Hi Kathigeyan,

Thanks for the reply. 

Unfortunately it won't work, I have now changed it to this:
.e-schedule .e-vertical-view .e-date-header-wrap table col,
.e-schedule .e-vertical-view .e-content-wrap table col {
    width: 44px;
}

.e-schedule .e-vertical-view .e-time-cells-wrap table td,
.e-schedule .e-vertical-view .e-work-cells {
    height: 22px;
}

.e-schedule .e-month-view .e-work-cells,
.e-schedule .e-month-view .e-date-header-wrap table col {
    width: 44px;
}

.e-schedule .e-month-view .e-work-cells {
    height: 44px;
}

For example, if I change 44px to 50px and 22px to 25px it will work good. But smaller then the appointment description is not working good. If I change it smaller then 22px the whole alignment of the agenda will fail.

Is there a way to make the selectable cells less high?


Karthigeyan Krishnamurthi [Syncfusion]
Replied On February 12, 2019 09:54 AM UTC

 
Thanks for your update. 
 
Our previous solution is the correct way to customize the cell height and width. The CSS used in your update will overide the default event customization which is the cause for the issue not recommended. The height property will customize the entire Scheduler height. 
 
Regards, 
Karthigeyan 
  
 


Arwin
Replied On February 12, 2019 10:22 AM UTC

Hi Karthigeyan,

Thank you for the reply, could you look at this example: https://stackblitz.com/edit/v5biuf?file=index.html
Here can you see that the time slots on the left are not aligned with the events on the right. How can I fix this (with a cell height of 15px)?


Karthigeyan Krishnamurthi [Syncfusion]
Replied On February 13, 2019 06:26 AM UTC

 
Thanks for your update. 
 
In Scheduler each cells minimum height is 36px and in your sample height is set to 15px which is the cause for the issue. Kindly use the below code example and we have modify your sample below. 
 
.schedule-cell-dimension.e-schedule .e-vertical-view .e-time-cells-wrap table td, 
    .schedule-cell-dimension.e-schedule .e-vertical-view .e-work-cells { 
        height: 36px; 
    } 
 
Regards, 
Karthigeyan 
 


Arwin
Replied On February 13, 2019 08:44 AM UTC

That is unfortunate, thanks for the answer. Hopefully this will be possible in the future.

Karthigeyan Krishnamurthi [Syncfusion]
Replied On February 14, 2019 05:04 AM UTC

  
Thanks for your update.  
 
Regards, 
Karthigeyan 


Arwin
Replied On March 6, 2019 10:24 AM UTC

Hi Karthigeyan,

Are there any plans to reduce the minimum height for cells? Because this is very important to us.

Karthigeyan Krishnamurthi [Syncfusion]
Replied On March 7, 2019 09:19 AM UTC

Hi Arwin, 
 
We have maintained the minimum height as 36px and 50px for vertical and timeline view for better visiblity and apperance. There is no plan to reduce it and please let us know your excat requirement in detail so that we can proceed further. 
 
Regards, 
Karthi 
 
 
 


Arwin
Replied On March 7, 2019 10:11 AM UTC

If you want to create an appointment that can be start every 15 minutes (for example 13:15 till 14:30) without changing every time the start/end time. Than you set the Timescale to interval: 60, slotCount: 4. But then you have to have a really large screen to view the whole day (from 8:00 till 18:00u).

So the main problem is, if you want to create appointments with a 15 minutes interval, the scheduler height become so large that you have to scroll every time to have a overview of the whole day.

Karthigeyan Krishnamurthi [Syncfusion]
Replied On March 8, 2019 05:48 AM UTC

Hi Arwin, 
 
We can change the default 30mins interval in editor window without timescale option, kindly refer the below link. 
 
 
Regards, 
Karthi 


Arwin
Replied On March 8, 2019 08:28 AM UTC

Hi Karthi,

Thank you for the response. But the solution that you mention is not an option. If you want to be able to create an appointment every 15 minutes (duration not important, can be 1 hour, 1.25 hour, 1.5 hour), then you have to set the timescale to interval: 60/30/15, slotCount: 4/2/1. Only with that timescale you are able to create an appointment every 15 minutes without changing the time afterwards. And with that timescale you cannot see the whole day from 8am to 6pm because the cells are very high.

Karthigeyan Krishnamurthi [Syncfusion]
Replied On March 11, 2019 12:00 PM UTC

Hi Arwin,  
  
Thanks for your update. 
 
We have prepared the sample to customize the cell height to 15px as below. 
 
.schedule-cells.e-schedule .e-vertical-view .e-time-cells-wrap table td, 
    .schedule-cells.e-schedule .e-vertical-view .e-work-cells { 
      height: 15px; 
    } 
 
    .e-schedule .e-vertical-view .e-time-cells-wrap table td, 
    .e-schedule .e-vertical-view .e-work-cells { 
      font-size: 9px; 
    } 
 
In the above sample we have also customized the left time column font size to prevent misalignment. On further reducing the height, we need to customize the other elements to prevent misalignment and to avoid this burden at your end, we recommend to customize the cell height greater than its minimum height. 
 
Regards, 
Karthi 


Vladimirs
Replied On January 29, 2021 11:14 AM UTC

Hi Arwin,  
  
Thanks for your update. 
 
We have prepared the sample to customize the cell height to 15px as below. 
 
.schedule-cells.e-schedule .e-vertical-view .e-time-cells-wrap table td, 
    .schedule-cells.e-schedule .e-vertical-view .e-work-cells { 
      height: 15px; 
    } 
 
    .e-schedule .e-vertical-view .e-time-cells-wrap table td, 
    .e-schedule .e-vertical-view .e-work-cells { 
      font-size: 9px; 
    } 
 
In the above sample we have also customized the left time column font size to prevent misalignment. On further reducing the height, we need to customize the other elements to prevent misalignment and to avoid this burden at your end, we recommend to customize the cell height greater than its minimum height. 
 
Regards, 
Karthi 


thanks for this help for me to reduce 50px  to 30 px.
 .e-schedule .e-timeline-view .e-date-header-wrap table col,
      .e-schedule .e-timeline-view .e-content-wrap table col,
      .e-schedule .e-timeline-month-view .e-date-header-wrap table col,
      .e-schedule .e-timeline-month-view .e-content-wrap table col {
        width: 30px;
      }

Vinitha Devi Murugan [Syncfusion]
Replied On February 1, 2021 07:28 AM UTC

Hi Arwin, 
 
Thanks for your update. 
 
You are most welcome 😊 
 
Regards, 
Vinitha 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon