Schedule timeline auto row height bottom margin

[Jan van Rossum]

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]

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]

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 {

        height: 36px !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]

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. 

 

https://www.syncfusion.com/feedback/7536/provide-support-for-events-to-occupy-the-entire-cell-height  

 

Regards, 

M.Vinitha devi.  

[Jan van Rossum]

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?

P.S. the link https://www.syncfusion.com/feedback/7536/provide-support-for-events-to-occupy-the-entire-cell-height results in a server error page.

[Jan van Rossum]

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]

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]

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]

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.

Sample: https://stackblitz.com/edit/event-to-occupy-ful-height

API: https://ej2.syncfusion.com/angular/documentation/api/schedule/eventSettingsModel/#enablemaxheight

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]

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.

Sample: https://stackblitz.com/edit/event-to-occupy-ful-height

API: https://ej2.syncfusion.com/angular/documentation/api/schedule/eventSettingsModel/#enablemaxheight

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]

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. 

sample: https://stackblitz.com/edit/event-to-occupy-ful-height-view-specific?file=app.component.ts

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]

Vinitha Devi Murugan    Thank you ! 

Working like a charm :)

[Vengatesh Maniraj]

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]

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]

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.   

   

Sample:  https://stackblitz.com/edit/ignore-whitespace-sample-refexb 

 

 

    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,   

  

API link: https://ej2.syncfusion.com/angular/documentation/api/schedule/eventSettingsModel/#ignorewhitespace 

  

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

  

Regard,  

Vinitha