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

fullcalender and sweetalert2 Update

This commit is contained in:
Peter Paul Kirschner 2024-10-05 22:31:08 +02:00
parent d825556a68
commit e295d9eff8
5 changed files with 104 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
samples/js-modern-calendar/assets/sample.json
View File

@ -9,7 +9,7 @@
"This is a modern web part built on the GA version of the SharePoint Framework demonstrating how to build a custom web part with a calendar capabilities in it."
],
"creationDateTime": "2020-06-05",
"updateDateTime": "2021-10-28",
"updateDateTime": "2024-10-05",
"products": [
"SharePoint"
],
@ -20,7 +20,7 @@
},
{
"key": "SPFX-VERSION",
"value": "1.11.0"
"value": "1.20.0"
}
],
"thumbnails": [

68
samples/js-modern-calendar/package-lock.json generated
View File

@ -16,10 +16,10 @@
"@microsoft/sp-office-ui-fabric-core": "1.20.0",
"@microsoft/sp-property-pane": "1.20.0",
"@microsoft/sp-webpart-base": "1.20.0",
"fullcalendar": "3.9.0",
"fullcalendar": "6.1.15",
"jquery": "^3.7.1",
"moment": "2.30.1",
"sweetalert2": "6.11.5"
"sweetalert2": "11.14.1"
},
"devDependencies": {
"@microsoft/eslint-config-spfx": "1.20.2",
@ -2709,6 +2709,44 @@
"@fullcalendar/core": "~6.1.15"
}
},
"node_modules/@fullcalendar/interaction": {
"version": "6.1.15",
"resolved": "https://registry.npmjs.org/@fullcalendar/interaction/-/interaction-6.1.15.tgz",
"integrity": "sha512-DOTSkofizM7QItjgu7W68TvKKvN9PSEEvDJceyMbQDvlXHa7pm/WAVtAc6xSDZ9xmB1QramYoWGLHkCYbTW1rQ==",
"peerDependencies": {
"@fullcalendar/core": "~6.1.15"
}
},
"node_modules/@fullcalendar/list": {
"version": "6.1.15",
"resolved": "https://registry.npmjs.org/@fullcalendar/list/-/list-6.1.15.tgz",
"integrity": "sha512-U1bce04tYDwkFnuVImJSy2XalYIIQr6YusOWRPM/5ivHcJh67Gm8CIMSWpi3KdRSNKFkqBxLPkfZGBMaOcJYug==",
"peerDependencies": {
"@fullcalendar/core": "~6.1.15"
}
},
"node_modules/@fullcalendar/multimonth": {
"version": "6.1.15",
"resolved": "https://registry.npmjs.org/@fullcalendar/multimonth/-/multimonth-6.1.15.tgz",
"integrity": "sha512-sEZY6jbOYkeF9TwhUldG+UUVv+hiPlGkS8zZEgPR7ypcjhipyA03c5rPjx7N6huOHqh6lCMH59zlohLooQRlaw==",
"dependencies": {
"@fullcalendar/daygrid": "~6.1.15"
},
"peerDependencies": {
"@fullcalendar/core": "~6.1.15"
}
},
"node_modules/@fullcalendar/timegrid": {
"version": "6.1.15",
"resolved": "https://registry.npmjs.org/@fullcalendar/timegrid/-/timegrid-6.1.15.tgz",
"integrity": "sha512-61ORr3A148RtxQ2FNG7JKvacyA/TEVZ7z6I+3E9Oeu3dqTf6M928bFcpehRTIK6zIA6Yifs7BeWHgOE9dFnpbw==",
"dependencies": {
"@fullcalendar/daygrid": "~6.1.15"
},
"peerDependencies": {
"@fullcalendar/core": "~6.1.15"
}
},
"node_modules/@griffel/core": {
"version": "1.18.0",
"resolved": "https://registry.npmjs.org/@griffel/core/-/core-1.18.0.tgz",
@ -14958,6 +14996,7 @@
"version": "8.57.0",
"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.0.tgz",
"integrity": "sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==",
"deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
"dev": true,
"dependencies": {
"@eslint-community/eslint-utils": "^4.2.0",
@ -16398,12 +16437,16 @@
}
},
"node_modules/fullcalendar": {
"version": "3.9.0",
"resolved": "https://registry.npmjs.org/fullcalendar/-/fullcalendar-3.9.0.tgz",
"integrity": "sha512-bbALDK8+SBqluv8SKPDeVNtaSr87NYblte/pRgV5NnDJWCEARpRlQ1qQ/XEakcAXbMZov6rWYIvLOrtKwQo2Bg==",
"version": "6.1.15",
"resolved": "https://registry.npmjs.org/fullcalendar/-/fullcalendar-6.1.15.tgz",
"integrity": "sha512-CFnh1yswjRh9puJVDk8VGwTlyZ6eXxr4qLI7QCA0+bozyAm+BluP1US5mOtgk0gEq23nQxGSNDoBvAraz++saQ==",
"dependencies": {
"jquery": "2 - 3",
"moment": "^2.20.1"
"@fullcalendar/core": "~6.1.15",
"@fullcalendar/daygrid": "~6.1.15",
"@fullcalendar/interaction": "~6.1.15",
"@fullcalendar/list": "~6.1.15",
"@fullcalendar/multimonth": "~6.1.15",
"@fullcalendar/timegrid": "~6.1.15"
}
},
"node_modules/function-bind": {
@ -26715,11 +26758,12 @@
}
},
"node_modules/sweetalert2": {
"version": "6.11.5",
"resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-6.11.5.tgz",
"integrity": "sha512-8Otu1SlWGS/u3e31cOg+uqrwyoQbByEScKp7UupmCfwEZE9St3coO1e6CXv83YzZtzdDgowdK1hBPKPW7SRp4Q==",
"engines": {
"node": ">=0.10.0"
"version": "11.14.1",
"resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.14.1.tgz",
"integrity": "sha512-xadhfcA4STGMh8nC5zHFFWURhRpWc4zyI3GdMDFH/m3hGWZeQQNWhX9xcG4lI9gZYsi/IlazKbwvvje3juL3Xg==",
"funding": {
"type": "individual",
"url": "https://github.com/sponsors/limonte"
}
},
"node_modules/swiper": {

4
samples/js-modern-calendar/package.json
View File

@ -15,10 +15,10 @@
"@microsoft/sp-office-ui-fabric-core": "1.20.0",
"@microsoft/sp-property-pane": "1.20.0",
"@microsoft/sp-webpart-base": "1.20.0",
"fullcalendar": "3.9.0",
"fullcalendar": "6.1.15",
"jquery": "^3.7.1",
"moment": "2.30.1",
"sweetalert2": "6.11.5"
"sweetalert2": "11.14.1"
},
"devDependencies": {
"@microsoft/eslint-config-spfx": "1.20.2",

3
samples/js-modern-calendar/src/webparts/modernCalendar/ModernCalendar.module.scss
View File

@ -57,4 +57,5 @@ input[aria-label='hide-col'] {
#spPropertyPaneContainer input[aria-label='hide-col'] {
display:none;
}
}

72
samples/js-modern-calendar/src/webparts/modernCalendar/ModernCalendarWebPart.ts
View File

@ -16,13 +16,15 @@ import CalendarTemplate from "./CalendarTemplate";
import * as jQuery from "jquery";
import * as moment from "moment";
//import * as swal2 from "sweetalert2";
import Swal from "sweetalert2";
import { SPComponentLoader } from "@microsoft/sp-loader";
import { SPHttpClient, SPHttpClientResponse } from "@microsoft/sp-http";
import { Calendar, EventSourceInput } from '@fullcalendar/core';
import { Calendar, EventClickArg, EventSourceInput } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
export interface ISPLists {
value: ISPList[];
}
@ -37,15 +39,6 @@ export interface ISPList {
export default class ModernCalendarWebPart extends BaseClientSideWebPart<IModernCalendarWebPartProps> {
public constructor() {
super();
// Modify with your a CDN or local path
/*
SPComponentLoader.loadCss(
"https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/8.11.8/sweetalert2.min.css"
);
SPComponentLoader.loadCss(
"https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css"
);
*/
}
public render(): void {
@ -65,13 +58,10 @@ export default class ModernCalendarWebPart extends BaseClientSideWebPart<IModern
this.properties.title == null ||
this.properties.detail == null
) {
console.log("Missing required properties");
console.log(this.properties);
this.domElement.innerHTML = CalendarTemplate.emptyHtml(
this.properties.description
);
} else {
console.log("All required properties are set");
this.domElement.innerHTML = CalendarTemplate.templateHtml;
this._renderListAsync();
}
@ -98,7 +88,25 @@ export default class ModernCalendarWebPart extends BaseClientSideWebPart<IModern
!this.properties.title ||
!this.properties.detail)
) {
//this._getColumnsAsync();
console.log("this.properties.listTitle: "+this.properties.listTitle);
this._getListColumns(this.properties.listTitle, this.properties.site).then((response3) => {
const col: IPropertyPaneDropdownOption[] = [];
for (const _innerKey in response3.value) {
col.push({
key: response3.value[_innerKey]["InternalName"],
text: response3.value[_innerKey]["Title"],
});
}
this._columnOptions = col;
this.colsDisabled = false;
this.listDisabled = false;
this.context.propertyPane.refresh();
this.context.statusRenderer.clearLoadingIndicator(
this.domElement
);
this.render();
});
}
if (!this.properties.other) {
@ -226,7 +234,7 @@ export default class ModernCalendarWebPart extends BaseClientSideWebPart<IModern
}
} else if (propertyPath === "listTitle" && newValue) {
// tslint:disable-next-line:no-duplicate-variable
let siteUrl = newValue;
let siteUrl = this.properties.site;
if (this.properties.other && this.properties.siteOther) {
siteUrl = this.properties.siteOther;
}
@ -410,23 +418,27 @@ export default class ModernCalendarWebPart extends BaseClientSideWebPart<IModern
};
});
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
/* const calendarOptions: EventObjectInput = {
title: "test",
theme: true,
events: calItems,
eventClick: (ev:{start:string,end:string,detail:string,title:string}) => {
const eventDetail =
moment.utc(ev.start).local().format('YYYY-MM-DD hh:mm A') +
" - " +
moment.utc(ev.end).local().format('YYYY-MM-DD hh:mm A') +
"<br>" +
ev.detail;
swal2.default(ev.title, eventDetail, "info");
},
};*/
const calendarEl = document.getElementById('spfxcalendar');
if(calendarEl){
const calendar = new Calendar(calendarEl, {
eventClick: (args:EventClickArg) => {
const calEvent = args.event;
const eventDetail =
moment.utc(calEvent.start).local().format('YYYY-MM-DD hh:mm A') +
" - " +
moment.utc(calEvent.end).local().format('YYYY-MM-DD hh:mm A') +
"<br>" +
args.event.extendedProps.detail;
//swal2.default(calEvent.title, eventDetail, "info");
Swal.fire({
title: calEvent.title,
html: eventDetail,
icon: 'info',
});
},
plugins: [ dayGridPlugin ],
initialView: 'dayGridMonth',
eventSources: [