Same Date Event Side By Side
Im using the Booking example and I wanted to know if there's a way to make two events that one starts and one ends on the same date instead of be shown one below the other, like showing them one on the left half side and one of the right half side of the same day?
Example:
I want a display like this:
Hi
Naveen,
To meet your requirements, we suggest enabling the timescale property as true,
setting the interval to 1440, and the slot count to 1. Additionally, you can
set the interval property in the timelineDay view to achieve your requirements,
as shown in the shared code snippet below. Please try our shared sample for
your reference.
[app.component.html]
|
<ejs-schedule [timeScale]="timeScale" > <e-views> <e-view option="TimelineDay" [interval]="dayInterval"></e-view> </e-views> </ejs-schedule> |
[app.component.ts]
|
export class AppComponent { public timeScale: TimeScaleModel = { enable: true, interval: 1440, slotCount: 1 }; public dayInterval: number = 5; } |
Sample: timescale schedule (forked) - StackBlitz
Output screenshot:
Please get back to us if you need any further assistance.
Regards,
Vijay
Thanks for you response Vijay, the result is displayed as expected, but can I hide the time row that was added to the scheduler? or being able to make a button to toggle its visible state on the scheduler?
Hi Arturo,
To meet your requirement, you need to hide the time row in the scheduler. You can use CSS styles to override the default schedule styles, as shown in the styles shared below. Please refer to the sample shared below for your reference.
[styles]
|
.timeline-resource-grouping .e-time-slots { display: none; } |
[app.component.html]
|
<ejs-schedule #scheduleObj width='100%' cssClass='timeline-resource-grouping' height='650px' > |
Output screenshot:
Please get back to us if you need any further assistance.
Regards,
Vijay
It's working as expected with your example, however im seeing strange behavior when dragging it to another date and then coming back and when trying to increase the event duration with the mouse
When I drag a event to another date it resets the starting time at 12:00 AM so when I move it again to the same date it won't go sidebar side as before moving it, how can I change the default Start Date and End Date of an event so I can avoid this use case?
Ex:
Dragging it back to the same date, and now even thou the times don't overlaps it doesn't put them side by side
Thank you very much Vijay, exactly what I was looking for.
Just one question, how can I set the default hrs for a new event?
it always shows 12:00AM whenever im creating a new event, is there a way I can set that default hr to a custom one? same with the until Hr
Like I want each event to start at 9:00AM and End at 2:00Pm (for example)
Hi
Arturo,
Query 1: how can I set the default hours for a new event? it always shows 12:00AM whenever I am creating a new event.
You can change this time duration value by changing the duration option within the popupOpen event as shown in the below shared code snippet.
Setting Duration UG Documentation: https://ej2.syncfusion.com/angular/documentation/schedule/editor-template#customizing-the-default-time-duration-in-editor-window
Sample link: https://stackblitz.com/edit/timescale-duration-ajtnk2?file=src%2Fapp.component.ts
[app.component.ts]
|
onPopupOpen(args: PopupOpenEventArgs): void { if (args.type === 'Editor' ) { args.duration = 60; } |
Output screenshot:
Query
2: I want each event to start at 9:00AM and End at 2:00 Pm.
Based
on your query, we suspect that you need to save each events with startTime as 9
AM and endTime as 2 PM for all cells while creating an new event . Therefore,
We suggest you use the popupOpen event to set the default startTime, and
you can set the duration for your required endTime as shown in the shared code
snippet below.
Sample: timescale schedule (forked) - StackBlitz
[app.component.ts]
|
onPopupOpen(args: PopupOpenEventArgs): void { if (args.type === 'Editor' && !args.target?.classList.contains("e-appointment")) { args.duration = 300; // Set the start time to 9:00 AM const startTime = new Date(args.data.StartTime); startTime.setHours(9); (args.element as any).querySelector('.e-start').ej2_instances[0].value = startTime; } } |
Output screenshot:
Regards,
Vijay
