Merge pull request #1391 from petkir/petkir-react-calendar-feed-735

samples/react-calendar-feed/README.md

@@ -49,6 +49,7 @@ If your feed supports filtering by dates, you can specify `{s}` in the URL where
 Solution|Author(s)
 --------|---------
 react-calendar-feed | Hugo Bernier ([Tahoe Ninjas](http://tahoeninjas.blog), @bernierh)
+react-calendar-feed | Peter Paul Kirschner ([@petkir_at](https://twitter.com/petkir_at))
 
 ## Version history
 
@@ -60,6 +61,7 @@ Version|Date|Comments
 4.0|January 16, 2019|Converted to SPFx 1.7.1; Removed NPM libraries associated with issue #708.
 5.0|August 17, 2019|Converted to SPFx 1.9.1; Refreshed carousel code; Addresses #735, #909. Also added **Convert from UTC** option to handle feeds which do not provide time zone information.
 5.1|April 16, 2020|Converted to SPFx 1.10.0; Fixed issue with UTC mode when in narrow view. Updated resizing behavior and styles to match OOB calendar view. Added support for themes and theme variants.
+5.2|July 15, 2020|Fixed issue to support IE11
 
 ## Disclaimer
 
@@ -81,6 +83,7 @@ Version|Date|Comments
 - Specify a maximum number of events to retrieve
 - If necessary, specify to use a proxy. Use this option if you encounter issues where your feed provider does not accept your tenant URL as a CORS origin.
 - If desired, specify how long (in minutes) you want to expire your users' local storage and refresh the events.
+- Exclude IE11 support with gulp parameter ```--NoIE11``` this is in-case-sensitive 
 
 ## Features
 

samples/react-calendar-feed/config/package-solution.json

@@ -3,7 +3,7 @@
   "solution": {
     "name": "react-calendar-feed-client-side-solution",
     "id": "25653136-fc83-4abe-b9d2-a4ac041959d5",
-    "version": "5.1.0.0",
+    "version": "5.2.0.0",
     "includeClientSideAssets": true
   },
   "paths": {

samples/react-calendar-feed/gulpfile.js

@@ -2,6 +2,52 @@
 
 const gulp = require('gulp');
 const build = require('@microsoft/sp-build-web');
+const path = require('path');
 build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
 
+let needIESupport = true;
+if (!!process.argv && process.argv.length > 0) {
+  needIESupport = process.argv.findIndex(item => '--noie11' === item.toLowerCase()) === -1;
+}
+
+if (needIESupport) {
+  const ie11BabeLoader = {
+    loader: 'babel-loader',
+    options: {
+      presets: [
+        [
+          '@babel/preset-env',
+          {
+            targets: {
+              "ie": "11"
+            }
+          }
+        ]
+      ]
+    }
+  };
+
+  //process.stdout.write(`Adding babel-loader to support IE11 \n`);
+  build.configureWebpack.mergeConfig({
+    additionalConfiguration: (generatedConfiguration) => {
+      generatedConfiguration.module.rules.push({
+        test: /\.js$/,
+        /*
+        This selector increase the webpack(gulp serve) time 5 times then without
+          exclude: [/node_modules\/(?!(rss-parser))/],
+          */
+        include: [
+          path.resolve(__dirname, "node_modules/rss-parser"),
+        ],
+        use: [ie11BabeLoader]
+      });
+
+      return generatedConfiguration;
+    }
+  });
+} else {
+  process.stdout.write(`No IE11 Support is set \n`);
+}
+
+
 build.initialize(gulp);

samples/react-calendar-feed/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-calendar-feed",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "private": true,
   "main": "lib/index.js",
   "engines": {
@@ -42,6 +42,8 @@
     "@types/react": "16.8.8"
   },
   "devDependencies": {
+    "@babel/core": "^7.10.4",
+    "@babel/preset-env": "^7.10.4",
     "@microsoft/rush-stack-compiler-2.9": "0.7.16",
     "@microsoft/rush-stack-compiler-3.3": "0.3.5",
     "@microsoft/sp-build-web": "1.10.0",
@@ -51,6 +53,8 @@
     "@types/chai": "3.4.34",
     "@types/mocha": "2.2.38",
     "ajv": "~5.2.2",
-    "gulp": "~3.9.1"
+    "babel-loader": "^8.1.0",
+    "gulp": "~3.9.1",
+    "webpack": "^4.43.0"
   }
 }

samples/react-calendar-feed/src/webparts/calendarFeedSummary/components/CalendarFeedSummary.tsx

@@ -109,7 +109,7 @@ export default class CalendarFeedSummary extends React.Component<ICalendarFeedSu
 
     // put everything together in a nice little calendar view
     return (
-      <div className={css(styles.calendarFeedSummary, styles.webPartChrome)}  style={{backgroundColor: semanticColors.bodyBackground}}>
+      <div className={css(styles.calendarFeedSummary, styles.webPartChrome)} style={{ backgroundColor: semanticColors.bodyBackground }}>
         <div className={css(styles.webPartHeader, styles.headerSmMargin)}>
           <WebPartTitle displayMode={this.props.displayMode}
             title={this.props.title}
@@ -265,7 +265,7 @@ export default class CalendarFeedSummary extends React.Component<ICalendarFeedSu
             event={item}
             isNarrow={true}
             themeVariant={this.props.themeVariant}
-             />
+          />
         )} />
       {usePaging &&
         <Pagination
@@ -307,7 +307,7 @@ export default class CalendarFeedSummary extends React.Component<ICalendarFeedSu
                 event={event}
                 isNarrow={false}
                 themeVariant={this.props.themeVariant} />
-                );
+              );
             })}
           </FilmstripLayout>
         </div>