Monthly View Does not display events when half day, always makes them full day

[Arturo Martinez]

On my week view the events that end on certain hours are displayed as half day on the calendar, but this is not the case for month view, it always renders them as if they where using the full day

This event ends on March 25 9:00am but its taking all the day

[Swathi Ravi]

Hi Arturo,

Thank you for reaching out to us!

Currently, we don't have the support for rendering the appointment with the provided time in the TimelineMonth view. We already logged a feature request for your requirement, and the feature will be included in any of our upcoming releases. Track the status by using the feedback link below.

 

Feedback: support to render the appointments on provided time in timeline month view in Angular | Feedback Portal

 

Generally, we will plan any feature implementation based on customer request count, feature rank, and Wishlist plan. You can cast your vote in the aforementioned feedback.

Meanwhile, you can try this workaround by using the TimelineDay view with an interval of 30 days and adjusting the interval and slotCount properties to create a monthly layout. This will ensure that appointments are displayed only within the specified time range. For example, if an appointment starts at 2 PM and ends at 10 AM the following day, it will only occupy that specific time range.

We hope this approach meets your requirements. Please review the sample and let us know if it works as expected.

Sample: https://stackblitz.com/edit/ang-scheduler-render-appointments-on-provided-t-re4etvt5?file=src%2Fapp.component.html

app.componnet.html:

 

 <ejs-schedule #scheduleObj [timeScale]="timeScale">

      <ng-template #dateHeaderTemplate let-data>

        <div class="date-text">{{getDateHeaderText(data.date)}}</div>

      </ng-template>

      <e-views>

        <e-view option="TimelineDay" [interval]="dayInterval"></e-view>

      </e-views>

 </ejs-schedule>

app.component.ts:

  public dayInterval: number = 30;

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

  public instance: Internationalization = new Internationalization();

  getDateHeaderText: Function = (value: Date) => {

    return this.instance.formatDate(value, { format: 'd MMM' });

  };

app.component.css:

.e-schedule .e-timeline-view .e-date-header-wrap table tbody td.e-time-slots {

  display: none;

}

Regards,

Swathi