Add event and show them on scheduler

Question

Q1: if you could provide me with example of how the data should be (because i tried everything and nothing show ?Q2: when i click save button the event is not shwoing on the planning (only when i use editor template) ?Q3: an also if you could provide me with logic of the checkbox isAllDaythank you !component.Html :

Component.ts : import {Component, Input, OnInit, ViewChild} from '@angular/core';import { EventSettingsModel, GroupModel, View, TimeScaleModel, HeaderRowsModel, ScheduleComponent, WorkHoursModel, PopupOpenEventArgs} from "@syncfusion/ej2-angular-schedule";import {Collaborateur} from "../../interfaces/Collaborateur";import {Planning} from "../../interfaces/Planning";import {isNullOrUndefined, L10n} from "@syncfusion/ej2-base";import {ChangeEventArgs} from "@syncfusion/ej2-angular-calendars";import {CollaborateurService} from "../../services/PlanningService/Collaborateur.service";import {extend} from "@syncfusion/ej2-angular-grids";L10n.load({ 'en-US': { 'schedule': { 'saveButton': 'Enregistrer', 'cancelButton': 'Annuler', 'deleteButton': 'Supprimer', 'newEvent': '', } }});@Component({ selector: 'app-weektable', templateUrl: './weektable.component.html', styleUrls: ['./weektable.component.css'],})export class WeektableComponent implements OnInit{ @Input() activeCollaborateur: Collaborateur[] = []; @Input() selectedDate!: Date; @ViewChild('scheduleObj') public scheduleObj?: ScheduleComponent; @ViewChild('editorTemplate') public editorTemplate?: any; collaborateurs: any[] = []; plannings: Planning[] = []; constructor(private collabateurservice: CollaborateurService) { } dropCollab: Object[] = []; statusData:any[] = []; ngOnInit(): void { this.collaborateurs = this.activeCollaborateur.map(x => {return {name: x.firstName +" "+ x.lastName, id: x.id, color:x.color}}); this.dropCollab = this.activeCollaborateur.map(x => `${x.firstName} ${x.lastName}`) console.log(this.collaborateurs) this.dropCollab.forEach(value => { this.statusData.push(value); }); this.collabateurservice.getAllplanning().subscribe( (data: any) => { this.plannings = data; } ); } group: GroupModel = { resources: ['collaborateurs'], allowGroupEdit: false,byGroupID:true }; getIdCollab(id_colab: any){ return this.activeCollaborateur.find(x => `${x.firstName} ${x.lastName}` === id_colab)?.id; } public onSaveButtonClick(args: PopupOpenEventArgs): void { const data: Record = { title: (args.element.querySelector('.e-field[data-name="title"]') as HTMLInputElement)?.value, StartTime: (args.element.querySelector('.e-field[data-name="StartTime"]') as any).ej2_instances[0].value, EndTime:(args.element.querySelector('.e-field[data-name="EndTime"]') as any).ej2_instances[0].value, comment: (args.element.querySelector('.e-field[data-name="Commentaire"]')as HTMLInputElement)?.value, collaborateurId:this.getIdCollab((args.element.querySelector('.e-field[data-name="Collaborateur"]') as any).ej2_instances[0].value), }; let plan: Planning = { title: data["title"], comment: data["comment"], startTime: data["StartTime"], endTime: data["EndTime"], collaborateurId: data["collaborateurId"], } this.addPlanning(plan); console.log("data from event : ", data); try { this.scheduleObj?.addEvent(data); this.scheduleObj?.saveEvent(data, 'Save'); } catch (error) { console.error('An error occurred:', error); } this.scheduleObj?.closeEditor(); } public onPopupOpen(args: PopupOpenEventArgs): void { if (args.type === 'Editor') { if((this.scheduleObj?.eventWindow as any).isCrudAction){ alert('save click'); } const saveButton: HTMLElement = args.element.querySelector('#Save') as HTMLElement; const deleteButton: HTMLElement = args.element.querySelector('#Delete') as HTMLElement; const cancelButton: HTMLElement = args.element.querySelector('#Cancel') as HTMLElement; const target = args.target as HTMLElement; if (args.data && target && target.classList.contains('e-work-cells')) { const groupIndex = target.getAttribute('data-group-index'); const selectedResource = this.collaborateurs[Number(groupIndex)]; if (selectedResource) { args.data['name'] = selectedResource.name; }} if (args.target?.classList.contains('e-appointment')) { deleteButton.setAttribute('disabled', ''); } else { deleteButton.removeAttribute('disabled');} saveButton.onclick = () => { this.onSaveButtonClick(args); } cancelButton.onclick = () => { this.scheduleObj?.closeEditor(); }; } } Plannings: Planning[] = this.plannings; workHour: WorkHoursModel = {highlight:false, start: '00:00', end: '23:00'}; public currentView: View = 'TimelineDay'; timeScale: TimeScaleModel = { interval: 60, slotCount: 1 , enable: true}; startHour: string = "00:00"; endHour: string = "24:00"; headerRow: HeaderRowsModel[] = [ { option: "Hour", template: "#hourTemplate" } ]; allowMultiRow: boolean = false; allowMultiCell: boolean = true; CloseEditor(){ this.scheduleObj?.closeEditor(); } onCreated(){ } public startDate!: Date; public endDate!: Date; public startDateParser(data: string) { if (isNullOrUndefined(this.startDate) && !isNullOrUndefined(data)) { return new Date(data); } else if (!isNullOrUndefined(this.startDate)) { return new Date(this.startDate); } return new Date(); } public endDateParser(data: string) { if (isNullOrUndefined(this.endDate) && !isNullOrUndefined(data)) { return new Date(data); } else if (!isNullOrUndefined(this.endDate)) { return new Date(this.endDate); } return new Date(); } public onDateChange(args: ChangeEventArgs): void { if (!isNullOrUndefined(args.event as any)) { if (args.element.id === "StartTime") { this.startDate = args.value as Date; } else if (args.element.id === "EndTime") { this.endDate = args.value as Date; } } } public data: Record[] = [ { Id: 1, Subject: 'Meeting', StartTime: new Date(2024, 1, 1, 10, 0), EndTime: new Date(2024, 1, 1, 12, 0), collaborateurId: 1, groupId: 1 }, { Id: 2, Subject: 'Lunch Break', StartTime: new Date(2024, 1, 2, 13, 0), EndTime: new Date(2024, 1, 2, 14, 0), collaborateurId: 1, groupId: 1 }, { Id: 3, Subject: 'Project Discussion', StartTime: new Date(2024, 1, 2, 10, 0), EndTime: new Date(2024, 1, 2, 11, 0), collaborateurId: 1, groupId: 1 }, { Id: 4, Subject: 'Coffee Break', StartTime: new Date(2024, 1, 1, 15, 30), EndTime: new Date(2024, 1, 1, 16, 0), collaborateurId: 3, groupId: 1 } ]; public eventSettings: EventSettingsModel = { dataSource: extend([], this.data, true), template: this.editorTemplate, fields: { subject: { name: 'TravelSummary', title: 'sSummary', default: 'Add Summary' }, description: { name: 'Comments' }, startTime: { name: 'StartTime' }, endTime: { name: 'EndTime' } } }; getAllPlanning(): object[]{ this.collabateurservice.getAllplanning().subscribe( (data: any) => { console.log(data); // Add this line to log the data this.plannings = data; } ); return this.plannings; } addPlanning(planning: Planning):any { this.collabateurservice.findCollaborateur(planning.collaborateurId).subscribe(value => { planning.collaborateurId = value; console.log(planning); return this.collabateurservice.addPlanning(planning).subscribe(); }); }}

Subalakshmi Ramachandran · Answer

Hi Mehdi,We have prepared a simple sample based on your queries.Query 1: To provide datasource:
We suspect that while using the fields property in e-resource, use id and its
casing correctly. Here you should use ‘collaborateurId’ as the value for fields
property.Query 2: Events are not showing while click save button:
This issue due to collection of data getting at Save button code, where you can
get the fields from its corresponding id.

Query 3: Checkbox isAllDay:

In the isAllDay code, you should hide the time icon using ‘e-icon-disable
class’ for both start time and end time. You have to give the format of date
for start time and end time.

Please refer to the below sample for your reference:
https://stackblitz.com/edit/schedule-add-event-alemah?file=src%2Fapp.component.ts

Regards,
Suba R