Before fixing crazy resize behavor

samples/react-calendar-feed/README.md

@@ -59,7 +59,7 @@ Version|Date|Comments
 3.0|November 9, 2018|Converted to SPFx 1.7; Added SharePoint Calendar feed
 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
+5.1|April 16, 2020|Converted to SPFx 1.10.0; Fixed issue with UTC mode when in narrow view. Updated resizing behaviour and styles to match OOB calendar view.
 
 ## Disclaimer
 

samples/react-calendar-feed/src/shared/components/EventCard/EventCard.module.scss

@@ -176,8 +176,3 @@
   word-wrap: normal;
   height: 18px;
 }
-
-// :global(.slick-slide) .cardWrapper {
-//     padding-left:8px;
-//     padding-right:8px;
-// }

samples/react-calendar-feed/src/shared/components/filmstripLayout/FilmstripLayout.module.scss

@@ -8,6 +8,8 @@
 
   &.filmStrip {
     margin-bottom: 27px;
+    margin-left: -10px;
+    margin-right: -10px;
 
     :global(.slick-slide) {
       box-sizing: border-box;

samples/react-calendar-feed/src/webparts/calendarFeedSummary/CalendarFeedSummaryWebPart.manifest.json

@@ -3,7 +3,7 @@
   "id": "acef6c3f-852a-42e3-8a4b-7ea191ae9687",
   "alias": "CalendarFeedSummaryWebPart",
   "componentType": "WebPart",
-
+  "supportsThemeVariants": true,
   "version": "*",
   "manifestVersion": 2,
   "supportedHosts": ["SharePointWebPart"],

samples/react-calendar-feed/src/webparts/calendarFeedSummary/CalendarFeedSummaryWebPart.ts

@@ -34,6 +34,9 @@ import { ICalendarFeedSummaryWebPartProps } from "./CalendarFeedSummaryWebPart.t
 import CalendarFeedSummary from "./components/CalendarFeedSummary";
 import { ICalendarFeedSummaryProps } from "./components/CalendarFeedSummary.types";
 
+// Support for theme variants
+import { ThemeProvider, ThemeChangedEventArgs, IReadonlyTheme, ISemanticColors } from '@microsoft/sp-component-base';
+
 // this is the same width that the SharePoint events web parts use to render as narrow
 const MaxMobileWidth: number = 480;
 
@@ -46,6 +49,9 @@ export default class CalendarFeedSummaryWebPart extends BaseClientSideWebPart<IC
   // the list of proviers available
   private _providerList: any[];
 
+  private _themeProvider: ThemeProvider;
+  private _themeVariant: IReadonlyTheme | undefined;
+
   constructor() {
     super();
 
@@ -55,6 +61,14 @@ export default class CalendarFeedSummaryWebPart extends BaseClientSideWebPart<IC
 
   protected onInit(): Promise<void> {
     return new Promise<void>((resolve, _reject) => {
+      // Consume the new ThemeProvider service
+      this._themeProvider = this.context.serviceScope.consume(ThemeProvider.serviceKey);
+
+      // If it exists, get the theme variant
+      this._themeVariant = this._themeProvider.tryGetTheme();
+
+      // Register a handler to be notified if the theme variant changes
+      this._themeProvider.themeChangedEvent.add(this, this._handleThemeChangedEvent);
 
       let {
         cacheDuration,
@@ -90,6 +104,8 @@ export default class CalendarFeedSummaryWebPart extends BaseClientSideWebPart<IC
    * Renders the web part
    */
   public render(): void {
+    const semanticColors: Readonly<ISemanticColors> | undefined = this._themeVariant && this._themeVariant.semanticColors;
+
     // see if we need to render a mobile view
     const isNarrow: boolean = this.domElement.clientWidth <= MaxMobileWidth;
 
@@ -104,6 +120,7 @@ export default class CalendarFeedSummaryWebPart extends BaseClientSideWebPart<IC
         isNarrow: isNarrow,
         maxEvents: this.properties.maxEvents,
         provider: this._getDataProvider(),
+        themeVariant: this._themeVariant,
         updateProperty: (value: string) => {
           this.properties.title = value;
         },
@@ -355,4 +372,14 @@ export default class CalendarFeedSummaryWebPart extends BaseClientSideWebPart<IC
     provider.MaxTotal = maxTotal;
     return provider;
   }
+
+  /**
+ * Update the current theme variant reference and re-render.
+ *
+ * @param args The new theme
+ */
+  private _handleThemeChangedEvent(args: ThemeChangedEventArgs): void {
+    this._themeVariant = args.theme;
+    this.render();
+  }
 }

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

@@ -12,6 +12,7 @@ import { CalendarServiceProviderType, ICalendarEvent, ICalendarService } from ".
 import styles from "./CalendarFeedSummary.module.scss";
 import { ICalendarFeedSummaryProps, ICalendarFeedSummaryState, IFeedCache } from "./CalendarFeedSummary.types";
 import { FilmstripLayout } from "../../../shared/components/filmstripLayout/index";
+import { IReadonlyTheme } from '@microsoft/sp-component-base';
 
 // the key used when caching events
 const CacheKey: string = "calendarFeedSummary";
@@ -90,6 +91,8 @@ export default class CalendarFeedSummary extends React.Component<ICalendarFeedSu
       isConfigured,
     } = this.props;
 
+    const { semanticColors }: IReadonlyTheme = this.props.themeVariant;
+
     // if we're not configured, show the placeholder
     if (!isConfigured) {
       return <Placeholder
@@ -104,7 +107,8 @@ 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)}>
+      <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}

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

@@ -9,7 +9,7 @@ import { DisplayMode } from "@microsoft/sp-core-library";
 import { IWebPartContext } from "@microsoft/sp-webpart-base";
 import { Moment } from "moment";
 import { ICalendarEvent, ICalendarService } from "../../../shared/services/CalendarService";
-
+import { IReadonlyTheme } from '@microsoft/sp-component-base';
 /**
  * The props for the calendar feed summary component
  */
@@ -22,6 +22,7 @@ export interface ICalendarFeedSummaryProps {
   isNarrow: boolean;
   provider: ICalendarService;
   maxEvents: number;
+  themeVariant: IReadonlyTheme;
 }
 
 /**