Scheduler change row height

[Arwin]

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]

Hi Arwin,  

 

Thank you for contacting Syncfusion support. 

 

Kindly refer the below links to know more about Scheduler cell height customization. 

https://ej2.syncfusion.com/javascript/demos/#/material/schedule/cell-dimension.html 

https://ej2.syncfusion.com/documentation/schedule/timescale/#setting-different-time-slot-duration 

https://ej2.syncfusion.com/javascript/demos/#/material/schedule/time-scale.html 

 

Regards, 

Karthigeyan 

[Arwin]

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]

Hi Arwin, 

 

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. 

https://ej2.syncfusion.com/documentation/api/schedule/#height 

https://ej2.syncfusion.com/javascript/demos/#/material/schedule/time-scale.html 

https://ej2.syncfusion.com/documentation/schedule/timescale/?no-cache=1  

 

Regards, 

Karthigeyan 

  

 

[Arwin]

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]

Hi Arwin, 

 

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. 

https://stackblitz.com/edit/v5biuf-msy4q2?file=index.html 

 

.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]

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

[Karthigeyan Krishnamurthi]

Hi Arwin,  

  

Thanks for your update.  

 

Regards, 

Karthigeyan 

[Arwin]

Hi Karthigeyan,

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

[Karthigeyan Krishnamurthi]

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]

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]

Hi Arwin, 

 

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

https://ej2.syncfusion.com/javascript/documentation/schedule/editor-template/?no-cache=1#customizing-the-default-time-duration-in-editor-window 

 

 

Regards, 

Karthi 

[Arwin]

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]

Hi Arwin,  

  

Thanks for your update. 

 

We have prepared the sample to customize the cell height to 15px as below. 

https://stackblitz.com/edit/c5jmnn?file=index.html 

 

.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]

Hi Arwin,  

  

Thanks for your update. 

 

We have prepared the sample to customize the cell height to 15px as below. 

https://stackblitz.com/edit/c5jmnn?file=index.html 

 

.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]

Hi Arwin, 

 

Thanks for your update. 

 

You are most welcome 😊 

 

Regards, 

Vinitha