Cannot read property RecurrenceRule of undefined

[Ameet]

My event settings for my schedule control is as follows -

this.eventSettings = {

      dataSource: this.dataManger,

      fields: {

        id: 'EventID',

        subject: { name: 'EventName' },

        isAllDay: { name: 'IsAllDay' },

        description: { name: 'EventDescription' },

        startTime: { name: 'StartDateTime' },

        endTime: { name: 'EndDateTime' }

      }

    };

When I create a new event it saves fine but when I try to edit current event and try to save it then I get the following error 

Your help is greatly appreciated.

Thanks,

Ameet

[Velmurugan S]

Hi Ameet, 

Thanks for contacting Syncfusion support. 

We have analyzed the reported problem with the shared screenshot and suspect that the reason for the issue is due to the usage of string type value to the Id field (i.e. EventID). Therefore, we request you to pass the integer/number type value to the EventID field to overcome the issue. 

Also, we have considered this scenario of allowing string type values to the Id field and also implemented the required changes and included it in our recently released Volume 3, 2018 beta release (16.3.17). So, you can overcome this problem by upgrading your version to 16.3.17. 

Kindly try with the above suggestion and let us know if you need any further assistance on this. 

Regards, 

Velmurugan 

[Ameet]

I tried using the 16.3.17 and it is missing some CSS classes I guess. I see it as follows -

[Arulraj A]

Hi Ameet, 

We regret for the inconvenience caused. 

We have made some breaking changes in the CSS style reference and the same mentioned in our following release notes page, which is the reason for the mentioned issue. Therefore, we request you to refer the individual style reference to overcome the mentioned issue. 

https://ej2.syncfusion.com/documentation/release-notes/?lang=es6#common  

For example, refer to the following individual CSS style reference for Schedule controls. 

Style.css page 

@import '../node_modules/@syncfusion/ej2-base/styles/material.css'; 

@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; 

@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css'; 

@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; 

@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; 

@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css'; 

@import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; 

@import '../node_modules/@syncfusion/ej2-schedule/styles/material.css'; 

 

Kindly try with the above suggestion and let us know if you need any further assistance on this. 

Regards, 

Arulraj A 

[Ameet]

This worked but now it is not showing group information -

I was expecting something like this -

Thanks,

Ameet

[Arulraj A]

Hi Ameet, 

 

We regret for the inconvenience caused, we suspect that the reported problem raised after removing all the resources from Schedule control and updating the resources again into the Schedule control based on the multiselect control selection. Therefore, we request you to use the following code example to overcome the reported problem. 

 

app.component.html page: 

 

<div> 

    <ejs-multiselect id='groups' [dataSource]='resourceDataSource' [fields]='fields' [mode]='mode' [popupHeight]='popHeight' [showDropDownIcon]='true' showSelectAll='false' [filterBarPlaceholder]='filterPlaceholder' 

    [value]="value" (change)="onChange($event)"></ejs-multiselect> 

</div> 

<div> 

    <ejs-schedule #scheduleObj cssClass='schedule-group' width='100%' height='550px' [selectedDate]="selectedDate" [group]="group" 

        [eventSettings]="eventSettings" [(currentView)]="scheduleView" (popupOpen)="onPopupOpen($event)" (actionBegin)="onActionBegin($event)" (dataBound)="onDataBound($event)"> 

        <e-resources> 

            <e-resource field='GroupID' title='Group Name' name='Groups' [allowMultiple]='allowMultiple' [query]='querySource' [dataSource]='resourceDataManager' 

                textField='GroupName' idField='GroupID' colorField='CalendarColor'> 

            </e-resource> 

        </e-resources> 

    </ejs-schedule> 

</div> 

 

 

app.component.ts page: 

 

export class AppComponent implements OnInit { 

  @ViewChild('scheduleObj') 

  public scheduleObj: ScheduleComponent; 

  public selectedDate: Date = new Date(2018, 8, 1); 

  ----------------------- 

  ----------------------- 

  ----------------------- 

 

  public onChange(args: any) { 

    //  the below line adding the selected resource values in the params and selected resource count in the take 

    this.scheduleObj.resources[0].query = new Query().addParams("value", args.value.toString()).take(args.value.length); 

    // In the below line resetting the resource datasource to trigger the server method. 

    this.scheduleObj.resources[0].dataSource = this.resourceDataManager; 

  } 

 

  public onDataBound(args) { 

// Here we used this method to refresh the event window to update the group information properly in the editor window 

    this.scheduleObj.eventWindow.refresh(); 

  } 

} 

 

 

We have prepared the sample with the above code example changes, which can be downloaded from the following location. 

 

http://www.syncfusion.com/downloads/support/forum/139815/ze/ScheduleResourceFilteringUpdated-1114722222 

 

Let us know whether this helps also if you need any further assistance on this. 

 

Regards, 

Arulraj A