No timescale custom appointments schedule height

[Arrash Nekonam]

I am using the scheduler and I want to style the events to show data on there from my api (at the moment just dummy data). I am setting the timescale enabled to false and have set css to change the height of the events etc. The first issue I had was that events would overlap and not show the full event. I added some css to fix this but now whenever I have a certain amount of events they go out with the schedule height. How can I fix this? I am using angular 17. I have attached my html, ts and scss files.

Attachment: syncfusionschedule_f16a7bac.zip

[Vijay Ravi]

Hi Arrash,

 

We have checked your reported query with your shared files. We suggest you set the rowAutoHeight property to true and refer to the styles below that have been used in your application to resolve the issue mentioned. Refer to the shared sample for your reference. Kindly try it out

 

[app.component.css]

 

.schedule-event-template.e-schedule

  .e-vertical-view

  .e-content-wrap

  .e-appointment {

  border: solid grey 1px;

  border-radius: 8px;

  background: white;

}

.schedule-event-template.e-schedule .template-wrap .subject {

  font-weight: 600;

  font-size: 15px;

  color: black;

}

.schedule-event-template.e-schedule .template-wrap .time {

  font-size: 12px;

  padding: 4px;

  color: black;

}

.schedule-event-template.e-schedule .template-wrap .description {

  font-size: 12px;

  padding: 4px;

  color: black;

}

.schedule-event-template.e-schedule .template-wrap .footer {

  padding: 4px;

  color: black;

}

.schedule-event-template.e-schedule .e-appointment {

  height: 120px !important;

}

 

Sample Link: Xxedsp (forked) - StackBlitz

 

please get back to us if you need any further assistance

 

Regards,

Vijay