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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

how to set column width and height in scheduler timeline view

Thread ID:

Created:

Updated:

Platform:

Replies:

143130 Mar 5,2019 07:34 PM UTC Jan 22,2020 05:51 AM UTC ASP.NET Core - EJ 2 3
loading
Tags: Scheduler
vaidas
Asked On March 5, 2019 07:34 PM UTC

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>


Karthigeyan Krishnamurthi [Syncfusion]
Replied On 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 


Marko Bezjak
Replied On 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

Vengatesh Maniraj [Syncfusion]
Replied On 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 


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