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. Image for the cookie policy date
  1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. how to set column width and height in scheduler timeline view

how to set column width and height in scheduler timeline view

How to make certain width of all cells/columns in scheduler timeline view.

When i make something similar like below, i got only header cells 20 px, and i need all the cells\columns to be 20 px.

  <ejs-schedule id="schedule"
                      height="800"                      
                      cssClass="schedule-cell-dimension"


<style type="text/css">
    .schedule-cell-dimension.e-schedule .e-vertical-view .e-date-header-wrap table col,
    .schedule-cell-dimension.e-schedule .e-vertical-view .e-content-wrap table col {
        width: 20px;
    }

    .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: 20px;
    }
    .schedule-cell-dimension.e-schedule .e-timeline-month-view .e-work-cells,
    .schedule-cell-dimension.e-schedule .e-timeline-month-view .e-date-header-wrap table col {
        width: 20px;
    }    
    .schedule-cell-dimension.e-schedule .e-month-view .e-work-cells,
    .schedule-cell-dimension.e-schedule .e-month-view .e-date-header-wrap table col {
        width: 20px;
    }
    .e-schedule .e-timeline-month-view .e-date-header-wrap table tbody td {
        width: 20px;
    }
    .schedule-cell-dimension.e-schedule .e-month-view .e-work-cells {
        height: 20px;
    }    
</style>


3 Replies
KK Karthigeyan Krishnamurthi Syncfusion Team March 6, 2019 07:14 AM UTC

Hi Vaidas, 
 
Thank you for contacting Syncfusion support. 
 
Kindly use the below CSS for timeline views. 
 
.schedule-cell-dimension.e-schedule .e-timeline-view .e-date-header-wrap table col, 
.schedule-cell-dimension.e-schedule .e-timeline-view .e-content-wrap table col { 
    width: 20px; 
} 
 
.schedule-cell-dimension.e-schedule .e-timeline-view .e-time-cells-wrap table td, 
.schedule-cell-dimension.e-schedule .e-timeline-view .e-work-cells { 
    height: 20px; 
} 
 
Note: In Schedule, each cell minimum height is set to 36px for vertical and 50px for timeline views, so it is not recommended to set the values below it. 
 
Regards, 
Karthigeyan 


MB Marko Bezjak January 21, 2020 02:16 PM UTC

Hello,

I resized my cells in timeline-grouping but after that my cells wont render correctly sometimes. I think it depends on screen size or screen scale.

example:


Can you please provide me with a solution to this problem. I want my cells to be 40px wide and events to be 20px tall.

Regards.
Marko

VM Vengatesh Maniraj Syncfusion Team January 22, 2020 05:51 AM UTC

Hi Vaidas, 

Thanks for the update. 

We can adjust the cell wide and event tall like by overriding CSS like below 

For Cell width: 
.schedule-cell-dimension.e-schedule .e-timeline-view .e-date-header-wrap table col, 
.schedule-cell-dimension.e-schedule .e-timeline-month-view .e-content-wrap table col, 
.schedule-cell-dimension.e-schedule .e-timeline-view .e-content-wrap table col { 
      width: 40px; 
} 


For Event height: 
.e-appointment { 
     height: 20px !important; 
} 
 

Kindly check the above sample and revert us for further assistance. 

Regards, 
Vengatesh 


Loader.
Up arrow icon