Visual Schedule is not resizing acording to times

Question

On my scheduler my events have a startTime and endTime and i can see it on the hrs below rhe event name but, the square is not resizing acording at its hour, like if the event starts at 12:00pm the color rectangule should only be half but instead its occupied all the space on the day

How ca i change it so that my events represent the square size based on the startand EndTime of events.

Also they can be two events on the same day, one which has a endTime of 1:00pm and the second one has and startTime of 1:30pm so both squares should be on the same day side by side, how can i do this?

And for the last question, how can i disable the time on the events, i dont want the scheduler to display thoses 12:00pm below the names of the events

Thanks for your response

Vijay Ravi · Answer

Hi Arturo,

Query 1: How can i change it so that my events represent the square size
based on the start and EndTime of events.We have already logged a feature request for this
requirement, and the feature will be included in any of our upcoming
releases. Track the status by using the feedback link below.Feedback: https://www.syncfusion.com/feedback/40605/support-to-render-the-appointments-on-the-provided-time-in-timeline-month-viewGenerally, we will plan any feature implementation
based on customer request count, feature rank, and Wishlist plan. You
can cast your vote in the feedback.

In the meantime, we have prepared an Angular Scheduler sample as a workaround
to address your requirement. We recommend utilizing the timeScale property to
adjust the interval, effectively simulating a timeline view. By setting the
interval to "1440" in the Scheduler’s timeScale property, the display
can be configured to meet your specifications.

[app.component.ts]

public timeScale: any = { enable: true, interval: 1440,
  slotCount: 1 };

timeScale property api: https://ej2.syncfusion.com/angular/documentation/api/schedule/#timescale
interval api: https://ej2.syncfusion.com/angular/documentation/api/schedule/timeScaleModel/#interval

Sample link: https://stackblitz.com/edit/number-of-events-with-resources-vsxfuc?file=src%2Fapp.component.ts

Query 2: How can i disable the time on the events, i dont want the scheduler
to display thoses 12:00pm below the names of the events?

We suggest overriding the default Scheduler styles to hide the time in
appointments. You can achieve this by setting the display property to none,
effectively hiding the time details within the appointment. Refer the below
shared styles for your reference.

.e-schedule .e-timeline-view .e-appointment .e-time, 
  .e-schedule .e-timeline-month-view .e-appointment .e-time
  {
        display: none !important;
  }

Sample link: https://stackblitz.com/edit/number-of-events-with-resources-vsxfuc?file=src%2Fapp.component.ts

Don't hesitate to get in touch if you require further help or more information.Regards,Vijay

Arturo Martinez · Answer

Thanks for the reply, got it working for both cases, one last question

I removed the time below each events, is it posible to center the name of the event now? since the event appears on top as if the time is just not visibkle but still using DOM space in the span

Vijay Ravi · Answer

Hi Arturo,

We would like to inform you that the schedule appointments' time has been
hidden using the display: none CSS property. However, even though it is
hidden, the element still gets rendered in the DOM. Based on your requirement
to display the subject div at the center, you can achieve this by overriding
the default schedule styles and adjusting the padding-top property for
the subject div within the appointment element. This will help in positioning
the text as desired. Refer the below shared style for your reference.

.e-schedule .e-timeline-view .e-appointment .e-subject, 
      .e-schedule .e-timeline-month-view
  .e-appointment .e-subject {
        padding-top:12px
  !important;
  }

Sample link: number-of-events-with-resources
(forked) - StackBlitz

Don't hesitate to get in touch if you require further help or more information.Regards,Vijay