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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Schedule timeline auto row height bottom margin

Thread ID:

Created:

Updated:

Platform:

Replies:

148781 Nov 4,2019 11:31 AM UTC Sep 4,2020 09:14 AM UTC Angular - EJ 2 14
loading
Tags: Schedule
Jan van Rossum
Asked On November 4, 2019 11:31 AM UTC

Hi there,

We are using the timeline schedule with auto row height enabled. 
It looks similar like this one:
https://ej2.syncfusion.com/demos/schedule/adaptive-rows/

I would like to know if there is a way to reduce the bottom margin of the rows.
See the space marked in yellow in this screenshot:


Setting a fixed height for all rows is not an option since some resources have multiple appointments in the same time frame.
Therefore we have the need for a flexible height.

Thanks for your reply.

Vinitha Devi Murugan [Syncfusion]
Replied On November 5, 2019 01:05 PM UTC

Hi Jan, 
 
Syncfusion Greetings 
 
Q1: The height of the bottom margin could not be decreased because we left some fixed blank space for the event creation. 
 
Q2: If enabling rowAutoHeight property it auto-adjust the height of work cells based on the number of appointments present in the same time ranges.  
 
Regards, 
M.Vinitha devi 


Jan van Rossum
Replied On November 7, 2019 08:02 AM UTC

Hi M.Vinitha devi,

We have reduced the height of the events.
Also, in our use case you cannot create an event on a time that already has an event. 
Therefore we have no need for the bottom margin.
We just want to make the rows as compact as possible.

Here's a screenshot to give you an idea of the current view:

Is there really no way to reduce the bottom margin?

I know we can do this:
    .e-schedule .e-timeline-view .e-time-cells-wrap table th,
    .e-schedule .e-timeline-view .e-work-cells,
    .e-schedule .e-timeline-view .e-resource-cells {
        height36px !important;
    }
But this doesn't take auto row height in account.
Also, when you disable auto row height with this CSS selector, it will not show any events, only "n more".
Even though the events with reduced height will fit in this height.

Any help would be greatly appreciated.

Vinitha Devi Murugan [Syncfusion]
Replied On November 8, 2019 12:04 PM UTC

Hi Bookzo, 
 
Thanks for your update.  
 
Currently we don’t have option to remove hole bottom margin like your shared image but we already logged a feature request on this and it can be tracked through our feedback portal below and fix will be available on our volume 4 main release which is expected to be roll out by the mid of December 2019. 
 
 
Regards, 
M.Vinitha devi.  


Jan van Rossum
Replied On November 13, 2019 03:29 PM UTC

Hi M.Vinitha devi,

That's good to hear!
We will keep an eye out for the volume 4 release.
Do you already have an idea how it will be configurable in this release?


Jan van Rossum
Replied On November 14, 2019 07:32 AM UTC

Hi M.Vinitha devi,

Thanks for your reply.
The link is still not working (server error).

Furthermore: would you please remove our e-mail address in your last reply? Thank you.

Vinitha Devi Murugan [Syncfusion]
Replied On November 15, 2019 07:42 AM UTC

Hi Bookzo, 
 
We removed our last update and we also suspect that you try to access the link when the portal server under service. Please check it now and revert for further assistance. 
 
Regards, 
M.Vinitha devi 


Dawid Namyslak
Replied On August 4, 2020 08:01 AM UTC

Hello
I would like to know if this issue was resolved in the last update ?
https://www.syncfusion.com/feedback/7536/provide-support-for-events-to-occupy-the-entire-cell-height

how to make the event fill the whole row height ?
what is the command for that ?

Vinitha Devi Murugan [Syncfusion]
Replied On August 5, 2020 07:49 AM UTC

Hi Bookzo,
 

Thanks for your update.

The issue has been resolved in our volume 4 Service Pack release v17.4.0.46. Based on your requirement, we have prepared the below sample with enableMaxHeight property that can available in below link.


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

