honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1879 from Eli-Schei/main

This commit is contained in:
Hugo Bernier 2021-05-19 23:28:35 -04:00 committed by GitHub
parent 7b502f137e 65703eace0
commit 04d70fa5af
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 101 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
samples/react-calendar/README.md
View File

@ -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).
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-calendar" />

4
samples/react-calendar/assets/sample.json
View File

@ -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": [

2
samples/react-calendar/package-lock.json generated
View File

@ -1,6 +1,6 @@
{
"name": "react-calendar",
"version": "1.0.4",
"version": "1.0.10",
"lockfileVersion": 1,
"requires": true,
"dependencies": {

114
samples/react-calendar/src/services/spservices.ts
View File

@ -490,58 +490,78 @@ export default class spservices {
if (results && results.Row.length > 0) {
let event: any = '';
const mapEvents = async () : Promise<boolean> => {
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 (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;

2
samples/react-calendar/src/webparts/calendar/components/Calendar.tsx
View File

@ -122,7 +122,9 @@ export default class Calendar extends React.Component<ICalendarProps, ICalendarS
if (!this.props.list || !this.props.siteUrl || !this.props.eventStartDate.value || !this.props.eventEndDate.value) return;
this.userListPermissions = await this.spService.getUserPermissions(this.props.siteUrl, this.props.list);
const eventsData: IEventData[] = await this.spService.getEvents(escape(this.props.siteUrl), escape(this.props.list), this.props.eventStartDate.value, this.props.eventEndDate.value);
this.setState({ eventData: eventsData, hasError: false, errorMessage: "" });
} catch (error) {
this.setState({ hasError: true, errorMessage: error.message, isloading: false });