How to adjust TimelineDay column width for split shifts? (Using split shifts feature)

[Krystian Jandy]

Hi, I’m using the Syncfusion Scheduler in a TimelineDay view with custom intervals (31 and 7 days) so that my events can be split if they cross midnight. I’ve been following the guidance from this thread: https://www.syncfusion.com/forums/188094/split-shifts-events-over-multple-days

Here’s my configuration:

```

this.views = [

  {

    displayName: 'Monthly View',

    option: 'TimelineDay',

    interval: 31,

    timeScale: {

      enable: true,

      interval: 1440,

      slotCount: 1,

      majorSlotTemplate: this.majorSlotTemplate,

    },

  },

  {

    displayName: 'Weekly View',

    option: 'TimelineDay',

    interval: 7,

    timeScale: {

      enable: true,

      interval: 1440,

      slotCount: 1,

      majorSlotTemplate: this.majorSlotTemplate,

    },

  },

];

```

And in my template:

```

<ng-template #majorSlotTemplate let-data>

  {{ getMajorSlotText(data.date) }}

</ng-template>

<ng-template #dateHeaderTemplate let-data>

  <div class="date-text">

    {{ getDayNumber(data.date) }}

  </div>

</ng-template>

```

However, I’ve noticed that in this setup the TimelineDay view columns are very short, and as a result, the events themselves are rendered very short. I would like to adjust the column widths to create a more balanced and readable layout.

- How can I customize the width of each day’s column in this TimelineDay view with custom intervals

- Are there any specific Scheduler properties or CSS overrides that can help achieve a more compact and legible layout for both the columns and the events?

Any guidance or code examples would be greatly appreciated!

Thank you in advance.

[Ashokkumar Karuppasamy]

Hi Krystian Jandy,

You can override the schedule styles below and set the width as needed to meet your requirements. The event width will be automatically adjusted based on the width of the schedule cells. The attached code snippet and sample demonstration are provided below.

Sample: schedule-timescale-custom (forked) - StackBlitz

[index.html]

            .e-schedule .e-timeline-view .e-date-header-wrap table col, .e-schedule .e-timeline-view .e-content-wrap table col, .e-schedule .e-timeline-month-view .e-date-header-wrap table col, .e-schedule .e-timeline-month-view .e-content-wrap table col {

                width: 250px;

            }

Screenshot:



 Please try the suggested solution and let us know if you need any further assistance.

Regards,
Ashok