diff --git a/samples/react-calendar/README.md b/samples/react-calendar/README.md index 741cac615..0c556e8c5 100644 --- a/samples/react-calendar/README.md +++ b/samples/react-calendar/README.md @@ -114,12 +114,13 @@ The Web Part Use PnPjs library, Office-ui-fabric-react components. react Big-Cal Solution|Author(s) --------|--------- -Calendar Web PArt|[Mohammed Amer](https://www.linkedin.com/in/mohammad3mer/) ([@https://twitter.com/Mohammad3mer](https://twitter.com/Mohammad3mer)) -Calendar Web Part|Abderahman Moujahid -Calendar Web Part|Hugo Bernier ([@bernier](https://twitter.com/bernierh), [Tahoe Ninjas](https://tahoeninjas.blog/)) -Calendar Web Part|João Mendes -Calendar Web Part|Mohamed Derhalli -Calendar Web Part|Nanddeep Nachan ([@NanddeepNachan](https://twitter.com/NanddeepNachan)) +Calendar Web Part|[Abderahman Moujahid](https://github.com/Abderahman88) +Calendar Web Part|[Eli H. Schei](https://github.com/Eli-Schei) +Calendar Web Part|[Hugo Bernier](https://github.com/hugoabernier) ([@bernier](https://twitter.com/bernierh), [Tahoe Ninjas](https://tahoeninjas.blog/)) +Calendar Web Part|[João Mendes](https://github.com/joaojmendes) +Calendar Web Part|[Mohamed Derhalli](https://github.com/derhallim) +Calendar Web PArt|[Mohammed Amer](https://www.linkedin.com/in/mohammad3mer/) ([@Mohammad3mer](https://twitter.com/Mohammad3mer)) +Calendar Web Part|[Nanddeep Nachan](https://github.com/nanddeepn) ([@NanddeepNachan](https://twitter.com/NanddeepNachan)) ## Version history @@ -136,12 +137,8 @@ Version|Date|Comments 1.0.8|December 24, 2020|Fixed timezone difference (#1646) 1.0.9|March 16, 2021|Fixed issue deleting events (#1773) 1.0.10|March 27, 2021|Updated prompt message when deleting single v/s multi-event. +1.0.11|May 10, 2021|Optimized page refresh using local storage -## Disclaimer - -**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** - ---- ## Minimal Path to Awesome @@ -153,4 +150,21 @@ Version|Date|Comments - `gulp package-solution --ship` - Add to **AppCatalog** and deploy +## Disclaimer + +**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** + + +## Support + +We do not support samples, but we do use GitHub to track issues and constantly want to improve these samples. + +If you encounter any issues while using this sample, [create a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=bug-report.yml&sample=react-calendar&authors=@Abderahman88,%20@Eli-Schei,%20@hugoabernier,%20@joaojmendes,%20@derhallim,%20@nanddeepn,%20@mohammadamer&title=react-calendar%20-%20). + +For questions regarding this sample, [create a new question](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=question.yml&sample=react-calendar&authors=@Abderahman88,%20@Eli-Schei,%20@hugoabernier,%20@joaojmendes,%20@derhallim,%20@nanddeepn,%20@mohammadamer&title=react-calendar%20-%20). + +Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=suggestion.yml&sample=react-calendar&authors=@Abderahman88,%20@Eli-Schei,%20@hugoabernier,%20@joaojmendes,%20@derhallim,%20@nanddeepn,%20@mohammadamer&title=react-calendar%20-%20). + + + diff --git a/samples/react-calendar/assets/sample.json b/samples/react-calendar/assets/sample.json index 285c2abe2..96e90ab38 100644 --- a/samples/react-calendar/assets/sample.json +++ b/samples/react-calendar/assets/sample.json @@ -200,6 +200,10 @@ "pictureUrl": "https://avatars.githubusercontent.com/u/19314043?s=460&u=79acb7fd0ad466e1040ddd8a739fa93385018b81&v=4", "name": "Mohammed Amer", "twitter": "Mohammad3mer" + }, { + "gitHubAccount": "Eli-Schei", + "name": "Eli H. Schei", + "pictureUrl": "https://github.com/Eli-Schei" } ], "references": [ diff --git a/samples/react-calendar/package-lock.json b/samples/react-calendar/package-lock.json index e6ee108fd..72f9f73a5 100644 --- a/samples/react-calendar/package-lock.json +++ b/samples/react-calendar/package-lock.json @@ -1,6 +1,6 @@ { "name": "react-calendar", - "version": "1.0.4", + "version": "1.0.10", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/samples/react-calendar/src/services/spservices.ts b/samples/react-calendar/src/services/spservices.ts index 7f916b5eb..08559d591 100644 --- a/samples/react-calendar/src/services/spservices.ts +++ b/samples/react-calendar/src/services/spservices.ts @@ -490,59 +490,79 @@ export default class spservices { if (results && results.Row.length > 0) { let event: any = ''; - - for (event of results.Row) { - const eventDate = await this.getLocalTime(event.EventDate); - const endDate = await this.getLocalTime(event.EndDate); - const initialsArray: string[] = event.Author[0].title.split(' '); - const initials: string = initialsArray[0].charAt(0) + initialsArray[initialsArray.length - 1].charAt(0); - const userPictureUrl = await this.getUserProfilePictureUrl(`i:0#.f|membership|${event.Author[0].email}`); - const attendees: number[] = []; - const first: number = event.Geolocation.indexOf('(') + 1; - const last: number = event.Geolocation.indexOf(')'); - const geo = event.Geolocation.substring(first, last); - const geolocation = geo.split(' '); - const CategoryColorValue: any[] = categoryColor.filter((value) => { - return value.category == event.Category; - }); - const isAllDayEvent: boolean = event["fAllDayEvent.value"] === "1"; + const mapEvents = async () : Promise => { + for (event of results.Row) { + const eventDate = await this.getLocalTime(event.EventDate); + const endDate = await this.getLocalTime(event.EndDate); + const initialsArray: string[] = event.Author[0].title.split(' '); + const initials: string = initialsArray[0].charAt(0) + initialsArray[initialsArray.length - 1].charAt(0); + const userPictureUrl = await this.getUserProfilePictureUrl(`i:0#.f|membership|${event.Author[0].email}`); + const attendees: number[] = []; + const first: number = event.Geolocation.indexOf('(') + 1; + const last: number = event.Geolocation.indexOf(')'); + const geo = event.Geolocation.substring(first, last); + const geolocation = geo.split(' '); + const CategoryColorValue: any[] = categoryColor.filter((value) => { + return value.category == event.Category; + }); + const isAllDayEvent: boolean = event["fAllDayEvent.value"] === "1"; - for (const attendee of event.ParticipantsPicker) { - attendees.push(parseInt(attendee.id)); + for (const attendee of event.ParticipantsPicker) { + attendees.push(parseInt(attendee.id)); + } + + events.push({ + Id: event.ID, + ID: event.ID, + EventType: event.EventType, + title: await this.deCodeHtmlEntities(event.Title), + Description: event.Description, + EventDate: isAllDayEvent ? new Date(event.EventDate.slice(0, -1)) : new Date(eventDate), + EndDate: isAllDayEvent ? new Date(event.EndDate.slice(0, -1)) : new Date(endDate), + location: event.Location, + ownerEmail: event.Author[0].email, + ownerPhoto: userPictureUrl ? + `https://outlook.office365.com/owa/service.svc/s/GetPersonaPhoto?email=${event.Author[0].email}&UA=0&size=HR96x96` : '', + ownerInitial: initials, + color: CategoryColorValue.length > 0 ? CategoryColorValue[0].color : '#1a75ff', // blue default + ownerName: event.Author[0].title, + attendes: attendees, + fAllDayEvent: isAllDayEvent, + geolocation: { Longitude: parseFloat(geolocation[0]), Latitude: parseFloat(geolocation[1]) }, + Category: event.Category, + Duration: event.Duration, + RecurrenceData: event.RecurrenceData ? await this.deCodeHtmlEntities(event.RecurrenceData) : "", + fRecurrence: event.fRecurrence, + RecurrenceID: event.RecurrenceID ? event.RecurrenceID : undefined, + MasterSeriesItemID: event.MasterSeriesItemID, + UID: event.UID.replace("{", "").replace("}", ""), + }); + } + return true; + }; + //Checks to see if there are any results saved in local storage + if(window.localStorage.getItem("eventResult")){ + //if there is a local version - compares it to the current version + if(window.localStorage.getItem("eventResult") === JSON.stringify(results)){ + //No update needed use current savedEvents + events = JSON.parse(window.localStorage.getItem("calendarEventsWithLocalTime")); + }else{ + //update local storage + window.localStorage.setItem("eventResult", JSON.stringify(results)); + //when they are not equal then we loop through the results and maps them to IEventData + /* tslint:disable:no-unused-expression */ + await mapEvents() ? window.localStorage.setItem("calendarEventsWithLocalTime", JSON.stringify(events)) : null; } - - events.push({ - Id: event.ID, - ID: event.ID, - EventType: event.EventType, - title: await this.deCodeHtmlEntities(event.Title), - Description: event.Description, - EventDate: isAllDayEvent ? new Date(event.EventDate.slice(0, -1)) : new Date(eventDate), - EndDate: isAllDayEvent ? new Date(event.EndDate.slice(0, -1)) : new Date(endDate), - location: event.Location, - ownerEmail: event.Author[0].email, - ownerPhoto: userPictureUrl ? - `https://outlook.office365.com/owa/service.svc/s/GetPersonaPhoto?email=${event.Author[0].email}&UA=0&size=HR96x96` : '', - ownerInitial: initials, - color: CategoryColorValue.length > 0 ? CategoryColorValue[0].color : '#1a75ff', // blue default - ownerName: event.Author[0].title, - attendes: attendees, - fAllDayEvent: isAllDayEvent, - geolocation: { Longitude: parseFloat(geolocation[0]), Latitude: parseFloat(geolocation[1]) }, - Category: event.Category, - Duration: event.Duration, - RecurrenceData: event.RecurrenceData ? await this.deCodeHtmlEntities(event.RecurrenceData) : "", - fRecurrence: event.fRecurrence, - RecurrenceID: event.RecurrenceID ? event.RecurrenceID : undefined, - MasterSeriesItemID: event.MasterSeriesItemID, - UID: event.UID.replace("{", "").replace("}", ""), - }); + }else{ + //if there is no local storage of the events we create them + window.localStorage.setItem("eventResult", JSON.stringify(results)); + //we also needs to map through the events the first time and save the mapped version to local storage + await mapEvents() ? window.localStorage.setItem("calendarEventsWithLocalTime", JSON.stringify(events)) : null; } - - let parseEvt: parseRecurrentEvent = new parseRecurrentEvent(); - events = parseEvt.parseEvents(events, null, null); } - + let parseEvt: parseRecurrentEvent = new parseRecurrentEvent(); + events = parseEvt.parseEvents(events, null, null); + // Return Data return events; } catch (error) { diff --git a/samples/react-calendar/src/webparts/calendar/components/Calendar.tsx b/samples/react-calendar/src/webparts/calendar/components/Calendar.tsx index 03d86829d..1bb4a50fa 100644 --- a/samples/react-calendar/src/webparts/calendar/components/Calendar.tsx +++ b/samples/react-calendar/src/webparts/calendar/components/Calendar.tsx @@ -122,7 +122,9 @@ export default class Calendar extends React.Component