Fix recurrenceInfo issue

samples/react-calendar/README.md

@@ -10,7 +10,7 @@ Each category has its own color that is generated in the load.
 
 The Web Part checks the user's permissions for the View, Add, Edit, and Delete events.
 
-![calendar](assets/react-calendar-categories.mp4)
+![calendar](assets/react-calendar-categories.png)
 
 ![calendar](assets/animatevideo.gif)
 

samples/react-calendar/assets/sample.json

@@ -31,9 +31,9 @@
     ],
     "thumbnails": [
       {
-        "type": "video",
+        "type": "image",
         "order": 100,
-        "url": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/refs/heads/main/samples/react-calendar/assets/react-calendar-categories.mp4",
+        "url": "raw.githubusercontent.com/pnp/sp-dev-fx-webparts/refs/heads/main/samples/react-calendar/assets/react-calendar-categories.png",
         "alt": "Calendar"
       },
       {

samples/react-calendar/src/controls/Event/event.tsx

@@ -816,49 +816,56 @@ export class Event extends React.Component<IEventProps, IEventState> {
    * @memberof Event 
    */
   private async returnExceptionRecurrenceInfo(recurrenceData: string) {
-    const parser = new XMLParser();
+    // Configure the XML parser
+    const parser = new XMLParser({
+      ignoreAttributes: false, // Include attributes in the parsed JSON
+      attributeNamePrefix: "", // Do not prefix attributes with @
+      isArray: (name) => ["rule", "repeat", "daily", "weekly", "monthly", "monthlyByDay", "yearly", "yearlyByDay"].includes(name), // Explicitly set nodes to be arrays
+    });
+
     try {
-      // Parse the XML string into a JSON object
-      const promise = parser.parse(recurrenceData);
-
-      const recurrenceInfo: any = await promise;
-      if (recurrenceInfo != null) {
-        let keys = Object.keys(recurrenceInfo.recurrence.rule[0].repeat[0]);
+      // Parse the XML string
+      const recurrenceInfo: any = parser.parse(recurrenceData);
+
+      // Check if parsed data contains expected structure
+      if (recurrenceInfo?.recurrence?.rule?.[0]?.repeat?.[0]) {
+        // Access repeat keys
+        const repeat = recurrenceInfo.recurrence.rule[0].repeat[0];
+        const keys = Object.keys(repeat);
+
+        // Supported recurrence types
         const recurrenceTypes = ["daily", "weekly", "monthly", "monthlyByDay", "yearly", "yearlyByDay"];
-        for (var key of keys) {
-          const rule = recurrenceInfo.recurrence.rule[0].repeat[0][key][0]['$'];
+
+        for (const key of keys) {
+          const rule = repeat[key]?.[0]?.["$"];
+          if (!rule) continue; // Skip if the rule is not present
+
           switch (recurrenceTypes.indexOf(key)) {
             case 0:
               return this.parseDailyRule(rule);
-              break;
             case 1:
               return this.parseWeeklyRule(rule);
-              break;
             case 2:
               return this.parseMonthlyRule(rule);
-              break;
             case 3:
               return this.parseMonthlyByDayRule(rule);
-              break;
             case 4:
               return this.parseYearlyRule(rule);
-              break;
             case 5:
               return this.parseYearlyByDayRule(rule);
-              break;
             default:
               continue;
           }
         }
+      } else {
+        return "Invalid recurrence format";
       }
-
     } catch (error) {
-      // Handle parsing errors by rejecting the promise
+      // Handle parsing errors
       throw new Error(`Error parsing recurrence data: ${error.message}`);
     }
   }
 
-
   /**
    *
    *
@@ -868,8 +875,6 @@ export class Event extends React.Component<IEventProps, IEventState> {
    */
   public async returnRecurrenceInfo(startDate: Date, recurrenceData: string) {
     this.returnedRecurrenceInfo = { recurrenceData: recurrenceData, eventDate: startDate, endDate: moment().add(20, 'years').toDate() };
-    //this.setState({ editRecurrenceSeries:false})
-    //console.log(this.returnedRecurrenceInfo);
   }
 
 

samples/react-calendar/tsconfig.json

@@ -25,11 +25,9 @@
       "webpack-env"
     ],
     "lib": [
-      "es5",
-      "dom",
-      "es2015.collection",
-      "es2015.promise"
-    ]
+      "es2016",
+       "dom"
+      ],
   },
   "include": [
     "src/**/*.ts",