IsAllDay in Custom Editor Window
Hi team,
We currently try to rebuild the 'all day' logic in the editor dialog, but if we create a new appointment the EndTime is set to the next day. If the user then saves without changing anything, the appointment gets extended by a day.
Current template:
Standard editor dialog opens with 30.07.2024 for start and end.
Customized opens for 30.07 and 31.07 by clicking on the same cell.
Is there an easier way to do this?
Is there a sample that shows the code of the default editor window template that is rendered if you do not specify #editorTemplate in the schedule component? It would really help adding additional fields without injecting them with code during runtime.
Thanks,
Max
Hi Max,
Based
on your requirement we have prepared the below sample to set checkbox component for IsAllDay Field into custom template.
And IsAllDay field name mapping to different name Please try the below shared
sample and refer the above shared ug topic.
EditorTemplate UG: https://ej2.syncfusion.com/angular/documentation/schedule/editor-template#customizing-event-editor-using-template
Ug for field mapping: https://ej2.syncfusion.com/angular/documentation/schedule/appointments#adding-custom-fields
[app.component.html]
|
<div class="e-all-day-time-zone-row"> <div class="e-all-day-container"> <div class="e-float-input e-control-wrapper"> <input id="IsAllDay" class="e-field" type="text" name="AppointmentAllDay" style="width: 100%" /> All day </div> </div> </div> |
[app.component.ts]
|
public eventSettings = { fields: { isAllDay: { name: 'AppointmentAllDay' }, }, dataSource: [ { Id: 1, StartTime: new Date(2021, 6, 1), EndTime: new Date(2021, 6, 2), AppointmentAllDay: true, }, { Id: 2, StartTime: new Date(2021, 6, 4), EndTime: new Date(2021, 6, 5, 23, 59), AppointmentAllDay: true, }, ], };
public onPopupOpen(args: PopupOpenEventArgs): void { if (args.type === 'Editor') { let allDayEle: HTMLInputElement = args.element.querySelector( '#IsAllDay' ) as HTMLInputElement; if (!allDayEle.classList.contains('e-checkbox')) { if ( this.scheduleObj.currentView === 'Month' || args.target.classList.contains('e-header-cells') || args.target.classList.contains('e-all-day-cells') || args.target.classList.contains('e-all-day-appointment') ) { new CheckBox({ checked: true, change: this.onCheck }, allDayEle); } else { new CheckBox({ checked: true, change: this.onCheck }, allDayEle); } } if (allDayEle.checked == true) { debugger; document .querySelectorAll('.e-time-icon')[1] .classList.add('e-icon-disable'); document .querySelectorAll('.e-time-icon')[0] .classList.add('e-icon-disable'); (document.querySelector('#StartTime') as any).ej2_instances[0].format = 'M/d/yy'; (document.querySelector('#EndTime') as any).ej2_instances[0].format = 'M/d/yy'; ( document.querySelector('#StartTime') as any ).ej2_instances[0].value.setHours(0, 0, 0); } } public onCheck(args: any): void { debugger; if (args.checked === true) { document .querySelectorAll('.e-time-icon')[1] .classList.add('e-icon-disable'); document .querySelectorAll('.e-time-icon')[0] .classList.add('e-icon-disable'); (document.querySelector('#StartTime') as any).ej2_instances[0].format = 'M/d/yy'; (document.querySelector('#EndTime') as any).ej2_instances[0].format = 'M/d/yy'; ( document.querySelector('#StartTime') as any ).ej2_instances[0].value.setHours(0, 0, 0); ( document.querySelector('#EndTime') as any ).ej2_instances[0].value.setHours(0, 0, 0); (document.querySelector('#StartTime') as any).ej2_instances[0].dataBind(); } else { document .querySelectorAll('.e-time-icon')[1] .classList.remove('e-icon-disable'); document .querySelectorAll('.e-time-icon')[0] .classList.remove('e-icon-disable'); (document.querySelector('#StartTime') as any).ej2_instances[0].format = 'M/d/yy h:mm a'; (document.querySelector('#EndTime') as any).ej2_instances[0].format = 'M/d/yy h:mm a'; (document.querySelector('#StartTime') as any).ej2_instances[0].dataBind(); } }
|
Sample link: https://stackblitz.com/edit/angular-4c6ekx-thwokd?file=src%2Fapp.component.html,src%2Fapp.component.ts
Output
screenshot:
allDay check box in editor template:
Regards,
Vijay
