Display shadow events / penciled-in events

Question

Hi folks,I'm struggling with the following requirement: I have a schedule with two sets of events - one being regular events and the other a complex set of work-hours stored as a second set of (mostly recurring) events. Both event types have a (similar) resource hierarchy to take care of.I found no hint that I can show these workhour-events in my scheduler as sort of shadow events that just mark the work-cells with e.g. a specific color.I planned to use the isSlotAvailable method and color the work-cells using the onRenderCells event. Other option I considered was to get an array of all relevant work-hour occurrences (using getOccurrencesByRange method and calculate a similar approach. As I cannnot show these events in the same schedule as the regular events I created another schedule object which was not rendered. While I was able to load the work-hour events into this schduler objects (eventSettings.datasource), the call to the above method failed. I assumed that I cannot use these methods on an non-rendered calendar (pls. confirm). When I tried to render the second scheduler, I got a multitude of warnings as below:index.html#/schedule2:1 [DOM] Found 2 elements with non-unique id #EndTimezone: (More info: https://goo.gl/9p2vKq) Who can help me with the best approach to solve my above requirement? Is there a function/method available like getOccurrencesByRange that would work on a non-rendered calendar or directly as a function by passing the RecurrenceRule string (similar to rrulestr, which I was unable to get to work in my Angular environment)?Any help very welcome!Julius

Balasubramanian Sattanathan · Answer

Hi Julius, 

Thanks for contacting Syncfusion Support. 

We have validated your requirement and suspect that your need is to get the occurrences of the dynamically created appointments in the Scheduler. We let you know that it can be achieved by making use of the generateOccurrence method in the actionBegin event like the below code snippet. And also we can retrieve the occurrences of a single event based on the provided parent ID by using the getOccrrencesByID method. 






onActionBegin(args: ActionEventArgs): void { 
  if (args.requestType === "eventCreate" || args.requestType === "eventChange") { 
    let data = args.data instanceof Array ? args.data[0] : args.data; 
    let scheduleObj = (document.querySelector(".e-schedule") as any).ej2_instances[0]; 
    if (!isNullOrUndefined(data.RecurrenceRule)) { 
      let occurrences = (scheduleObj as any).eventBase.generateOccurrence(data); 
      for (let i = 0; i < occurrences.length; i++) { 
        // Get the timeslot and check if there is already an event 
        let filteredEvents = (scheduleObj as any).eventBase.filterEvents(occurrences[i].StartTime, occurrences[i].EndTime); 
        if (filteredEvents.length > 0) { 
          args.cancel = true; 
          break; 
        } 
      } 
    } else { 
      args.cancel = !scheduleObj.isSlotAvailable(data); 
    } 
  } 
}  

Sample: https://stackblitz.com/edit/prevent-overlap-recurrence-event-fm5uz1?file=app.component.ts 

Could you please check the above sample & confirm whether it comes close to your requirements? 

Regards, 
Balasubramanian S

Julius Peter · Answer

Hi Balasubramanian,thx for the quick answer. My issue lies in the fact that I cannot the show the events which define my complex work-hour setting (that needs to be defined & frequently changed by the final users) in the schedule (unless I can hide that set of events and still have the slots available - which I tried to describe by "shadow events" ).So I need a second schedule, which - if possible - is not even added to the DOM. I did not succeed to define that as "new ScheduleComponent() as I need an element + 3 other parameters (which iÍ dont have). I tried to define it as "new Schedule()", which let me set the "eventSettings.datasource" with the work-hour events, but gives an error when trying to execute methods like "getEvents()" or "getOccurrencesByRange()" (TypeError: Cannot read property 'filterEventsByRange' of undefined).When I add a second very basic to the html file, I get a multitude (about 20) of console warnings like "[DOM] Found 2 elements with non-unique id #Description: ........". How could I avoid those? Also I see in your StackBlitz you use "(scheduleObj as any).eventBase" instead of using just the "scheduleObj". Have not found anything on this in the docs. Can you enlighten me on this or tell me where I could find info on this?RegardsJulius

Balasubramanian Sattanathan · Answer

Hi Julius, 

Thanks for your update. 

We have analyzed your requirement at our end and suspect that you’ve faced the problem while using two schedulers in the same page. We have checked the problem by creating the below sample with two schedulers.  

Sample: https://stackblitz.com/edit/angular-two-schedulers-in-same-page?file=app.component.html 

Kindly try and refer to the above sample, let us know the below details if the problem is not resolved. 

Share a screenshot/video demo illustrating your requirement/problem
Replicate your problem in the above sample 
Share a sample illustrating the problem which would help us to provide the solution at the earliest.
 
Regards, Balasubramanian S

Julius Peter · Answer

Hi Balasubramanian,I also cannot recreate the issue outside of my actual application, but have no clue what causes this.  Whenever I render a second scheduler in the DOM I get these warnings. The offending elements seem to come from a dialog, which I do not even use, with some fields that are not even in my event records like "Location".  I tried to find the cause, but did not make any progress in quite a few hours. I do attach the console output as file. Maybe it gives you an idea what causes these warnings.RegardsJuliusAttachment: localhost1605200807188_750cf35b.zip

Nevitha Ravi · Answer

Hi Julius, 

Thanks for your update. 

We have checked the shared warnings which might be caused when you have same id for both the scheduler. Please share the following details to check further on this. 

Share both schedule related code
Share issue replicating sample if possible
Share whether you have this warning on initial load or when try to open editor window.

Regards, 
Nevitha

Julius Peter · Answer

Hi Nevita,the warnings appear on initial load. I created a minimal example that shows the warnings as already shared. I attach this code below (html & ts). The Angular Material imports (which I have a module level) are not  included in the sample.Attachment: appointments.component_4dac3a25.zip

Balasubramanian Sattanathan · Answer

Hi Julius, 

Thanks for the reply. 

We have checked your shared files and suspect that you could face the reported problem while performing test cases, due to having the same ID for both editor window’s field. We let you know that all the editor field ID’s would be the same for both the editor window according to the Scheduler architecture. So we would suggest you to get the editor fields by using the dynamically created ID of the editor window to differentiate the editor fields. 

Editor window of Scheduler 1: (ID – schedule1_dialog_wrapper) 
  
 
Editor window of Scheduler 2: (ID – schedule2_dialog_wrapper) 
  

Sample: https://stackblitz.com/edit/angular-two-schedulers-in-same-page-5rbt88?file=app.component.html 

If the problem is not resolved, kindly share the below details to proceed further. 

Share a screenshot/video demo illustrating your requirement/problem
Share a sample illustrating the problem 
 
Regards, Balasubramanian S