Show Scheduler without Scrollbar

Question

Hi , basically I need to show the scheduler without the Scrollbar. (i.e) 12am to 11.59pm need to be accomodated within a single page without any
scrollbar.

See the attached pic.I have time (12am to 11.59pm), but there is a scrollbar and using which we can slide down and see the other events corresponding to
the other times.I actually need to show all times within without the scrollbar.

I tried the below code:

.e-schedule .e-vertical-view .e-time-cells-wrap table td, .e-schedule .e-vertical-view .e-work-cells {
    height: 18px; 
}

However the above reduces my scheduler cell size(scrollbar is still there).But reducing the height further below just makes the UI ugly.
Moreover this code is not working in all screen sizes.

So is there a way where-in I can accomodate my Scheduler without a scrollbar ? If so kindly tell, how to.

Attachment: height_df3757cd.zip

Hareesh Balasubramanian · Accepted Answer

Hi Adi, 

Thanks for the update. 

We have modified our previously updated sample based on your shared resolution “1366 * 768” which can be viewed form the following link. 

Sample: https://stackblitz.com/edit/angular-customized-cell-width-sample-zcxfot?file=app.component.css  





.e-schedule .e-vertical-view .e-time-cells-wrap table td, 
.e-schedule .e-vertical-view .e-work-cells { 
  height: 11px; 
  font-size: 6px; 
} 

Note: Kindly adjust the height based on your system resolutions. 

Kindly try the above solution and get back to us if you need any further assistance. 

Regards, 
Hareesh

Hareesh Balasubramanian · Answer

Hi Adi, 

Greetings from Syncfusion Support..! 

We have validated your shared snippets and query at our end and could reduce the width without any misalignments up to “17px” and if you need to reduce below that level then you need to reduce the corresponding font-size also. And for that, we have prepared a sample by customizing it without the vertical scroller which can be viewed from the following link. 

Sample: https://stackblitz.com/edit/angular-customized-cell-width-sample?file=app.component.ts  





.e-schedule .e-vertical-view .e-time-cells-wrap table td, 
.e-schedule .e-vertical-view .e-work-cells { 
  height: 14px; 
  font-size: 9px; 
} 

Kindly try the above solution and get back to us if you need any further assistance. 

Regards, 
Hareesh

Adi · Answer

Thanks for the reply Hareesh.I tried your snippet and it does show me scrollbar in my system. My screen resolution is 1366 x 768I also tried them in this site for multi-screen-resolution.Seems like in higher end resolutions its not showing properly.

Adi · Answer

Hi Hareesh,I highly appreciate your efforts !It does work  like a charm !1.Now the event card is looking big.Could you kindly tell, how to change the font size of the event cards as well.2.Is there a universal solution to do this irrespective of screen resolution? Because it won't work in higher resolutions.Thanks & Regards,Adi

Ravikumar Venkatesan · Answer

Hi Adi, 

Thanks for the update. 

how to change the font size of the event 

We can change the font size of the Schedule events with the help of the CSS style shown below. 

[app.component.css] 




  .e-appointment-details .e-subject, 
  .e-appointment-details .e-time, 
  .e-appointment-details .e-location { 
    font-size: 10px !important; 
  } 

Is there a universal solution to do this irrespective of screen resolution? 

We have achieved your requirement by applying the different styles based on the resolution as shown in the below CSS styles. 

[app.component.css] 




@media only screen and (max-height: 768px) and (max-width: 1366px) { 
  .e-schedule .e-vertical-view .e-time-cells-wrap table td, 
  .e-schedule .e-vertical-view .e-work-cells { 
    height: 11px; 
    font-size: 6px; 
  } 
  .e-appointment-details .e-subject, 
  .e-appointment-details .e-time, 
  .e-appointment-details .e-location { 
    font-size: 6px !important; 
  } 
 
  tr.e-header-row td, 
  td.e-left-indent, 
  .e-left-indent-wrap, 
  td.e-header-cells { 
    height: 30px !important; 
  } 
 
  .e-left-indent { 
    border-bottom: 1px solid #0000001f; 
  } 
 
  .e-schedule .e-vertical-view .e-header-cells .e-header-day, 
  .e-schedule .e-vertical-view .e-header-cells .e-header-date { 
    font-size: 8px; 
  } 
} 
 
@media only screen and (max-height: 1200px) and (max-width: 1920px) { 
  .e-schedule .e-vertical-view .e-time-cells-wrap table td, 
  .e-schedule .e-vertical-view .e-work-cells { 
    height: 20px; 
    font-size: 12px; 
  } 
  .e-appointment-details .e-subject, 
  .e-appointment-details .e-time, 
  .e-appointment-details .e-location { 
    font-size: 10px !important; 
  } 
 
  tr.e-header-row td, 
  td.e-left-indent, 
  .e-left-indent-wrap, 
  td.e-header-cells { 
    height: 36px !important; 
  } 
 
  .e-left-indent { 
    border-bottom: 1px solid #0000001f; 
  } 
 
  .e-schedule .e-vertical-view .e-header-cells .e-header-day, 
  .e-schedule .e-vertical-view .e-header-cells .e-header-date { 
    font-size: 12px; 
  } 
} 

Sample: https://stackblitz.com/edit/angular-customized-cell-width-sample-g51117?file=app.component.css 

Kindly try the above sample and get back to us if you need any further assistance. 

Regards, 
Ravikumar Venkatesan