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
  1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. Scheduler change row height

Scheduler change row height

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

15 Replies
KK Karthigeyan Krishnamurthi Syncfusion Team February 11, 2019 12:21 AM

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


AR Arwin February 11, 2019 06:46 AM

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?


KK Karthigeyan Krishnamurthi Syncfusion Team February 12, 2019 04:54 AM

 
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 
  
 


AR Arwin February 12, 2019 05:22 AM

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)?


KK Karthigeyan Krishnamurthi Syncfusion Team February 13, 2019 01:26 AM

 
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 
 


AR Arwin February 13, 2019 03:44 AM

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

KK Karthigeyan Krishnamurthi Syncfusion Team February 14, 2019 12:04 AM

  
Thanks for your update.  
 
Regards, 
Karthigeyan 


AR Arwin March 6, 2019 05:24 AM

Hi Karthigeyan,

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

KK Karthigeyan Krishnamurthi Syncfusion Team March 7, 2019 04:19 AM

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 
 
 
 


AR Arwin March 7, 2019 05:11 AM

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.

KK Karthigeyan Krishnamurthi Syncfusion Team March 8, 2019 12:48 AM

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


AR Arwin March 8, 2019 03:28 AM

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.

KK Karthigeyan Krishnamurthi Syncfusion Team March 11, 2019 08:00 AM

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 


VL Vladimirs replied to Karthigeyan Krishnamurthi January 29, 2021 06:14 AM

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;
      }

VD Vinitha Devi Murugan Syncfusion Team February 1, 2021 02:28 AM

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


Loader.
Live Chat Icon For mobile
Up arrow icon