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

Issue #1685+Upgrade to 1.11.0 version

This commit is contained in:
ravi.kadri10 2021-02-09 15:14:59 -08:00
parent 6c3f9bd5f9
commit 943d015a3f
7 changed files with 7929 additions and 8082 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
samples/js-modern-calendar/config/package-solution.json
View File

@ -3,7 +3,14 @@
"name": "SPFx Modern Calendar",
"id": "3d593a2f-73f1-486f-9dae-555c6f6b584d",
"version": "1.0.0.1",
"includeClientSideAssets": true
"includeClientSideAssets": true,
"developer": {
"name": "",
"websiteUrl": "",
"privacyUrl": "",
"termsOfUseUrl": "",
"mpnId": ""
}
},
"paths": {
"zippedPackage": "solution/modern-calendar.sppkg"

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

File diff suppressed because it is too large Load Diff

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

@ -2,25 +2,30 @@
"name": "modern-calendar",
"version": "0.0.1",
"private": true,
"main": "lib/index.js",
"engines": {
"node": ">=0.10.0"
},
"dependencies": {
"@microsoft/sp-core-library": "1.6.0",
"@microsoft/sp-webpart-base": "1.6.0",
"@microsoft/sp-core-library": "1.11.0",
"@microsoft/sp-property-pane": "1.11.0",
"@microsoft/sp-webpart-base": "1.11.0",
"@types/fullcalendar": "^2.7.38",
"@types/moment": "^2.13.0",
"@types/webpack-env": ">=1.12.1 <1.14.0",
"fullcalendar": "3.9.0",
"sweetalert2": "^6.4.2"
},
"devDependencies": {
"@microsoft/sp-build-web": "1.6.0",
"@microsoft/sp-module-interfaces": "1.6.0",
"@microsoft/sp-webpart-workbench": "1.6.0",
"gulp": "~3.9.1",
"@microsoft/rush-stack-compiler-3.3": "0.3.5",
"@microsoft/sp-build-web": "1.11.0",
"@microsoft/sp-module-interfaces": "1.11.0",
"@microsoft/sp-tslint-rules": "1.11.0",
"@microsoft/sp-webpart-workbench": "1.11.0",
"@types/chai": ">=3.4.34 <3.6.0",
"@types/mocha": ">=2.2.33 <2.6.0"
"@types/es6-promise": "0.0.33",
"@types/mocha": ">=2.2.33 <2.6.0",
"@types/webpack-env": "1.13.1",
"gulp": "~3.9.1"
},
"scripts": {
"build": "gulp bundle",

119
samples/js-modern-calendar/src/webparts/modernCalendar/CalendarTemplate.ts
View File

@ -1,8 +1,6 @@
import {
IPropertyPaneDropdownOption
} from '@microsoft/sp-webpart-base';
import styles from './CalendarTemplate.module.scss';
import { escape } from '@microsoft/sp-lodash-subset';
import styles from "./CalendarTemplate.module.scss";
import { escape } from "@microsoft/sp-lodash-subset";
import { IPropertyPaneDropdownOption } from "@microsoft/sp-property-pane";
export interface ISPLists {
value: ISPList[];
@ -13,12 +11,12 @@ export interface ISPList {
Id: string;
}
export default class CalendarTemplate {
public static templateHtml: string = `
public static templateHtml: string = `
<div class='spfxcalendar'></div>
`;
public static emptyHtml(title: string): string {
return `<div class="${styles.EmptyCalendar}">
public static emptyHtml(title: string): string {
return `<div class="${styles.EmptyCalendar}">
<div class="${styles.container}">
<div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}">
<div class="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">
@ -32,51 +30,68 @@ export default class CalendarTemplate {
</div>
</div>
`;
}
}
public static themeBase: string = `https://code.jquery.com/ui/1.12.1/themes/`;
public static themeBase: string = `https://code.jquery.com/ui/1.12.1/themes/`;
public static themeNames: Array<string> = [
'default',
'black-tie',
'blitzer',
'cupertino',
'dark-hive',
'dot-luv',
'eggplant',
'excite-bike',
'flick',
'hot-sneaks',
'humanity',
'le-frog',
'mint-choc',
'overcast',
'pcpro',
'pepper-grinder',
'redmond',
'smoothness',
'south-street',
'start',
'sunny',
'swanky-purse',
'trontastic',
'ui-darkness',
'ui-lightness',
'vader'
];
public static themeNames: Array<string> = [
"default",
"black-tie",
"blitzer",
"cupertino",
"dark-hive",
"dot-luv",
"eggplant",
"excite-bike",
"flick",
"hot-sneaks",
"humanity",
"le-frog",
"mint-choc",
"overcast",
"pcpro",
"pepper-grinder",
"redmond",
"smoothness",
"south-street",
"start",
"sunny",
"swanky-purse",
"trontastic",
"ui-darkness",
"ui-lightness",
"vader",
];
public static theme(): IPropertyPaneDropdownOption[] {
var themes: IPropertyPaneDropdownOption[] = [];
CalendarTemplate.themeNames.forEach(function(name,index) {
themes.push({key: CalendarTemplate.themeBase + name + '/jquery-ui.min.css', text: name.toLocaleUpperCase()});
});
return themes;
}
public static theme(): IPropertyPaneDropdownOption[] {
var themes: IPropertyPaneDropdownOption[] = [];
CalendarTemplate.themeNames.forEach(function (name, index) {
themes.push({
key: CalendarTemplate.themeBase + name + "/jquery-ui.min.css",
text: name.toLocaleUpperCase(),
});
});
return themes;
}
public static themes: IPropertyPaneDropdownOption[] = [
{ key: CalendarTemplate.themeBase + 'jquery-ui.theme.min.css', text: 'Default' },
{ key: CalendarTemplate.themeBase + 'ui-lightness/jquery-ui.min.css', text: 'Light' },
{ key: '//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/redmond/jquery-ui.min.css', text: 'Redmond' },
{ key: '//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/overcast/jquery-ui.min.css', text: 'Overcast' }
];
}
public static themes: IPropertyPaneDropdownOption[] = [
{
key: CalendarTemplate.themeBase + "jquery-ui.theme.min.css",
text: "Default",
},
{
key: CalendarTemplate.themeBase + "ui-lightness/jquery-ui.min.css",
text: "Light",
},
{
key:
"//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/redmond/jquery-ui.min.css",
text: "Redmond",
},
{
key:
"//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/overcast/jquery-ui.min.css",
text: "Overcast",
},
];
}

2
samples/js-modern-calendar/src/webparts/modernCalendar/ModernCalendarWebPart.manifest.json
View File

@ -6,7 +6,7 @@
"componentType": "WebPart",
"version": "*",
"manifestVersion": 2,
"supportedHosts": ["SharePointWebPart"],
"preconfiguredEntries": [{
"groupId": "c2a397d3-8c8f-47ab-b731-897178313c15",
"group": { "default": "Modern Web Parts" },

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

@ -1,33 +1,29 @@
import { Version } from '@microsoft/sp-core-library';
import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base";
import {
BaseClientSideWebPart,
IPropertyPaneConfiguration,
IPropertyPaneDropdownOption,
IPropertyPaneTextFieldProps,
IWebPartContext,
PropertyPaneTextField,
PropertyPaneDropdown,
IPropertyPaneDropdownProps
} from '@microsoft/sp-webpart-base';
import { escape } from '@microsoft/sp-lodash-subset';
import styles from './ModernCalendar.module.scss';
import * as strings from 'modernCalendarStrings';
import { IModernCalendarWebPartProps } from './IModernCalendarWebPartProps';
import CalendarTemplate from './CalendarTemplate';
import * as jQuery from 'jquery';
import 'fullcalendar';
import * as moment from 'moment';
import * as swal2 from 'sweetalert2';
import { SPComponentLoader } from '@microsoft/sp-loader';
import {
SPHttpClient, SPHttpClientResponse
} from '@microsoft/sp-http';
import {
Environment,
EnvironmentType
} from '@microsoft/sp-core-library';
import { EventObjectInput, OptionsInput } from 'fullcalendar';
import { Default as View } from 'fullcalendar/View';
IPropertyPaneDropdownProps,
} from "@microsoft/sp-property-pane";
import { Version } from "@microsoft/sp-core-library";
import { escape } from "@microsoft/sp-lodash-subset";
import styles from "./ModernCalendar.module.scss";
import * as strings from "modernCalendarStrings";
import { IModernCalendarWebPartProps } from "./IModernCalendarWebPartProps";
import CalendarTemplate from "./CalendarTemplate";
import * as jQuery from "jquery";
import "fullcalendar";
import * as moment from "moment";
import * as swal2 from "sweetalert2";
import { SPComponentLoader } from "@microsoft/sp-loader";
import { SPHttpClient, SPHttpClientResponse } from "@microsoft/sp-http";
import { Environment, EnvironmentType } from "@microsoft/sp-core-library";
import { EventObjectInput, OptionsInput } from "fullcalendar";
import { Default as View } from "fullcalendar/View";
export interface ISPLists {
value: ISPList[];
@ -43,12 +39,15 @@ export interface EventObjects {
}
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');
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 {
@ -57,12 +56,20 @@ export default class ModernCalendarWebPart extends BaseClientSideWebPart<IModern
}
if (!this.properties.other) {
jQuery('input[aria-label=hide-col]').parent().hide();
jQuery("input[aria-label=hide-col]").parent().hide();
}
//Check required properties before rendering list
if (this.properties.listTitle == null || this.properties.start == null || this.properties.end == null || this.properties.title == null || this.properties.detail == null) {
this.domElement.innerHTML = CalendarTemplate.emptyHtml(this.properties.description);
if (
this.properties.listTitle == null ||
this.properties.start == null ||
this.properties.end == null ||
this.properties.title == null ||
this.properties.detail == null
) {
this.domElement.innerHTML = CalendarTemplate.emptyHtml(
this.properties.description
);
} else {
this.domElement.innerHTML = CalendarTemplate.templateHtml;
this._renderListAsync();
@ -70,7 +77,7 @@ export default class ModernCalendarWebPart extends BaseClientSideWebPart<IModern
}
protected get dataVersion(): Version {
return Version.parse('1.0');
return Version.parse("1.0");
}
protected onPropertyPaneConfigurationStart(): void {
@ -82,109 +89,156 @@ export default class ModernCalendarWebPart extends BaseClientSideWebPart<IModern
if (this.properties.site) {
this.listDisabled = false;
}
if (this.properties.listTitle && (!this.properties.start || !this.properties.end || !this.properties.title || !this.properties.detail)) {
if (
this.properties.listTitle &&
(!this.properties.start ||
!this.properties.end ||
!this.properties.title ||
!this.properties.detail)
) {
//this._getColumnsAsync();
}
if (!this.properties.other) {
jQuery('input[aria-label=hide-col]').parent().hide();
jQuery("input[aria-label=hide-col]").parent().hide();
}
if (this.properties.site && this.properties.listTitle && this.properties.start && this.properties.start && this.properties.end && this.properties.title && this.properties.detail) {
this.context.statusRenderer.displayLoadingIndicator(this.domElement, 'Configuration');
this._getSiteRootWeb()
.then((response0) => {
this._getSites(response0['Url'])
.then((response) => {
var sites: IPropertyPaneDropdownOption[] = [];
sites.push({ key: this.context.pageContext.web.absoluteUrl, text: 'This Site' });
sites.push({ key: 'other', text: 'Other Site (Specify Url)' });
for (var _key in response.value) {
if (this.context.pageContext.web.absoluteUrl != response.value[_key]['Url']) {
sites.push({ key: response.value[_key]['Url'], text: response.value[_key]['Title'] });
}
}
this._siteOptions = sites;
if (this.properties.site) {
this._getListTitles(this.properties.site)
.then((response2) => {
this._dropdownOptions = response2.value.map((list: ISPList) => {
return {
key: list.Title,
text: list.Title
};
});
this._getListColumns(this.properties.listTitle, this.properties.site)
.then((response3) => {
var col: IPropertyPaneDropdownOption[] = [];
for (var _key in response3.value) {
col.push({ key: response3.value[_key]['InternalName'], text: response3.value[_key]['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.site &&
this.properties.listTitle &&
this.properties.start &&
this.properties.start &&
this.properties.end &&
this.properties.title &&
this.properties.detail
) {
this.context.statusRenderer.displayLoadingIndicator(
this.domElement,
"Configuration"
);
this._getSiteRootWeb().then((response0) => {
this._getSites(response0["Url"]).then((response) => {
var sites: IPropertyPaneDropdownOption[] = [];
sites.push({
key: this.context.pageContext.web.absoluteUrl,
text: "This Site",
});
sites.push({ key: "other", text: "Other Site (Specify Url)" });
for (var _key in response.value) {
if (
this.context.pageContext.web.absoluteUrl !=
response.value[_key]["Url"]
) {
sites.push({
key: response.value[_key]["Url"],
text: response.value[_key]["Title"],
});
}
}
this._siteOptions = sites;
if (this.properties.site) {
this._getListTitles(this.properties.site).then((response2) => {
this._dropdownOptions = response2.value.map((list: ISPList) => {
return {
key: list.Title,
text: list.Title,
};
});
this._getListColumns(
this.properties.listTitle,
this.properties.site
).then((response3) => {
var col: IPropertyPaneDropdownOption[] = [];
for (var _key in response3.value) {
col.push({
key: response3.value[_key]["InternalName"],
text: response3.value[_key]["Title"],
});
}
}
this._columnOptions = col;
this.colsDisabled = false;
this.listDisabled = false;
this.context.propertyPane.refresh();
this.context.statusRenderer.clearLoadingIndicator(
this.domElement
);
this.render();
});
});
}
});
});
} else {
this._getSitesAsync();
}
}
protected onPropertyPaneFieldChanged(propertyPath: string, oldValue: any, newValue: any): void {
if (newValue == 'other') {
protected onPropertyPaneFieldChanged(
propertyPath: string,
oldValue: any,
newValue: any
): void {
if (newValue == "other") {
this.properties.other = true;
this.properties.listTitle = null;
jQuery('input[aria-label=hide-col]').parent().show();
} else if (oldValue === 'other' && newValue != 'other') {
jQuery("input[aria-label=hide-col]").parent().show();
} else if (oldValue === "other" && newValue != "other") {
this.properties.other = false;
this.properties.siteOther = null;
this.properties.listTitle = null;
jQuery('input[aria-label=hide-col]').parent().hide();
jQuery("input[aria-label=hide-col]").parent().hide();
}
this.context.statusRenderer.displayLoadingIndicator(this.domElement, 'Configuration');
if ((propertyPath === 'site' || propertyPath === 'siteOther') && newValue) {
this.context.statusRenderer.displayLoadingIndicator(
this.domElement,
"Configuration"
);
if ((propertyPath === "site" || propertyPath === "siteOther") && newValue) {
this.colsDisabled = true;
this.listDisabled = true;
var siteUrl = newValue;
if (this.properties.other) { siteUrl = this.properties.siteOther; } else { jQuery('input[aria-label=hide-col]').parent().hide(); }
if ((this.properties.other && this.properties.siteOther.length > 25) || !this.properties.other) {
this._getListTitles(siteUrl)
.then((response) => {
this._dropdownOptions = response.value.map((list: ISPList) => {
return {
key: list.Title,
text: list.Title
};
});
this.listDisabled = false;
this.context.propertyPane.refresh();
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
this.render();
});
if (this.properties.other) {
siteUrl = this.properties.siteOther;
} else {
jQuery("input[aria-label=hide-col]").parent().hide();
}
} else if (propertyPath === 'listTitle' && newValue) {
// tslint:disable-next-line:no-duplicate-variable
var siteUrl = newValue;
if (this.properties.other) { siteUrl = this.properties.siteOther; }
this._getListColumns(newValue, siteUrl)
.then((response) => {
var col: IPropertyPaneDropdownOption[] = [];
for (var _key in response.value) {
col.push({ key: response.value[_key]['InternalName'], text: response.value[_key]['Title'] });
}
this._columnOptions = col;
this.colsDisabled = false;
if (
(this.properties.other && this.properties.siteOther.length > 25) ||
!this.properties.other
) {
this._getListTitles(siteUrl).then((response) => {
this._dropdownOptions = response.value.map((list: ISPList) => {
return {
key: list.Title,
text: list.Title,
};
});
this.listDisabled = false;
this.context.propertyPane.refresh();
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
this.render();
});
}
} else if (propertyPath === "listTitle" && newValue) {
// tslint:disable-next-line:no-duplicate-variable
var siteUrl = newValue;
if (this.properties.other) {
siteUrl = this.properties.siteOther;
}
this._getListColumns(newValue, siteUrl).then((response) => {
var col: IPropertyPaneDropdownOption[] = [];
for (var _key in response.value) {
col.push({
key: response.value[_key]["InternalName"],
text: response.value[_key]["Title"],
});
}
this._columnOptions = col;
this.colsDisabled = false;
this.context.propertyPane.refresh();
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
this.render();
});
} else {
//Handle other fields here
this.render();
@ -195,63 +249,66 @@ export default class ModernCalendarWebPart extends BaseClientSideWebPart<IModern
private listDisabled: boolean = true;
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
var otherSiteAria = 'hide-col';
if (this.properties.other) { otherSiteAria = ''; }
var otherSiteAria = "hide-col";
if (this.properties.other) {
otherSiteAria = "";
}
return {
pages: [
{
header: {
description: strings.PropertyPaneDescription
description: strings.PropertyPaneDescription,
},
groups: [
{
groupName: strings.BasicGroupName,
groupFields: [
PropertyPaneTextField('description', {
label: strings.DescriptionFieldLabel
PropertyPaneTextField("description", {
label: strings.DescriptionFieldLabel,
}),
PropertyPaneDropdown('theme', {
label: 'Theme',
options: CalendarTemplate.theme()
PropertyPaneDropdown("theme", {
label: "Theme",
options: CalendarTemplate.theme(),
}),
PropertyPaneDropdown('site', {
label: 'Site',
options: this._siteOptions
PropertyPaneDropdown("site", {
label: "Site",
options: this._siteOptions,
}),
PropertyPaneTextField('siteOther', {
label: 'Other Site Url (i.e. https://contoso.sharepoint.com/path)',
ariaLabel: otherSiteAria
PropertyPaneTextField("siteOther", {
label:
"Other Site Url (i.e. https://contoso.sharepoint.com/path)",
ariaLabel: otherSiteAria,
}),
PropertyPaneDropdown('listTitle', {
label: 'List Title',
PropertyPaneDropdown("listTitle", {
label: "List Title",
options: this._dropdownOptions,
disabled: this.listDisabled
disabled: this.listDisabled,
}),
PropertyPaneDropdown('start', {
label: 'Start Date Field',
PropertyPaneDropdown("start", {
label: "Start Date Field",
options: this._columnOptions,
disabled: this.colsDisabled
disabled: this.colsDisabled,
}),
PropertyPaneDropdown('end', {
label: 'End Date Field',
PropertyPaneDropdown("end", {
label: "End Date Field",
options: this._columnOptions,
disabled: this.colsDisabled
disabled: this.colsDisabled,
}),
PropertyPaneDropdown('title', {
label: 'Event Title Field',
PropertyPaneDropdown("title", {
label: "Event Title Field",
options: this._columnOptions,
disabled: this.colsDisabled
disabled: this.colsDisabled,
}),
PropertyPaneDropdown('detail', {
label: 'Event Details',
PropertyPaneDropdown("detail", {
label: "Event Details",
options: this._columnOptions,
disabled: this.colsDisabled
})
]
}
]
}
]
disabled: this.colsDisabled,
}),
],
},
],
},
],
};
}
@ -265,35 +322,67 @@ export default class ModernCalendarWebPart extends BaseClientSideWebPart<IModern
}
private _getSiteRootWeb(): Promise<ISPLists> {
return this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl + `/_api/Site/RootWeb?$select=Title,Url`, SPHttpClient.configurations.v1)
return this.context.spHttpClient
.get(
this.context.pageContext.web.absoluteUrl +
`/_api/Site/RootWeb?$select=Title,Url`,
SPHttpClient.configurations.v1
)
.then((response: SPHttpClientResponse) => {
return response.json();
});
}
private _getSites(rootWebUrl: string): Promise<ISPLists> {
return this.context.spHttpClient.get(rootWebUrl + `/_api/web/webs?$select=Title,Url`, SPHttpClient.configurations.v1)
return this.context.spHttpClient
.get(
rootWebUrl + `/_api/web/webs?$select=Title,Url`,
SPHttpClient.configurations.v1
)
.then((response: SPHttpClientResponse) => {
return response.json();
});
}
private _getListTitles(site: string): Promise<ISPLists> {
return this.context.spHttpClient.get(site + `/_api/web/lists?$filter=Hidden eq false and BaseType eq 0`, SPHttpClient.configurations.v1)
return this.context.spHttpClient
.get(
site + `/_api/web/lists?$filter=Hidden eq false and BaseType eq 0`,
SPHttpClient.configurations.v1
)
.then((response: SPHttpClientResponse) => {
return response.json();
});
}
private _getListColumns(listNameColumns: string, listsite: string): Promise<any> {
return this.context.spHttpClient.get(listsite + `/_api/web/lists/GetByTitle('${listNameColumns}')/Fields?$filter=Hidden eq false and ReadOnlyField eq false`, SPHttpClient.configurations.v1)
private _getListColumns(
listNameColumns: string,
listsite: string
): Promise<any> {
return this.context.spHttpClient
.get(
listsite +
`/_api/web/lists/GetByTitle('${listNameColumns}')/Fields?$filter=Hidden eq false and ReadOnlyField eq false`,
SPHttpClient.configurations.v1
)
.then((response: SPHttpClientResponse) => {
return response.json();
});
}
private _getListData(listName: string, site: string): Promise<any> {
return this.context.spHttpClient.get(site + `/_api/web/lists/GetByTitle('${listName}')/items?$select=${encodeURIComponent(this.properties.title)},${encodeURIComponent(this.properties.start)},${encodeURIComponent(this.properties.end)},${encodeURIComponent(this.properties.detail)},Created,Author/ID,Author/Title&$expand=Author/ID,Author/Title&$orderby=Id desc&$limit=500`, SPHttpClient.configurations.v1)
return this.context.spHttpClient
.get(
site +
`/_api/web/lists/GetByTitle('${listName}')/items?$select=${encodeURIComponent(
this.properties.title
)},${encodeURIComponent(this.properties.start)},${encodeURIComponent(
this.properties.end
)},${encodeURIComponent(
this.properties.detail
)},Created,Author/ID,Author/Title&$expand=Author/ID,Author/Title&$orderby=Id desc&$limit=500`,
SPHttpClient.configurations.v1
)
.then((response: SPHttpClientResponse) => {
return response.json();
});
@ -305,8 +394,8 @@ export default class ModernCalendarWebPart extends BaseClientSideWebPart<IModern
title: list[this.properties.title],
start: list[this.properties.start],
end: list[this.properties.end],
id: list['Id'],
detail: list[this.properties.detail]
id: list["Id"],
detail: list[this.properties.detail],
};
});
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
@ -315,67 +404,89 @@ export default class ModernCalendarWebPart extends BaseClientSideWebPart<IModern
theme: true,
events: calItems,
eventClick: (_event) => {
var eventDetail = moment(_event['start']).format('MM/DD/YYYY hh:mm') + ' - ' + moment(_event['end']).format('MM/DD/YYYY hh:mm') + '<br>' + _event['detail'];
swal2.default(_event.title, eventDetail, 'info');
}
var eventDetail =
moment(_event["start"]).format("MM/DD/YYYY hh:mm") +
" - " +
moment(_event["end"]).format("MM/DD/YYYY hh:mm") +
"<br>" +
_event["detail"];
swal2.default(_event.title, eventDetail, "info");
},
};
jQuery('.spfxcalendar', this.domElement).fullCalendar(calendarOptions);
jQuery(".spfxcalendar", this.domElement).fullCalendar(calendarOptions);
}
private _getSitesAsync(): void {
this._getSiteRootWeb()
.then((response) => {
this._getSites(response['Url'])
.then((response1) => {
var sites: IPropertyPaneDropdownOption[] = [];
sites.push({ key: this.context.pageContext.web.absoluteUrl, text: 'This Site' });
sites.push({ key: 'other', text: 'Other Site (Specify Url)' });
for (var _key in response1.value) {
sites.push({ key: response1.value[_key]['Url'], text: response1.value[_key]['Title'] });
}
this._siteOptions = sites;
this.context.propertyPane.refresh();
var siteUrl = this.properties.site;
if (this.properties.other) { siteUrl = this.properties.siteOther; }
this._getListTitles(siteUrl)
.then((response2) => {
this._dropdownOptions = response2.value.map((list: ISPList) => {
return {
key: list.Title,
text: list.Title
};
});
this.context.propertyPane.refresh();
if (this.properties.listTitle) {
this._getListColumns(this.properties.listTitle, this.properties.site)
.then((response3) => {
var col: IPropertyPaneDropdownOption[] = [];
for (var _key in response3.value) {
col.push({ key: response3.value[_key]['InternalName'], text: response3.value[_key]['Title'] });
}
this._columnOptions = col;
this.colsDisabled = false;
this.listDisabled = false;
this.context.propertyPane.refresh();
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
this.render();
});
}
});
this._getSiteRootWeb().then((response) => {
this._getSites(response["Url"]).then((response1) => {
var sites: IPropertyPaneDropdownOption[] = [];
sites.push({
key: this.context.pageContext.web.absoluteUrl,
text: "This Site",
});
sites.push({ key: "other", text: "Other Site (Specify Url)" });
for (var _key in response1.value) {
sites.push({
key: response1.value[_key]["Url"],
text: response1.value[_key]["Title"],
});
}
this._siteOptions = sites;
this.context.propertyPane.refresh();
var siteUrl = this.properties.site;
if (this.properties.other) {
siteUrl = this.properties.siteOther;
}
this._getListTitles(siteUrl).then((response2) => {
this._dropdownOptions = response2.value.map((list: ISPList) => {
return {
key: list.Title,
text: list.Title,
};
});
this.context.propertyPane.refresh();
if (this.properties.listTitle) {
this._getListColumns(
this.properties.listTitle,
this.properties.site
).then((response3) => {
var col: IPropertyPaneDropdownOption[] = [];
for (var _key in response3.value) {
col.push({
key: response3.value[_key]["InternalName"],
text: response3.value[_key]["Title"],
});
}
this._columnOptions = col;
this.colsDisabled = false;
this.listDisabled = false;
this.context.propertyPane.refresh();
this.context.statusRenderer.clearLoadingIndicator(
this.domElement
);
this.render();
});
}
});
});
}
private _renderListAsync(): void {
var siteUrl = this.properties.site;
if (this.properties.other) { siteUrl = this.properties.siteOther; }
this._getListData(this.properties.listTitle, siteUrl).then((response) => {
this._renderList(response.value);
}).catch((err) => {
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
this.context.statusRenderer.renderError(this.domElement, "There was an error loading your list, please verify the selected list has Calendar Events or choose a new list.");
});
}
private _renderListAsync(): void {
var siteUrl = this.properties.site;
if (this.properties.other) {
siteUrl = this.properties.siteOther;
}
this._getListData(this.properties.listTitle, siteUrl)
.then((response) => {
this._renderList(response.value);
})
.catch((err) => {
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
this.context.statusRenderer.renderError(
this.domElement,
"There was an error loading your list, please verify the selected list has Calendar Events or choose a new list."
);
});
}
}

7
samples/js-modern-calendar/tsconfig.json
View File

@ -1,4 +1,5 @@
{
"extends": "./node_modules/@microsoft/rush-stack-compiler-3.3/includes/tsconfig-web.json",
"compilerOptions": {
"target": "es5",
"forceConsistentCasingInFileNames": true,
@ -8,8 +9,11 @@
"declaration": true,
"sourceMap": true,
"experimentalDecorators": true,
"inlineSources": false,
"skipLibCheck": true,
"outDir": "lib",
"strictNullChecks": false,
"noUnusedLocals": false,
"typeRoots": [
"./node_modules/@types",
"./node_modules/@microsoft"
@ -25,7 +29,8 @@
]
},
"include": [
"src/**/*.ts"
"src/**/*.ts",
"src/**/*.tsx"
],
"exclude": [
"node_modules",