Set Zoom Levels on Scheduler

[matteomessmer]

Good Morning,

Is there a way to implement zoom in and out for the Schedule Component when displaying a Timeline view? I would like to be able to zoom +/- along the x-axis.

Moreover, I would like to implement the "Zoom to fit" functionality. In particular, I'm using a timeline month view and for the interval, I would like to be able to fit it to the page.

Thank you,

Matteo Messmer

[Ruksar Moosa Sait]

Hi Matteomessmer,

Greetings from Syncfusion support.

We have checked on your requirement and you can make the Schedule fit to the page by overwrite the default CSS classes like the below. We have prepared a sample for your reference.

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

.e-schedule .e-timeline-view .e-content-wrap table col {

  width: 26px;

}

.e-schedule .e-timeline-view .e-resource-left-td,

.e-schedule .e-timeline-month-view .e-resource-left-td {

  width: 150px;

}

.e-schedule .e-timeline-view .e-date-header-wrap,

.e-schedule .e-timeline-month-view .e-date-header-wrap {

  font-size: 10px !important;

}

Sample: https://stackblitz.com/edit/react-1jqavr?file=index.js,index.css

Output:

Kindly try the above sample and let us know if this meets your requirement.

Regards,

Ruksar Moosa Sait

[matteomessmer]

Thank you!

[Vinitha Devi Murugan]

Hi matteomessmer,

Thanks for your update.

You are most welcome 😊. Please let us know, if you need any further assistance.

Regards,

Vinitha