Angular scheduler grid and event height customization

Question

Hello TeamCan similar example use in angular resource timeline view ?https://www.syncfusion.com/forums/142575/scheduler-change-row-heightCan we reduce scheduler grid height and event detailsto have similar as in attached screenshot?

Vinitha Devi Murugan · Answer

Hi Mohit, 
 
Greetings from Syncfusion Support. 
 
We have prepared a sample for your requirement ‘reduce schedule grid height’ by reducing the height of the scheduler and ‘reduce appointment height’ using below CSS which can be viewed from the following link.  
 
https://stackblitz.com/edit/angular-reduce-scheduler-grid-height-and-app-height?file=app.component.html  
 
let scheduleOptions: ScheduleModel = {  
  width: "100%",  
  height: "250px",  
 
 
/*  Reduce Appointment Height */ 
.e-schedule .e-timeline-view .e-appointment, .e-schedule .e-timeline-month-view .e-appointment { 
  height:19px !important; 
} 
 
UG: https://ej2.syncfusion.com/angular/documentation/schedule/scheduler-styling/  
 
Please try the above solution and let us know whether it helps you. 
 
Regards, 
Vinitha

Raj Maheshwari · Answer

Thank you VinithaI will try this, I am positive this will workApologies, my first query was not clear - my query was to see if we can reduce the height of row to around 32px [ please refer the left arrow in the screenshot above ] .Please let me know how we can achieve this.Thanks again for your assistance :)Mohit

Raj Maheshwari · Answer

Here is the screenshotred arrows shows the reduced height of resource timeline which i am trying to achivegreen arrow shows current height of the resource timeline ThanksMohit

Vinitha Devi Murugan · Answer

Hi Mohit, 
 
Thanks for your update. 
 
We have validated your reported  
 
We have achieved your requirement “reduce the height of row to around 32px" by making use of below CSS. You can refer the sample from the following link. 
 
https://stackblitz.com/edit/angular-reduce-scheduler-grid-height-and-app-height-u4hffr?file=app.component.ts  
 
.e-schedule .e-timeline-view .e-resource-cells, .e-schedule .e-timeline-month-view .e-resource-cells { 
  height: 32px !important; 
} 
.e-schedule .e-timeline-view .e-resource-group-cells { 
  height: 32px !important; 
} 
.e-schedule .e-timeline-view .e-work-cells, .e-schedule .e-timeline-month-view .e-work-cells { 
  height: 32px !important; 
} 
/*  Reduce Appointment Height */ 
.e-schedule .e-timeline-view .e-appointment, .e-schedule .e-timeline-month-view .e-appointment { 
  height:10px !important; 
} 
 
Output: 
  
 
Note: The minimum height of resource cells and work cells are dynamically assigned based on scheduler height internally. We could not reduce the height of the resource cells and work cells below the minimum-height. So we suggest you to set minimum height to the Scheduler to achieve above requirement. 
 
Kindly try with the above sample and get back to us if you need any further assistance. 
 
Regards, 
Vinitha

Raj Maheshwari · Answer

Hi VinithaThank you for your help and support of this great syncfusion productWhat is the recommended / right way to optimally reduce the gird row to minimal height while having the event subject is visible.We would like our users to see most of the resources on the screen while reviewing the availability of them.Our competitor is having compact and optimal timeline view (provided in first thread in screenshot).I wonder if this can be achieved in right way on syncfusion scheduler without compromising existing functionality.to remove +more spacing we tried using[rowAutoHeight]="true" see the excess space in screenshot below, which we are wondering how we can save by reducing and optimizing the height.Thank you so much for helping us.We really appreciate the time and assistance provided for this.ThanksMohit

Vinitha Devi Murugan · Answer

Hi Mohit,

Thanks for your update.

We have validated your reported

We have achieved your requirement “What is the recommended / right way to optimally reduce the gird row to minimal height while having the event subject is visible." by making use of rowAutoHeight and ignoreWhitespace properties of our scheduler. You can refer the sample from the following link.

https://stackblitz.com/edit/angular-reduce-scheduler-grid-height-and-app-creation-height?file=app.component.ts

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

Output:

We suggest you to refer below UG to disable bottom space of appointment by occupying entire cell height.

https://ej2.syncfusion.com/angular/documentation/schedule/appointments/#appointments-occupying-entire-cell

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

Regards,

Vinitha