Cleaned imports and resolved TypeScript warnings (#902)

* replace var with const and let

* remove imports not being used

* Resolved most stylelint warnings

samples/react-calendar/src/controls/Event/Event.module.scss

@@ -1,4 +1,4 @@
-@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
+@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
 
 .description {
   border: 1px solid #a6a6a6;
@@ -13,27 +13,32 @@
 }
 
 .description:hover {
-  border-color: rgb( 51, 51, 51 );
+  border-color: rgb(51, 51, 51);
 }
+
 .calendar {
   .container {
     max-width: 100%;
     min-height: 400px;
     height: 600px;
-    margin: 0px auto;
+    margin: 0 auto;
   }
+
   .eventTitle {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
+
   .row {
     @include ms-Grid-row;
     @include ms-fontColor-white;
+
     background-color: $ms-color-themeDark;
     padding: 20px;
     border-style: solid;
   }
+
   .column {
     @include ms-Grid-col;
     @include ms-lg10;
@@ -41,18 +46,22 @@
     @include ms-xlPush2;
     @include ms-lgPush1;
   }
+
   .title {
     @include ms-font-xl;
     @include ms-fontColor-white;
   }
+
   .subTitle {
     @include ms-font-l;
     @include ms-fontColor-white;
   }
+
   .description {
     @include ms-font-l;
     @include ms-fontColor-white;
   }
+
   .button {
     // Our button
     text-decoration: none;
@@ -67,7 +76,7 @@
     // Basic Button
     outline: transparent;
     position: relative;
-    font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
+    font-family: "Segoe UI WestEuropean", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
     -webkit-font-smoothing: antialiased;
     font-size: $ms-font-size-m;
     font-weight: $ms-font-weight-regular;
@@ -78,13 +87,13 @@
     padding: 0 16px;
   }
 
-    .label {
+  .label {
-      font-weight: $ms-font-weight-semibold;
+    font-weight: $ms-font-weight-semibold;
-      font-size: $ms-font-size-m;
+    font-size: $ms-font-size-m;
-      height: 32px;
+    height: 32px;
-      line-height: 32px;
+    line-height: 32px;
-      margin: 0 4px;
+    margin: 0 4px;
-      vertical-align: top;
+    vertical-align: top;
-      display: inline-block;
+    display: inline-block;
-    }
+  }
 }

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

@@ -3,7 +3,6 @@ import styles from './Event.module.scss';
 import * as strings from 'CalendarWebPartStrings';
 import { IEventProps } from './IEventProps';
 import { IEventState } from './IEventState';
-import { escape } from '@microsoft/sp-lodash-subset';
 import * as moment from 'moment';
 import 'react-big-calendar/lib/css/react-big-calendar.css';
 import { PeoplePicker, PrincipalType } from "@pnp/spfx-controls-react/lib/PeoplePicker";
@@ -11,21 +10,14 @@ import {
   Panel,
   PanelType,
   TextField,
-  Label,
+  Label
-  extendComponent
-
 } from 'office-ui-fabric-react';
-import { EnvironmentType } from '@microsoft/sp-core-library';
-import { mergeStyleSets } from 'office-ui-fabric-react/lib/Styling';
 import { IEventData } from '../../services/IEventData';
 import { IUserPermissions } from '../../services/IUserPermissions';
 import {
   DatePicker,
-  DayOfWeek,
   IDatePickerStrings,
   Dropdown,
-  DropdownMenuItemType,
-  IDropdownStyles,
   IDropdownOption,
   DefaultButton,
   PrimaryButton,
@@ -37,13 +29,9 @@ import {
   Dialog,
   DialogType,
   DialogFooter,
-  Toggle,
+  Toggle
-  ActionButton,
-  IButtonProps
-
 }
   from 'office-ui-fabric-react';
-import { addMonths, addYears } from 'office-ui-fabric-react/lib/utilities/dateMath/DateMath';
 
 import { IPanelModelEnum } from './IPanelModeEnum';
 import { EditorState, convertToRaw, ContentState } from 'draft-js';
@@ -54,10 +42,8 @@ import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
 import spservices from '../../services/spservices';
 import { Map, ICoordinates, MapType } from "@pnp/spfx-controls-react/lib/Map";
 import { EventRecurrenceInfo } from '../../controls/EventRecurrenceInfo/EventRecurrenceInfo';
-import { string } from 'prop-types';
 import { getGUID } from '@pnp/common';
 
-const today: Date = new Date(Date.now());
 const DayPickerStrings: IDatePickerStrings = {
   months: [strings.January, strings.February, strings.March, strings.April, strings.May, strings.June, strings.July, strings.August, strings.September, strings.October, strings.November, strings.December],
   shortMonths: [strings.Jan, strings.Feb, strings.Mar, strings.Apr, strings.May, strings.Jun, strings.Jul, strings.Aug, strings.Sep, strings.Oct, strings.Nov, strings.Dez],

samples/react-calendar/src/controls/EventRecurrenceInfo/EventRecurrenceInfo.module.scss

@@ -1,7 +1,6 @@
 .divWrraper {
-  border-width:1px;
+  border-width: 1px;
-  border-color:#adadad;
+  border-color: #adadad;
   padding: 20px;
   border-style: solid;
-
 }

samples/react-calendar/src/controls/EventRecurrenceInfo/EventRecurrenceInfo.tsx

@@ -5,22 +5,16 @@ import { IEventRecurrenceInfoProps } from './IEventRecurrenceInfoProps';
 import { IEventRecurrenceInfoState } from './IEventRecurrenceInfoState';
 import { escape } from '@microsoft/sp-lodash-subset';
 import * as moment from 'moment';
-import { parseString, Builder } from "xml2js";
 import {
   ChoiceGroup,
   IChoiceGroupOption,
 
 } from 'office-ui-fabric-react';
 
-
 import { EventRecurrenceInfoDaily } from './../EventRecurrenceInfoDaily/EventRecurrenceInfoDaily';
 import { EventRecurrenceInfoWeekly } from './../EventRecurrenceInfoWeekly/EventRecurrenceInfoWeekly';
 import { EventRecurrenceInfoMonthly } from './../EventRecurrenceInfoMonthly/EventRecurrenceInfoMonthly';
 import { EventRecurrenceInfoYearly } from './../EventRecurrenceInfoYearly/EventRecurrenceInfoYearly';
-
-
-
-
 export class EventRecurrenceInfo extends React.Component<IEventRecurrenceInfoProps, IEventRecurrenceInfoState> {
 
   public constructor(props) {

samples/react-calendar/src/controls/EventRecurrenceInfoDaily/EventRecurrenceInfoDaily.module.scss

@@ -1,6 +1,6 @@
 .divWrraper {
-  border-width:1px;
+  border-width: 1px;
-  border-color:#adadad;
+  border-color: #adadad;
   padding: 20px;
   border-style: solid;
 }

samples/react-calendar/src/controls/EventRecurrenceInfoMonthly/EventRecurrenceInfoMonthly.module.scss

@@ -1,6 +1,6 @@
 .divWrraper {
-  border-width:1px;
+  border-width: 1px;
-  border-color:#adadad;
+  border-color: #adadad;
   padding: 20px;
   border-style: solid;
 }

samples/react-calendar/src/controls/EventRecurrenceInfoWeekly/EventRecurrenceInfoWeekly.module.scss

@@ -1,16 +1,18 @@
 .divWrraper {
-  border-width:1px;
+  border-width: 1px;
-  border-color:#adadad;
+  border-color: #adadad;
   padding: 20px;
   border-style: solid;
 }
+
 .ckeckBoxInline {
-    display: inline-block;
+  display: inline-block;
-    vertical-align: top;
+  vertical-align: top;
-    width: 80px;
+  width: 80px;
-    padding-left: 10px;
+  padding-left: 10px;
 }
-.dateRange{
+
+.dateRange {
   display: inline-block;
   vertical-align: top;
   padding-right: 35px;

samples/react-calendar/src/controls/EventRecurrenceInfoWeekly/EventRecurrenceInfoWeekly.tsx

@@ -9,19 +9,10 @@ import { parseString, Builder } from "xml2js";
 import {
   ChoiceGroup,
   IChoiceGroupOption,
-  Dropdown,
-  IDropdownOption,
-  TextField,
-  SpinButton,
   Label,
-  PrimaryButton,
   MaskedTextField,
-  CommandBarButton, IButtonProps,
-  DefaultButton,
   Checkbox,
 } from 'office-ui-fabric-react';
-import { Position } from 'office-ui-fabric-react/lib/utilities/positioning';
-import { Root } from '@pnp/graph';
 import { DatePicker, DayOfWeek, IDatePickerStrings } from 'office-ui-fabric-react/lib/DatePicker';
 
 import spservices from '../../services/spservices';

samples/react-calendar/src/controls/EventRecurrenceInfoYearly/EventRecurrenceInfoYearly.module.scss

@@ -1,6 +1,6 @@
 .divWrraper {
-  border-width:1px;
+  border-width: 1px;
-  border-color:#adadad;
+  border-color: #adadad;
   padding: 20px;
   border-style: solid;
 }

samples/react-calendar/src/controls/EventRecurrenceInfoYearly/EventRecurrenceInfoYearly.tsx

@@ -11,16 +11,9 @@ import {
   IChoiceGroupOption,
   Dropdown,
   IDropdownOption,
-  TextField,
-  SpinButton,
   Label,
-  PrimaryButton,
+  MaskedTextField
-  MaskedTextField,
-  CommandBarButton, IButtonProps,
-  DefaultButton
 } from 'office-ui-fabric-react';
-import { Position } from 'office-ui-fabric-react/lib/utilities/positioning';
-import { Root } from '@pnp/graph';
 import { DatePicker, DayOfWeek, IDatePickerStrings } from 'office-ui-fabric-react/lib/DatePicker';
 
 import spservices from '../../services/spservices';

samples/react-calendar/src/services/parseRecurrentEvent.ts

@@ -7,7 +7,7 @@ export default class parseRecurrentEvent {
   public parseEvents(events: any[], start: any, end: any) {
 
     this.wEvents = events;
-    for (var i = 0; i < events.length; i++) {
+    for (let i = 0; i < events.length; i++) {
       end = null;
       if (events[i].RecurrenceData.indexOf('<windowEnd>') != -1) {
         let wDtEnd = events[i].RecurrenceData.substring(events[i].RecurrenceData.indexOf("<windowEnd>") + 11);
@@ -42,7 +42,7 @@ export default class parseRecurrentEvent {
   //
 
   public formatString(str: string) {
-    var arr = str.split("'");
+    let arr = str.split("'");
     str = arr.join('');
     arr = str.split('"');
     str = arr.join('');
@@ -57,7 +57,7 @@ export default class parseRecurrentEvent {
     if (typeof date == 'string') {
       if (allDay) {
         if (date.lastIndexOf('Z') == date.length - 1) {
-          var dt = date.substring(0, date.length - 1);
+          const dt = date.substring(0, date.length - 1);
           return new Date(dt);
         }
       }
@@ -76,29 +76,29 @@ export default class parseRecurrentEvent {
     else {
       start = start || this.parseDate(e.EventDate, e.fAllDayEvent);
       end = end || this.parseDate(e.EndDate, e.fAllDayEvent);
-      var er = [];
+      const er = [];
-      var wd = ['su', 'mo', 'tu', 'we', 'th', 'fr', 'sa'];
+      const wd = ['su', 'mo', 'tu', 'we', 'th', 'fr', 'sa'];
-      var wom = ['first', 'second', 'third', 'fourth'];
+      const wom = ['first', 'second', 'third', 'fourth'];
-      var rTotal: any = 0;
+      let rTotal: any = 0;
-      var total: any = 0;
+      let total: any = 0;
       if (e.RecurrenceData.indexOf('<repeatInstances>') != -1) {
         rTotal = e.RecurrenceData.substring(e.RecurrenceData.indexOf("<repeatInstances>") + 17);
         rTotal = parseInt(rTotal.substring(0, rTotal.indexOf('<')));
       }
       if (e.RecurrenceData.indexOf("<daily ") != -1) {
-        var str = e.RecurrenceData.substring(e.RecurrenceData.indexOf("<daily "));
+        let str = e.RecurrenceData.substring(e.RecurrenceData.indexOf("<daily "));
         str = str.substring(7, str.indexOf('/>') - 1);
-        var arr = this.formatString(str);
+        const arr = this.formatString(str);
         if (arr.indexOf("dayFrequency") != -1) {
-          var frequency = parseInt(arr[arr.indexOf("dayFrequency") + 1]);
+          const frequency = parseInt(arr[arr.indexOf("dayFrequency") + 1]);
-          var loop = true;
+          let loop = true;
-          var init = this.parseDate(e.EventDate, e.fAllDayEvent);
+          const init = this.parseDate(e.EventDate, e.fAllDayEvent);
           while (loop) {
             total++;
             if ((new Date(init)).getTime() >= start.getTime()) {
-              var ed = new Date(init);
+              const ed = new Date(init);
               ed.setSeconds(ed.getSeconds() + e.Duration);
-              var ni = this.cloneObj(e);
+              const ni = this.cloneObj(e);
               ni.EventDate = new Date(init);
               if (!this.RecurrenceExceptionExists(e.Id, ni.EventDate)) {
                 ni.EndDate = ed;
@@ -117,23 +117,23 @@ export default class parseRecurrentEvent {
         }
       }
       if (e.RecurrenceData.indexOf("<weekly ") != -1) {
-        var str = e.RecurrenceData.substring(e.RecurrenceData.indexOf("<weekly "));
+        let str = e.RecurrenceData.substring(e.RecurrenceData.indexOf("<weekly "));
         str = str.substring(8, str.indexOf('/>') - 1);
-        var arr = this.formatString(str);
+        const arr = this.formatString(str);
-        var frequency = parseInt(arr[arr.indexOf("weekFrequency") + 1]);
+        const frequency = parseInt(arr[arr.indexOf("weekFrequency") + 1]);
-        var loop = true;
+        let loop = true;
-        var init = this.parseDate(e.EventDate, e.fAllDayEvent);
+        const init = this.parseDate(e.EventDate, e.fAllDayEvent);
-        var initDay = init.getDay();
+        let initDay = init.getDay();
         while (loop) {
-          for (var i = initDay; i < 7; i++) {
+          for (let i = initDay; i < 7; i++) {
             if (arr.indexOf(wd[i]) != -1 && (rTotal > total || rTotal == 0)) {
               total++;
               if ((new Date(init)).getTime() >= start.getTime()) {
-                var nd: any = new Date(init);
+                const nd: any = new Date(init);
                 nd.setDate(nd.getDate() + (i - initDay));
-                var ed = new Date(nd);
+                const ed = new Date(nd);
                 ed.setSeconds(ed.getSeconds() + e.Duration);
-                var ni = this.cloneObj(e);
+                const ni = this.cloneObj(e);
                 ni.EventDate = new Date(nd);
                 if (!this.RecurrenceExceptionExists(e.Id, ni.EventDate)) {
                   ni.EndDate = ed;
@@ -151,22 +151,22 @@ export default class parseRecurrentEvent {
         }
       }
       if (e.RecurrenceData.indexOf("<monthly ") != -1) {
-        var str = e.RecurrenceData.substring(e.RecurrenceData.indexOf("<monthly "));
+        let str = e.RecurrenceData.substring(e.RecurrenceData.indexOf("<monthly "));
         str = str.substring(9, str.indexOf('/>') - 1);
-        var arr = this.formatString(str);
+        const arr = this.formatString(str);
-        var frequency = parseInt(arr[arr.indexOf("monthFrequency") + 1]);
+        const frequency = parseInt(arr[arr.indexOf("monthFrequency") + 1]);
-        var loop = true;
+        let loop = true;
-        var init = this.parseDate(e.EventDate, e.fAllDayEvent);
+        const init = this.parseDate(e.EventDate, e.fAllDayEvent);
-        var day = parseInt(arr[arr.indexOf("day") + 1]);
+        const day = parseInt(arr[arr.indexOf("day") + 1]);
         while (loop) {
           total++;
           if ((new Date(init)).getTime() >= start.getTime()) {
-            var nd: any = new Date(init);
+            const nd: any = new Date(init);
             nd.setDate(day);
             if (nd.getMonth() == init.getMonth()) {
-              var ed = new Date(nd);
+              const ed = new Date(nd);
               ed.setSeconds(ed.getSeconds() + e.Duration);
-              var ni = this.cloneObj(e);
+              const ni = this.cloneObj(e);
               ni.EventDate = new Date(nd);
               if (!this.RecurrenceExceptionExists(e.Id, ni.EventDate)) {
                 ni.EndDate = ed;
@@ -182,18 +182,18 @@ export default class parseRecurrentEvent {
         }
       }
       if (e.RecurrenceData.indexOf("<monthlyByDay ") != -1) {
-        var str = e.RecurrenceData.substring(e.RecurrenceData.indexOf("<monthlyByDay "));
+        let str = e.RecurrenceData.substring(e.RecurrenceData.indexOf("<monthlyByDay "));
         str = str.substring(14, str.indexOf('/>') - 1);
-        var arr = this.formatString(str);
+        const arr = this.formatString(str);
-        var frequency = parseInt(arr[arr.indexOf("monthFrequency") + 1]);
+        const frequency = parseInt(arr[arr.indexOf("monthFrequency") + 1]);
-        var loop = true;
+        let loop = true;
-        var init = this.parseDate(e.EventDate, e.fAllDayEvent);
+        const init = this.parseDate(e.EventDate, e.fAllDayEvent);
-        var weekdayOfMonth = arr[arr.indexOf("weekdayOfMonth") + 1];
+        const weekdayOfMonth = arr[arr.indexOf("weekdayOfMonth") + 1];
-        var temp: any = new Date();
+        let temp: any = new Date();
         while (loop) {
           total++;
           if ((new Date(init)).getTime() >= start.getTime()) {
-            var nd: any = new Date(init);
+            let nd: any = new Date(init);
             nd.setDate(1); //set to first day of month
             if (arr.indexOf("weekday") != -1) { //find first weekday - if not saturday or sunday, then current date is a weekday
               if (nd.getDay() == 0) nd.setDate(nd.getDate() + 1);// add one day to sunday
@@ -207,7 +207,7 @@ export default class parseRecurrentEvent {
                 nd = new Date(temp);
               }
               else {
-                for (var i: any = 0; i < wom.indexOf(weekdayOfMonth); i++) {
+                for (let i: any = 0; i < wom.indexOf(weekdayOfMonth); i++) {
                   if (nd.getDay() == 5) nd.setDate(nd.getDate() + 3); //if the current date is friday, add three days to get to monday
                   else nd.setDate(nd.getDate() + 1); //otherwise, just add one day
                 }
@@ -224,7 +224,7 @@ export default class parseRecurrentEvent {
                 nd = new Date(temp);
               }
               else {
-                for (var i: any = 0; i < wom.indexOf(weekdayOfMonth); i++) {
+                for (let i: any = 0; i < wom.indexOf(weekdayOfMonth); i++) {
                   if (nd.getDay() == 0) nd.setDate(nd.getDate() + 6); //if the current date is sunday, add six days to get to saturday
                   else nd.setDate(nd.getDate() + 1); //otherwise, just add one day
                 }
@@ -238,7 +238,7 @@ export default class parseRecurrentEvent {
               else nd.setDate(nd.getDate() + (wom.indexOf(weekdayOfMonth))); //now add days to get to the Nth instance of this day
             }
             else {
-              for (var i: any = 0; i < wd.length; i++) { //get first instance of the specified day
+              for (let i: any = 0; i < wd.length; i++) { //get first instance of the specified day
                 if (arr.indexOf(wd[i]) != -1) {
                   if (nd.getDay() > i)  nd.setDate(nd.getDate() + (7 - (nd.getDay() - i)));
                   else nd.setDate(nd.getDate() + (i - nd.getDay() ));
@@ -255,16 +255,16 @@ export default class parseRecurrentEvent {
               }
               else {
 
-                for (var i: any = 0; i < wom.indexOf(weekdayOfMonth); i++) {
+                for (let i: any = 0; i < wom.indexOf(weekdayOfMonth); i++) {
                     nd.setDate(nd.getDate() + 7);  //add a week to each instance to get the Nth instance
                     console.log(nd);
                 }
               }
             }
             if (nd.getMonth() == init.getMonth()) { //make sure the new date calculated actually falls within the current month (sometimes there may be no 4th instance of a day)
-              var ed = new Date(nd);
+              const ed = new Date(nd);
               ed.setSeconds(ed.getSeconds() + e.Duration);
-              var ni = this.cloneObj(e);
+              const ni = this.cloneObj(e);
               ni.EventDate = new Date(nd);
               if (!this.RecurrenceExceptionExists(e.Id, ni.EventDate)) {
                 ni.EndDate = ed;
@@ -280,24 +280,24 @@ export default class parseRecurrentEvent {
         }
       }
       if (e.RecurrenceData.indexOf("<yearly ") != -1) {
-        var str = e.RecurrenceData.substring(e.RecurrenceData.indexOf("<yearly "));
+        let str = e.RecurrenceData.substring(e.RecurrenceData.indexOf("<yearly "));
         str = str.substring(8, str.indexOf('/>') - 1);
-        var arr = this.formatString(str);
+        const arr = this.formatString(str);
-        var frequency = parseInt(arr[arr.indexOf("yearFrequency") + 1]);
+        const frequency = parseInt(arr[arr.indexOf("yearFrequency") + 1]);
-        var loop = true;
+        let loop = true;
-        var init = this.parseDate(e.EventDate, e.fAllDayEvent);
+        const init = this.parseDate(e.EventDate, e.fAllDayEvent);
-        var month = (parseInt(arr[arr.indexOf("month") + 1]) - 1);
+        const month = (parseInt(arr[arr.indexOf("month") + 1]) - 1);
-        var day = parseInt(arr[arr.indexOf("day") + 1]);
+        const day = parseInt(arr[arr.indexOf("day") + 1]);
         while (loop) {
-          var nd: any = new Date(init);
+          const nd: any = new Date(init);
           nd.setMonth(month);
           nd.setDate(day);
           if ((new Date(init)).getTime() <= nd.getTime()) {
             total++;
             if ((new Date(init)).getTime() >= start.getTime()) {
-              var ed = new Date(nd);
+              const ed = new Date(nd);
               ed.setSeconds(ed.getSeconds() + e.Duration);
-              var ni = this.cloneObj(e);
+              const ni = this.cloneObj(e);
               ni.EventDate = new Date(nd);
               if (!this.RecurrenceExceptionExists(e.Id, ni.EventDate)) {
                 ni.EndDate = ed;
@@ -313,32 +313,32 @@ export default class parseRecurrentEvent {
         }
       }
       if (e.RecurrenceData.indexOf("<yearlyByDay ") != -1) {
-        var str = e.RecurrenceData.substring(e.RecurrenceData.indexOf("<yearlyByDay "));
+        let str = e.RecurrenceData.substring(e.RecurrenceData.indexOf("<yearlyByDay "));
         str = str.substring(13, str.indexOf('/>') - 1);
-        var arr = this.formatString(str);
+        const arr = this.formatString(str);
-        var frequency = parseInt(arr[arr.indexOf("yearFrequency") + 1]);
+        const frequency = parseInt(arr[arr.indexOf("yearFrequency") + 1]);
-        var loop = true;
+        let loop = true;
-        var init = this.parseDate(e.EventDate, e.fAllDayEvent);
+        const init = this.parseDate(e.EventDate, e.fAllDayEvent);
-        var month = (parseInt(arr[arr.indexOf("month") + 1]) - 1);
+        const month = (parseInt(arr[arr.indexOf("month") + 1]) - 1);
-        var weekdayOfMonth = arr[arr.indexOf("weekdayOfMonth") + 1];
+        const weekdayOfMonth = arr[arr.indexOf("weekdayOfMonth") + 1];
-        var day = 0;
+        let day = 0;
-        for (var i: any = 0; i < wd.length; i++) {
+        for (let i: any = 0; i < wd.length; i++) {
           if (arr.indexOf(wd[i]) != -1) {
             if (arr[arr.indexOf(wd[i]) + 1].toLowerCase() == 'true') day = i;
           }
         }
         while (loop) {
-          var nd: any = new Date(init);
+          let nd: any = new Date(init);
           nd.setMonth(month);
           if ((new Date(init)).getTime() <= nd.getTime()) {
             total++;
             if ((new Date(init)).getTime() >= start.getTime()) {
               nd.setDate(1);
-              var dayOfMonth = nd.getDay();
+              const dayOfMonth = nd.getDay();
               if (day < dayOfMonth) nd.setDate(nd.getDate() + ((7 - dayOfMonth) + day)); //first instance of this day in the selected month
               else nd.setDate(nd.getDate() + (day - dayOfMonth));
               if (weekdayOfMonth == 'last') {
-                var temp: any = new Date(nd);
+                const temp: any = new Date(nd);
                 while (temp.getMonth() == month) {
                   nd = new Date(temp);
                   temp.setDate(temp.getDate() + 7); //loop from first instance of month to last instance of month
@@ -348,9 +348,9 @@ export default class parseRecurrentEvent {
                 nd.setDate(nd.getDate() + (7 * (wom.indexOf(weekdayOfMonth))));
               }
               if (nd.getMonth() == month) {
-                var ed = new Date(nd);
+                const ed = new Date(nd);
                 ed.setSeconds(ed.getSeconds() + e.Duration);
-                var ni = this.cloneObj(e);
+                const ni = this.cloneObj(e);
                 ni.EventDate = new Date(nd);
                 if (!this.RecurrenceExceptionExists(e.Id, ni.EventDate)) {
                   ni.EndDate = ed;
@@ -373,7 +373,7 @@ export default class parseRecurrentEvent {
   }
 
   public cloneObj(obj: any): any {
-    var copy: any;
+    let copy: any;
     if (null == obj || "object" != typeof obj) return obj;
     if (obj instanceof Date) {
       copy = new Date();
@@ -382,14 +382,14 @@ export default class parseRecurrentEvent {
     }
     if (obj instanceof Array) {
       copy = [];
-      for (var i = 0, len = obj.length; i < len; i++) {
+      for (let i = 0, len = obj.length; i < len; i++) {
         copy[i] = this.cloneObj(obj[i]);
       }
       return copy;
     }
     if (obj instanceof Object) {
       copy = {};
-      for (var attr in obj) {
+      for (const attr in obj) {
         if (obj.hasOwnProperty(attr)) copy[attr] = this.cloneObj(obj[attr]);
       }
       return copy;

samples/react-calendar/src/services/spservices.ts

@@ -2,23 +2,18 @@
 // March 2019
 
 import { WebPartContext } from "@microsoft/sp-webpart-base";
-import { sp, Fields, Web, SearchResults, Field, PermissionKind, RegionalSettings } from '@pnp/sp';
+import { sp, Web, PermissionKind, RegionalSettings } from '@pnp/sp';
 import { graph, } from "@pnp/graph";
-import { SPHttpClient, SPHttpClientResponse, ISPHttpClientOptions, HttpClient, MSGraphClient } from '@microsoft/sp-http';
 import * as $ from 'jquery';
 import { IEventData } from './IEventData';
-import { registerDefaultFontFaces } from "@uifabric/styling";
 import * as moment from 'moment';
 import { SiteUser } from "@pnp/sp/src/siteusers";
 import { IUserPermissions } from './IUserPermissions';
-import { dateAdd } from "@pnp/common";
-import { escape, update } from '@microsoft/sp-lodash-subset';
 import parseRecurrentEvent from './parseRecurrentEvent';
 
 // Class Services
 export default class spservices {
 
-  private graphClient: MSGraphClient = null;
 
   constructor(private context: WebPartContext) {
     // Setuo Context to PnPjs and MSGraph
@@ -45,7 +40,6 @@ export default class spservices {
    */
   public async getSiteTimeZoneHours(siteUrl: string): Promise<number> {
     let numberHours: number = 0;
-    let siteTimeZoneHours: any;
     let siteTimeZoneBias: number;
     let siteTimeZoneDaylightBias: number;
     let currentDateTimeOffSet: number = new Date().getTimezoneOffset() / 60;

samples/react-calendar/src/webparts/calendar/components/Calendar.module.scss

@@ -1,108 +1,101 @@
-@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
+@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
-@import './node_modules/spfx-uifabric-themes/office.theme.vars';
+@import "./node_modules/spfx-uifabric-themes/office.theme.vars";
 
 :export {
   themeDark: $ms-color-themePrimary;
 }
+
 .eventStyleSetter {
   background-color: white;
-  border-radius: 0px;
+  border-radius: 0;
-  color:  $ms-color-themePrimary;
+  color: $ms-color-themePrimary;
   opacity: 1;
-
+  border-width: "1.1px";
-  border-width: '1.1px';
+  border-style: "solid";
-  border-style: 'solid';
+  border-color: $ms-color-themePrimary;
-  border-color:   $ms-color-themePrimary;
+  border-left-width: "6px";
-  border-left-width: '6px';
+  display: "block";
-  display: 'block';
 }
 
-
 .Documentcard {
-  width: '100%';
+  width: "100%";
-  height: '100%'
+  height: "100%";
 }
 
 .previewEventIcon {
-
+  justify-content: "center";
-  justify-content: 'center';
+  display: "flex";
-  display: 'flex';
+  align-items: "center";
-  align-items: 'center';
   font-size: 32px;
 }
 
 .locationIcon {
-
+  justify-content: "center";
-  justify-content: 'center';
+  display: "flex";
-  display: 'flex';
+  align-items: "top";
-  align-items: 'top';
   font-size: 22px;
   margin-top: 10px;
 }
 
-
 .location {
-
+  justify-content: "center";
-  justify-content: 'center';
+  display: "flex";
-  display: 'flex';
+  align-items: "top";
-  align-items: 'top';
-
 }
 
-.DocumentCardDetails{
+.DocumentCardDetails {
-
   background-color: #f2f2f2;
-  border-style: 'solid';
+  border-style: "solid";
   border-width: 1.3px;
   border-color: #e6e6e6;
-  height:auto;
+  height: auto;
-  justify-content: 'center';
+  justify-content: "center";
-  display: 'flex';
+  display: "flex";
-  align-items: 'top';
+  align-items: "top";
-
 }
 
-.eventStyle{
+.eventStyle {
   background-color: white;
-      border-radius: '0px';
+  border-radius: "0px";
-      opacity: 1;
+  opacity: 1;
-      color: black;
+  color: black;
-      border-width: 1.4px;
+  border-width: 1.4px;
-      border-style: 'solid';
+  border-style: "solid";
-      display: 'block'
+  display: "block";
 }
 
 .DocumentCardTitle {
-  font-weight:  $ms-font-weight-semibold;
+  font-weight: $ms-font-weight-semibold;
-   height: '100%';
+  height: "100%";
-   text-overflow: ellipsis;
+  text-overflow: ellipsis;
-   display: 'flex';
+  display: "flex";
-   justify-content: 'center';
+  justify-content: "center";
 }
 
-.DocumentCardTitleTime{
+.DocumentCardTitleTime {
   padding-top: 10px;
-  justify-content: 'center';
+  justify-content: "center";
-  display: 'flex';
+  display: "flex";
-  align-items: 'top';
+  align-items: "top";
   margin-bottom: 6px;
   font-size: $ms-font-size-m;
-    font-weight: $ms-font-weight-semibold;
+  font-weight: $ms-font-weight-semibold;
-    font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
+  font-family: "Segoe UI WestEuropean", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
 }
+
 .calendar {
   .container {
     max-width: 100%;
     min-height: 400px;
     height: 600px;
-    margin: 0px auto;
+    margin: 0 auto;
-
   }
 
   .plainCard {
     width: 300;
     height: 286;
   }
+
   .eventTitle {
     white-space: nowrap;
     overflow: hidden;
@@ -112,9 +105,10 @@
   .row {
     @include ms-Grid-row;
     @include ms-fontColor-white;
+
     background-color: $ms-color-themeDark;
     padding: 20px;
-    border-style: solid
+    border-style: solid;
   }
 
   .column {
@@ -140,7 +134,6 @@
     @include ms-fontColor-white;
   }
 
-
   .button {
     // Our button
     text-decoration: none;
@@ -155,7 +148,7 @@
     // Basic Button
     outline: transparent;
     position: relative;
-    font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
+    font-family: "Segoe UI WestEuropean", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
     -webkit-font-smoothing: antialiased;
     font-size: $ms-font-size-m;
     font-weight: $ms-font-weight-regular;

samples/react-calendar/src/webparts/calendar/components/calendar.scss

@@ -1,16 +1,18 @@
-@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
+@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
 
 .rbc-selected-cell {
-  background-color:  $ms-color-themeDark;
+  background-color: $ms-color-themeDark;
 }
+
 .rbc-event:hover {
   border-width: 2px;
 }
 
 .rbc-today {
-  background-color:  $ms-color-themeDark;
+  background-color: $ms-color-themeDark;
   opacity: 0.7;
 }
+
 .rbc-off-range-bg {
   background: #f4f4f4;
 }
@@ -24,58 +26,47 @@
   background: none;
   background-image: none;
   border: 1px solid #ccc;
-  padding: .375rem 1rem;
+  padding: 0.375rem 1rem;
-  /* border-radius: 4px; */
+  border-radius: 0;
   line-height: normal;
   white-space: nowrap;
 }
 
-
 .rbc-toolbar button:active {
   background-image: none;
+
   /* box-shadow: inset 0 3px 5px rgba(0,0,0,.125); */
   background-color: #f8f8f8;
   border-color: #adadad;
 }
 
-.rbc-toolbar button {
-  color: #373a3c;
-  display: inline-block;
-  margin: 0;
-  text-align: center;
-  vertical-align: middle;
-  background: none;
-  background-image: none;
-  border: 1px solid #ccc;
-  padding: .375rem 1rem;
-  border-radius: 0px;
-  line-height: normal;
-  white-space: nowrap;
-}
-
-
 .rbc-toolbar button.rbc-active {
   background-image: none;
-  background-color:  $ms-color-themeDark;
+  background-color: $ms-color-themeDark;
- /* background-color: #0075c7;*/
+
+  /* background-color: #0075c7; */
   border-color: #f4f4f4;
   color: white;
 }
 
-.rbc-toolbar button.rbc-active:focus, .rbc-toolbar button.rbc-active:hover, .rbc-toolbar button:active:focus, .rbc-toolbar button:active:hover {
+.rbc-toolbar button:focus,
-  color: #fff;
+.rbc-toolbar button:hover {
-  background-color:  $ms-color-themeDark;
-  border-color: #f4f4f4;
-}
-
-.rbc-toolbar button:focus, .rbc-toolbar button:hover {
   color: #f8f8f8;
-  background-color:  $ms-color-themeDark;
+  background-color: $ms-color-themeDark;
   border-color: #adadad;
 }
 
+.rbc-toolbar button.rbc-active:focus,
+.rbc-toolbar button.rbc-active:hover,
+.rbc-toolbar button:active:focus,
+.rbc-toolbar button:active:hover {
+  color: #fff;
+  background-color: $ms-color-themeDark;
+  border-color: #f4f4f4;
+}
+
 .rbc-show-more {
-  background-color: hsla(0,0%,100%,.3);
+  background-color: hsla(0, 0%, 100%, 0.3);
   z-index: 4;
   font-weight: 700;
   font-size: 85%;
@@ -84,7 +75,10 @@
   white-space: nowrap;
 }
 
-.rbc-ellipsis, .rbc-event-label, .rbc-row-segment .rbc-event-content, .rbc-show-more {
+.rbc-ellipsis,
+.rbc-event-label,
+.rbc-row-segment .rbc-event-content,
+.rbc-show-more {
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;