CreateDataProcessor - custom data (in lightbox) are not available in create/update/delete events

Scheduler
#1

I am using angular 14 application in which I am using dhmlx-scheduler node package. The angular code uses java api to store the data in postgres DB. Th issue I am facing is after referring to your tutorial (Create Angular Scheduler with dhtmlxScheduler [Tutorial] - DHTMLX Blog), I used createDataProcessor to catch the events. However, the data captured during update/delete/create event does not have any of the custom fields (like color, login, priority which I am using in lightbox) . It only has the default fields like start_date, end_date, event_pid, rec_type etc.,

    const dp =  scheduler.createDataProcessor(async (entity: any, action: any, data: any, id: string ) => {


       if(data['!nativeeditor_status']) {
         switch (action) {
          case "create":
 
            const d: any = {
              schedulerId: data.id,
              startDate:  new Date(data.start_date),
              endDate: new Date(data.end_date),
              text: data.text,
              login: this.loginId,
              eventPid: data.event_pid || 0,
              eventLength: data.event_length || 0,
              recType: data.rec_type || '',
              eventColor: data.priority == '1' ? '#EE8E97' : (data.priority == '2' ? '#92E0A3' : '#E0AE8F'),
            }
            return  this.http.addEvent(d).then(resp => {
              window.location.reload();
            });
            break;
          case "update":
            //all modified occurrences must be deleted when you update a recurring series
            if (data.rec_type && data.rec_type != "none") {
              this.http.deleteModifiedOccurrences(data.id);
            }
            const updateData: any = {
              schedulerId: data.id,
              startDate: new Date(data.start_date), 
              endDate: new Date(data.end_date), 
              text: data.text,
              login: this.loginId,
              eventPid: data.event_pid || 0,
              eventLength: data.event_length || 0,
              recType: data.rec_type || '',
              eventColor: data.priority == '1' ? '#EE8E97' : (data.priority == '2' ? '#92E0A3' : '#E0AE8F'),
            }
            return this.http.updateEvent(updateData).then(resp => {
            window.location.reload();
            });

            break;
          case "delete":

              if (data.event_pid != 0) {
                // deleting modified occurrence from a recurring series
                // If an event with the event_pid value was deleted,
                // it should be updated with "rec_type==none" instead of deleting.
                return this.http.updateRecType(data.event_pid);
              }

              else if (data.rec_type && data.rec_type != "none") {
                // if a recurring series deleted, delete all modified occurrences of the series
               this.http.deleteModifiedOccurrences(data.id);
               return this.http.deleteParentEvent(data.id);
              }
               window.location.reload();
        
            break;
        }
        throw new Error(`Action [${action}] is not implemented`);
      }

    });
    this.getEvents();
#2

Hello @rajeswarij ,

The described issue should be already fixed in the latest scheduler version(6.0.4):
https://docs.dhtmlx.com/scheduler/what_s_new.html#604

So, if you update scheduler to the latest version, the issue should be fixed.

If you are using the latest version and issue still exist, could you please notify me?

Best regards,

#3

Hello,

Like you said, I used scheduler version 6.0.4 (npm package) in my angular v14 application. Now I am seeing the custom properties in the event project but there is some new issue now. I am always getting CREATE event even if I update/delete anything. Say for instance, if I modify a recurring series, it should delete all the modified occurrences first and then update the parent event right? But here no records are getting deleted.


import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import { scheduler } from "dhtmlx-scheduler";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  title = 'test-app2';
  today = new Date();
  events: any = [];
  @ViewChild("scheduler_here", { static: true }) schedulerContainer!: ElementRef;

  processSchedulerData() {

   const dp =  scheduler.createDataProcessor(async (entity: any, action: any, data: any, id: string ) => {

     console.error("--------", data['!nativeeditor_status']  )
      // if(data['!nativeeditor_status']) {
        console.error("----action----", action, data, id )
        switch (action) {
         case "create":
           // if (data['!nativeeditor_status'] == 'inserted' && data.rec_type == "none") {
           //   console.error('Deleting single occurence of a series');
           //   pid = data.event_pid;
           // }
           const d: any = {
             id: data.id,
             startDate: data.start_date, //  new Date(data.start_date),
             endDate: data.end_date, // new Date(data.end_date),
             text: data.text,
             eventPid: data.event_pid || 0,
             eventLength: data.event_length || 0,
             recType: data.rec_type || ''
           }
           this.events.push(d);
           console.error('inserted---', this.events)
           break;
         case "update":
           //all modified occurrences must be deleted when you update a recurring series
           if (data.rec_type && data.rec_type != "none") {
            this.events =  this.events.filter((o: any) => {
             return  o.event_pid != data.id
            })
           }
           const updateData: any = {
             schedulerId: data.id,
             startDate: new Date(data.start_date), // moment.utc(moment(data.start_date)).format('YYYY-MM-DDTHH:mm:ss[Z]'),
             endDate: new Date(data.end_date), // moment.utc(moment(data.end_date)).format('YYYY-MM-DDTHH:mm:ss[Z]'),
             text: data.text,
             name: data.name,
             eventPid: data.event_pid || 0,
             eventLength: data.event_length || 0,
             recType: data.rec_type || '',
           }
         this.events.push(updateData);
           console.error('updated---', this.events)

           break;
         case "delete":

           if( false) {
             // window.location.reload();
           }
           else {               // delete schedule only if its not used by any DID
             if (data.event_pid != 0) {
               // deleting modified occurrence from a recurring series
               // If an event with the event_pid value was deleted,
               // it should be updated with "rec_type==none" instead of deleting.
               // return this.http.updateRecType(data.event_pid);
               this.events.filter( (o: any) => id == data.event_pid).rec_type = 'none';
             }

             else if (data.rec_type && data.rec_type != "none") {
               // if a recurring series deleted, delete all modified occurrences of the series
               // this.http.deleteModifiedOccurrences(data.id);
               this.events =  this.events.filter((o: any) => {
                 return  o.event_pid != data.id
               })
               // return this.http.deleteParentEvent(data.id);
               this.events =  this.events.filter((o: any) => {
                 return  o.id != data.id
               })


             }
              // window.location.reload();
             console.error('deleted---', this.events)

           }
           break;
       }
       throw new Error(`Action [${action}] is not implemented`);
     // }
     // else {
     //   return 0;
     // }
   });
    // scheduler.parse(this.events);
  }

  ngOnInit() {
    scheduler.plugins({
      recurring: true,
      // editors: true,
      // quick_info: true,
      // limit: true,
      // all_timed: true,
      // collision: true
    });
    // scheduler.config.all_timed = true;
    // scheduler.config.limit_view  = true; //  limit the possibility to view events outside the allowable date range
    // scheduler.config.limit_start = new Date(this.today.getFullYear(), this.today.getMonth(), this.today.getDate())
    // scheduler.config.limit_end = new Date(this.today.getFullYear() + 10,this.today.getMonth(), this.today.getDate());// set limits for creating events - 2 years from current date
    // scheduler.config.event_duration = 30;
    const date = this.today;
    scheduler.init(this.schedulerContainer.nativeElement, new Date(date.getFullYear(), date.getMonth(), date.getDate()), 'week');
    this.processSchedulerData();
    scheduler.parse(this.events);

  }
}