Note: When we enable rowAutoHeight the enableMaxHeight property is limited. Since the rowAutoHeight property adjusts the height of the row according to the height of events. And if rowAutoHeight is enabled the enableMaxHeight does not work.

Regards,
M.Vinitha devi



Dawid Namyslak
Replied On August 5, 2020 10:59 AM UTC

Hi Bookzo,
 

Thanks for your update.

The issue has been resolved in our volume 4 Service Pack release v17.4.0.46. Based on your requirement, we have prepared the below sample with enableMaxHeight property that can available in below link.


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

Note: When we enable rowAutoHeight the enableMaxHeight property is limited. Since the rowAutoHeight property adjusts the height of the row according to the height of events. And if rowAutoHeight is enabled the enableMaxHeight does not work.

Regards,
M.Vinitha devi



Thank you.
How can I apply this property only to the TIMELINE day view ?

I am using 
<e-view displayName="{{ 'module.visit.scheduler.views.timelineDay' | translate }}" option="TimelineDay"></e-view>

Vinitha Devi Murugan [Syncfusion]
Replied On August 6, 2020 04:37 AM UTC

Hi Bookzo,

Thanks for your update.

We achieved your requirement by making use of dataBound event of our scheduler. We have prepared a sample below for your reference. 


onDataBound(args){
      if(this.currentView === "TimelineDay"){
        this.scheduleObj.eventSettings.enableMaxHeight = true;
      } else{
        this.scheduleObj.eventSettings.enableMaxHeight = false;
      }
    }

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

Regards,
M.Vinitha devi


Dawid Namyslak
Replied On August 6, 2020 06:14 AM UTC

Vinitha Devi Murugan    Thank you ! 
Working like a charm :)



Vengatesh Maniraj [Syncfusion]
Replied On August 6, 2020 06:27 AM UTC

Hi Dawid, 

You are most welcome. 

We are happy that our solution has fulfilled your requirement. 

Please get in touch with us if you need any further assistance. 

Regards, 
Vengatesh  


Jan van Rossum
Replied On September 3, 2020 01:52 PM UTC

Hi there,

Unfortunately our issue is not totally resolved.

I have made a Stackblitz based on your examples to make clear how we are using the scheduler:
https://stackblitz.com/edit/angular-91pms1?file=app.component.ts

We have the following requirements:
  • There can be multiple appointments in one resource at the same time, they should all be visible
  • The schedule should be as compact as possible because there can be a lot of resources. Therefore we have reduced the height of the appointments. And we need to get rid of as much spacing as possible.
What we would like is to get rid of this spacing:


To support viewing multiple resources, we need rowAutoHeight on true.
But like you said, in this case the new enableMaxHeight property does not work...

Do you know of any other way to get around this?
Thanks for your reply.

Vinitha Devi Murugan [Syncfusion]
Replied On September 4, 2020 09:14 AM UTC

Hi Bookzo,   
    
Thanks for your update.  
    
The requirement “Reduce empty spacing” can be achieved by enabling ignoreWhitespace option of eventSettings property.  
    
We have prepared a sample for your reference and the same can be available in following link.   
   

 
 
    public eventSettings: EventSettingsModel = {
        dataSource: <Object[]>extend([], resourceData.concat(timelineResourceData), null, true), ignoreWhitespace: true
    };

 
    .e-schedule .e-timeline-view.e-ignore-whitespace .e-work-cells, .e-schedule .e-timeline-view.e-ignore-whitespace .e-resource-cells, .e-schedule .e-timeline-month-view.e-ignore-whitespace .e-work-cells, .e-schedule .e-timeline-month-view.e-ignore-whitespace .e-resource-cells {
        height: 26px;
    }

 
 Output:  
  
And for further reference, kindly refer the below link,   
  
  
Kindly try the above sample and get back to us if you need any further assistance.  
  
Regard,  
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