From fd2a0857e7d38c1517285b95ef015686dc0612d7 Mon Sep 17 00:00:00 2001 From: Joel Rodrigues <19577724+joelfmrodrigues@users.noreply.github.com> Date: Fri, 5 Jul 2019 13:58:14 +0100 Subject: [PATCH] Cleaned imports and resolved TypeScript warnings (#902) * replace var with const and let * remove imports not being used * Resolved most stylelint warnings --- .../src/controls/Event/Event.module.scss | 35 ++-- .../src/controls/Event/event.tsx | 18 +-- .../EventRecurrenceInfo.module.scss | 5 +- .../EventRecurrenceInfo.tsx | 6 - .../EventRecurrenceInfoDaily.module.scss | 4 +- .../EventRecurrenceInfoMonthly.module.scss | 4 +- .../EventRecurrenceInfoWeekly.module.scss | 16 +- .../EventRecurrenceInfoWeekly.tsx | 9 -- .../EventRecurrenceInfoYearly.module.scss | 4 +- .../EventRecurrenceInfoYearly.tsx | 9 +- .../src/services/parseRecurrentEvent.ts | 150 +++++++++--------- .../react-calendar/src/services/spservices.ts | 8 +- .../calendar/components/Calendar.module.scss | 109 ++++++------- .../calendar/components/calendar.scss | 62 ++++---- 14 files changed, 197 insertions(+), 242 deletions(-) diff --git a/samples/react-calendar/src/controls/Event/Event.module.scss b/samples/react-calendar/src/controls/Event/Event.module.scss index 2c7248288..e18957289 100644 --- a/samples/react-calendar/src/controls/Event/Event.module.scss +++ b/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 { - font-weight: $ms-font-weight-semibold; - font-size: $ms-font-size-m; - height: 32px; - line-height: 32px; - margin: 0 4px; - vertical-align: top; - display: inline-block; - } + .label { + font-weight: $ms-font-weight-semibold; + font-size: $ms-font-size-m; + height: 32px; + line-height: 32px; + margin: 0 4px; + vertical-align: top; + display: inline-block; + } } diff --git a/samples/react-calendar/src/controls/Event/event.tsx b/samples/react-calendar/src/controls/Event/event.tsx index 5e4e629bb..6a32afecd 100644 --- a/samples/react-calendar/src/controls/Event/event.tsx +++ b/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, - extendComponent - + Label } 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, - ActionButton, - IButtonProps - + Toggle } 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], diff --git a/samples/react-calendar/src/controls/EventRecurrenceInfo/EventRecurrenceInfo.module.scss b/samples/react-calendar/src/controls/EventRecurrenceInfo/EventRecurrenceInfo.module.scss index c00ae27c7..ad5e72804 100644 --- a/samples/react-calendar/src/controls/EventRecurrenceInfo/EventRecurrenceInfo.module.scss +++ b/samples/react-calendar/src/controls/EventRecurrenceInfo/EventRecurrenceInfo.module.scss @@ -1,7 +1,6 @@ .divWrraper { - border-width:1px; - border-color:#adadad; + border-width: 1px; + border-color: #adadad; padding: 20px; border-style: solid; - } diff --git a/samples/react-calendar/src/controls/EventRecurrenceInfo/EventRecurrenceInfo.tsx b/samples/react-calendar/src/controls/EventRecurrenceInfo/EventRecurrenceInfo.tsx index eea696827..cab70400c 100644 --- a/samples/react-calendar/src/controls/EventRecurrenceInfo/EventRecurrenceInfo.tsx +++ b/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 { public constructor(props) { diff --git a/samples/react-calendar/src/controls/EventRecurrenceInfoDaily/EventRecurrenceInfoDaily.module.scss b/samples/react-calendar/src/controls/EventRecurrenceInfoDaily/EventRecurrenceInfoDaily.module.scss index d1e3e0779..ad5e72804 100644 --- a/samples/react-calendar/src/controls/EventRecurrenceInfoDaily/EventRecurrenceInfoDaily.module.scss +++ b/samples/react-calendar/src/controls/EventRecurrenceInfoDaily/EventRecurrenceInfoDaily.module.scss @@ -1,6 +1,6 @@ .divWrraper { - border-width:1px; - border-color:#adadad; + border-width: 1px; + border-color: #adadad; padding: 20px; border-style: solid; } diff --git a/samples/react-calendar/src/controls/EventRecurrenceInfoMonthly/EventRecurrenceInfoMonthly.module.scss b/samples/react-calendar/src/controls/EventRecurrenceInfoMonthly/EventRecurrenceInfoMonthly.module.scss index d1e3e0779..ad5e72804 100644 --- a/samples/react-calendar/src/controls/EventRecurrenceInfoMonthly/EventRecurrenceInfoMonthly.module.scss +++ b/samples/react-calendar/src/controls/EventRecurrenceInfoMonthly/EventRecurrenceInfoMonthly.module.scss @@ -1,6 +1,6 @@ .divWrraper { - border-width:1px; - border-color:#adadad; + border-width: 1px; + border-color: #adadad; padding: 20px; border-style: solid; } diff --git a/samples/react-calendar/src/controls/EventRecurrenceInfoWeekly/EventRecurrenceInfoWeekly.module.scss b/samples/react-calendar/src/controls/EventRecurrenceInfoWeekly/EventRecurrenceInfoWeekly.module.scss index de60b98c8..fa47af96b 100644 --- a/samples/react-calendar/src/controls/EventRecurrenceInfoWeekly/EventRecurrenceInfoWeekly.module.scss +++ b/samples/react-calendar/src/controls/EventRecurrenceInfoWeekly/EventRecurrenceInfoWeekly.module.scss @@ -1,16 +1,18 @@ .divWrraper { - border-width:1px; - border-color:#adadad; + border-width: 1px; + border-color: #adadad; padding: 20px; border-style: solid; } + .ckeckBoxInline { - display: inline-block; - vertical-align: top; - width: 80px; - padding-left: 10px; + display: inline-block; + vertical-align: top; + width: 80px; + padding-left: 10px; } -.dateRange{ + +.dateRange { display: inline-block; vertical-align: top; padding-right: 35px; diff --git a/samples/react-calendar/src/controls/EventRecurrenceInfoWeekly/EventRecurrenceInfoWeekly.tsx b/samples/react-calendar/src/controls/EventRecurrenceInfoWeekly/EventRecurrenceInfoWeekly.tsx index 31c90896f..862bbe661 100644 --- a/samples/react-calendar/src/controls/EventRecurrenceInfoWeekly/EventRecurrenceInfoWeekly.tsx +++ b/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'; diff --git a/samples/react-calendar/src/controls/EventRecurrenceInfoYearly/EventRecurrenceInfoYearly.module.scss b/samples/react-calendar/src/controls/EventRecurrenceInfoYearly/EventRecurrenceInfoYearly.module.scss index d1e3e0779..ad5e72804 100644 --- a/samples/react-calendar/src/controls/EventRecurrenceInfoYearly/EventRecurrenceInfoYearly.module.scss +++ b/samples/react-calendar/src/controls/EventRecurrenceInfoYearly/EventRecurrenceInfoYearly.module.scss @@ -1,6 +1,6 @@ .divWrraper { - border-width:1px; - border-color:#adadad; + border-width: 1px; + border-color: #adadad; padding: 20px; border-style: solid; } diff --git a/samples/react-calendar/src/controls/EventRecurrenceInfoYearly/EventRecurrenceInfoYearly.tsx b/samples/react-calendar/src/controls/EventRecurrenceInfoYearly/EventRecurrenceInfoYearly.tsx index 61663bd77..4098acf59 100644 --- a/samples/react-calendar/src/controls/EventRecurrenceInfoYearly/EventRecurrenceInfoYearly.tsx +++ b/samples/react-calendar/src/controls/EventRecurrenceInfoYearly/EventRecurrenceInfoYearly.tsx @@ -11,16 +11,9 @@ import { IChoiceGroupOption, Dropdown, IDropdownOption, - TextField, - SpinButton, Label, - PrimaryButton, - MaskedTextField, - CommandBarButton, IButtonProps, - DefaultButton + MaskedTextField } 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'; diff --git a/samples/react-calendar/src/services/parseRecurrentEvent.ts b/samples/react-calendar/src/services/parseRecurrentEvent.ts index 66812e241..eeedd15e3 100644 --- a/samples/react-calendar/src/services/parseRecurrentEvent.ts +++ b/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('') != -1) { let wDtEnd = events[i].RecurrenceData.substring(events[i].RecurrenceData.indexOf("") + 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 = []; - var wd = ['su', 'mo', 'tu', 'we', 'th', 'fr', 'sa']; - var wom = ['first', 'second', 'third', 'fourth']; - var rTotal: any = 0; - var total: any = 0; + const er = []; + const wd = ['su', 'mo', 'tu', 'we', 'th', 'fr', 'sa']; + const wom = ['first', 'second', 'third', 'fourth']; + let rTotal: any = 0; + let total: any = 0; if (e.RecurrenceData.indexOf('') != -1) { rTotal = e.RecurrenceData.substring(e.RecurrenceData.indexOf("") + 17); rTotal = parseInt(rTotal.substring(0, rTotal.indexOf('<'))); } if (e.RecurrenceData.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]); - var loop = true; - var init = this.parseDate(e.EventDate, e.fAllDayEvent); + const frequency = parseInt(arr[arr.indexOf("dayFrequency") + 1]); + let loop = true; + 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("') - 1); - var arr = this.formatString(str); - var frequency = parseInt(arr[arr.indexOf("weekFrequency") + 1]); - var loop = true; - var init = this.parseDate(e.EventDate, e.fAllDayEvent); - var initDay = init.getDay(); + const arr = this.formatString(str); + const frequency = parseInt(arr[arr.indexOf("weekFrequency") + 1]); + let loop = true; + const init = this.parseDate(e.EventDate, e.fAllDayEvent); + 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("') - 1); - var arr = this.formatString(str); - var frequency = parseInt(arr[arr.indexOf("monthFrequency") + 1]); - var loop = true; - var init = this.parseDate(e.EventDate, e.fAllDayEvent); - var day = parseInt(arr[arr.indexOf("day") + 1]); + const arr = this.formatString(str); + const frequency = parseInt(arr[arr.indexOf("monthFrequency") + 1]); + let loop = true; + const init = this.parseDate(e.EventDate, e.fAllDayEvent); + 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("') - 1); - var arr = this.formatString(str); - var frequency = parseInt(arr[arr.indexOf("monthFrequency") + 1]); - var loop = true; - var init = this.parseDate(e.EventDate, e.fAllDayEvent); - var weekdayOfMonth = arr[arr.indexOf("weekdayOfMonth") + 1]; - var temp: any = new Date(); + const arr = this.formatString(str); + const frequency = parseInt(arr[arr.indexOf("monthFrequency") + 1]); + let loop = true; + const init = this.parseDate(e.EventDate, e.fAllDayEvent); + const weekdayOfMonth = arr[arr.indexOf("weekdayOfMonth") + 1]; + 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("') - 1); - var arr = this.formatString(str); - var frequency = parseInt(arr[arr.indexOf("yearFrequency") + 1]); - var loop = true; - var init = this.parseDate(e.EventDate, e.fAllDayEvent); - var month = (parseInt(arr[arr.indexOf("month") + 1]) - 1); - var day = parseInt(arr[arr.indexOf("day") + 1]); + const arr = this.formatString(str); + const frequency = parseInt(arr[arr.indexOf("yearFrequency") + 1]); + let loop = true; + const init = this.parseDate(e.EventDate, e.fAllDayEvent); + const month = (parseInt(arr[arr.indexOf("month") + 1]) - 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("') - 1); - var arr = this.formatString(str); - var frequency = parseInt(arr[arr.indexOf("yearFrequency") + 1]); - var loop = true; - var init = this.parseDate(e.EventDate, e.fAllDayEvent); - var month = (parseInt(arr[arr.indexOf("month") + 1]) - 1); - var weekdayOfMonth = arr[arr.indexOf("weekdayOfMonth") + 1]; - var day = 0; - for (var i: any = 0; i < wd.length; i++) { + const arr = this.formatString(str); + const frequency = parseInt(arr[arr.indexOf("yearFrequency") + 1]); + let loop = true; + const init = this.parseDate(e.EventDate, e.fAllDayEvent); + const month = (parseInt(arr[arr.indexOf("month") + 1]) - 1); + const weekdayOfMonth = arr[arr.indexOf("weekdayOfMonth") + 1]; + let day = 0; + 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; diff --git a/samples/react-calendar/src/services/spservices.ts b/samples/react-calendar/src/services/spservices.ts index 8520a25b7..3ae9fcb70 100644 --- a/samples/react-calendar/src/services/spservices.ts +++ b/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 { let numberHours: number = 0; - let siteTimeZoneHours: any; let siteTimeZoneBias: number; let siteTimeZoneDaylightBias: number; let currentDateTimeOffSet: number = new Date().getTimezoneOffset() / 60; diff --git a/samples/react-calendar/src/webparts/calendar/components/Calendar.module.scss b/samples/react-calendar/src/webparts/calendar/components/Calendar.module.scss index c30ec6bc9..1323c7137 100644 --- a/samples/react-calendar/src/webparts/calendar/components/Calendar.module.scss +++ b/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 './node_modules/spfx-uifabric-themes/office.theme.vars'; +@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss"; +@import "./node_modules/spfx-uifabric-themes/office.theme.vars"; :export { themeDark: $ms-color-themePrimary; } + .eventStyleSetter { background-color: white; - border-radius: 0px; - color: $ms-color-themePrimary; + border-radius: 0; + color: $ms-color-themePrimary; opacity: 1; - - border-width: '1.1px'; - border-style: 'solid'; - border-color: $ms-color-themePrimary; - border-left-width: '6px'; - display: 'block'; + border-width: "1.1px"; + border-style: "solid"; + border-color: $ms-color-themePrimary; + border-left-width: "6px"; + display: "block"; } - .Documentcard { - width: '100%'; - height: '100%' + width: "100%"; + height: "100%"; } .previewEventIcon { - - justify-content: 'center'; - display: 'flex'; - align-items: 'center'; + justify-content: "center"; + display: "flex"; + align-items: "center"; font-size: 32px; } .locationIcon { - - justify-content: 'center'; - display: 'flex'; - align-items: 'top'; + justify-content: "center"; + display: "flex"; + align-items: "top"; font-size: 22px; margin-top: 10px; } - .location { - - justify-content: 'center'; - display: 'flex'; - align-items: 'top'; - + justify-content: "center"; + display: "flex"; + align-items: "top"; } -.DocumentCardDetails{ - +.DocumentCardDetails { background-color: #f2f2f2; - border-style: 'solid'; + border-style: "solid"; border-width: 1.3px; border-color: #e6e6e6; - height:auto; - justify-content: 'center'; - display: 'flex'; - align-items: 'top'; - + height: auto; + justify-content: "center"; + display: "flex"; + align-items: "top"; } -.eventStyle{ +.eventStyle { background-color: white; - border-radius: '0px'; - opacity: 1; - color: black; - border-width: 1.4px; - border-style: 'solid'; - display: 'block' + border-radius: "0px"; + opacity: 1; + color: black; + border-width: 1.4px; + border-style: "solid"; + display: "block"; } .DocumentCardTitle { - font-weight: $ms-font-weight-semibold; - height: '100%'; - text-overflow: ellipsis; - display: 'flex'; - justify-content: 'center'; + font-weight: $ms-font-weight-semibold; + height: "100%"; + text-overflow: ellipsis; + display: "flex"; + justify-content: "center"; } -.DocumentCardTitleTime{ +.DocumentCardTitleTime { padding-top: 10px; - justify-content: 'center'; - display: 'flex'; - align-items: 'top'; + justify-content: "center"; + display: "flex"; + align-items: "top"; margin-bottom: 6px; font-size: $ms-font-size-m; - font-weight: $ms-font-weight-semibold; - font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif; + font-weight: $ms-font-weight-semibold; + 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; diff --git a/samples/react-calendar/src/webparts/calendar/components/calendar.scss b/samples/react-calendar/src/webparts/calendar/components/calendar.scss index c202df106..f0d846b80 100644 --- a/samples/react-calendar/src/webparts/calendar/components/calendar.scss +++ b/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; - /* border-radius: 4px; */ + padding: 0.375rem 1rem; + 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: #0075c7;*/ + background-color: $ms-color-themeDark; + + /* 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 { - color: #fff; - background-color: $ms-color-themeDark; - border-color: #f4f4f4; -} - -.rbc-toolbar button:focus, .rbc-toolbar button:hover { +.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;