Merge pull request #1702 from Ravikadri/master
This commit is contained in:
Hugo Bernier
GitHub
commit
0e55eaa1c6
|
|
@ -14,14 +14,22 @@ extensions:
|
|||
# Modern Calendar
|
||||
|
||||
## Summary
|
||||
This is a modern webpart built on the GA version of the [SharePoint Framework](https://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview) demonstrating how to build a custom web part with a calendar capabilities in it.
|
||||
|
||||
This is a modern web part built on the GA version of the [SharePoint Framework](https://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview) demonstrating how to build a custom web part with a calendar capabilities in it.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
||||
## Compatibility
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Applies to
|
||||
|
||||
|
|
@ -38,6 +46,7 @@ Solution|Author(s)
|
|||
--------|---------
|
||||
js-modern-calendar | Jeremy Coleman (MCP, PC Professional, Inc.)
|
||||
js-modern-calendar | Nanddeep Nachan ([@NanddeepNachan](twitter.com/NanddeepNachan))
|
||||
js-modern-calendar | Ravi Chandra ([Ravikadri](https://github.com/Ravikadri))
|
||||
|
||||
## Version history
|
||||
|
||||
|
|
@ -45,8 +54,10 @@ Version|Date|Comments
|
|||
-------|----|--------
|
||||
1.0.0.0|February 11, 2017|Initial release
|
||||
1.0.0.1|June 05, 2020|Updated the external CDN references to public CDN references
|
||||
1.0.2.0|February 9, 2021|Upgraded to SPFx 1.11 and fixed issues with missing dependencies
|
||||
|
||||
## 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.**
|
||||
|
||||
---
|
||||
|
|
|
|||
|
|
@ -2,8 +2,15 @@
|
|||
"solution": {
|
||||
"name": "SPFx Modern Calendar",
|
||||
"id": "3d593a2f-73f1-486f-9dae-555c6f6b584d",
|
||||
"version": "1.0.0.1",
|
||||
"includeClientSideAssets": true
|
||||
"version": "1.0.2.0",
|
||||
"includeClientSideAssets": true,
|
||||
"developer": {
|
||||
"name": "",
|
||||
"websiteUrl": "",
|
||||
"privacyUrl": "",
|
||||
"termsOfUseUrl": "",
|
||||
"mpnId": ""
|
||||
}
|
||||
},
|
||||
"paths": {
|
||||
"zippedPackage": "solution/modern-calendar.sppkg"
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,26 +1,31 @@
|
|||
{
|
||||
"name": "modern-calendar",
|
||||
"version": "0.0.1",
|
||||
"version": "1.0.2",
|
||||
"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",
|
||||
|
|
|
|||
|
|
@ -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[];
|
||||
|
|
@ -37,46 +35,63 @@ export default class CalendarTemplate {
|
|||
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'
|
||||
"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()});
|
||||
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' }
|
||||
{
|
||||
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",
|
||||
},
|
||||
];
|
||||
}
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
"componentType": "WebPart",
|
||||
"version": "*",
|
||||
"manifestVersion": 2,
|
||||
|
||||
"supportedHosts": ["SharePointWebPart"],
|
||||
"preconfiguredEntries": [{
|
||||
"groupId": "c2a397d3-8c8f-47ab-b731-897178313c15",
|
||||
"group": { "default": "Modern Web Parts" },
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
@ -83,49 +90,79 @@ export default class ModernCalendarWebPart extends BaseClientSideWebPart<IModern
|
|||
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) => {
|
||||
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)' });
|
||||
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'] });
|
||||
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._getListTitles(this.properties.site).then((response2) => {
|
||||
this._dropdownOptions = response2.value.map((list: ISPList) => {
|
||||
return {
|
||||
key: list.Title,
|
||||
text: list.Title
|
||||
text: list.Title,
|
||||
};
|
||||
});
|
||||
this._getListColumns(this.properties.listTitle, this.properties.site)
|
||||
.then((response3) => {
|
||||
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'] });
|
||||
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.context.statusRenderer.clearLoadingIndicator(
|
||||
this.domElement
|
||||
);
|
||||
this.render();
|
||||
});
|
||||
});
|
||||
|
|
@ -137,30 +174,43 @@ export default class ModernCalendarWebPart extends BaseClientSideWebPart<IModern
|
|||
}
|
||||
}
|
||||
|
||||
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) => {
|
||||
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
|
||||
text: list.Title,
|
||||
};
|
||||
});
|
||||
this.listDisabled = false;
|
||||
|
|
@ -169,15 +219,19 @@ export default class ModernCalendarWebPart extends BaseClientSideWebPart<IModern
|
|||
this.render();
|
||||
});
|
||||
}
|
||||
} else if (propertyPath === 'listTitle' && newValue) {
|
||||
} 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) => {
|
||||
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'] });
|
||||
col.push({
|
||||
key: response.value[_key]["InternalName"],
|
||||
text: response.value[_key]["Title"],
|
||||
});
|
||||
}
|
||||
this._columnOptions = col;
|
||||
this.colsDisabled = false;
|
||||
|
|
@ -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,49 +404,66 @@ 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) => {
|
||||
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)' });
|
||||
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'] });
|
||||
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) => {
|
||||
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
|
||||
text: list.Title,
|
||||
};
|
||||
});
|
||||
this.context.propertyPane.refresh();
|
||||
if (this.properties.listTitle) {
|
||||
this._getListColumns(this.properties.listTitle, this.properties.site)
|
||||
.then((response3) => {
|
||||
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'] });
|
||||
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.context.statusRenderer.clearLoadingIndicator(
|
||||
this.domElement
|
||||
);
|
||||
this.render();
|
||||
});
|
||||
}
|
||||
|
|
@ -366,16 +472,21 @@ export default class ModernCalendarWebPart extends BaseClientSideWebPart<IModern
|
|||
});
|
||||
}
|
||||
|
||||
|
||||
private _renderListAsync(): void {
|
||||
var siteUrl = this.properties.site;
|
||||
if (this.properties.other) { siteUrl = this.properties.siteOther; }
|
||||
this._getListData(this.properties.listTitle, siteUrl).then((response) => {
|
||||
if (this.properties.other) {
|
||||
siteUrl = this.properties.siteOther;
|
||||
}
|
||||
this._getListData(this.properties.listTitle, siteUrl)
|
||||
.then((response) => {
|
||||
this._renderList(response.value);
|
||||
}).catch((err) => {
|
||||
})
|
||||
.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.");
|
||||
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."
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -46,6 +46,7 @@ Version|Date|Comments
|
|||
2.0|January 19, 2020|Upgrade to SPFx 1.10
|
||||
2.1|June 22, 2020|Added pagination (Abhishek Garg)
|
||||
2.2|October 1, 2020 | Added new Pagination Configuration (@beau__cameron)
|
||||
|
||||
## 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.**
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "react-accordion",
|
||||
"version": "0.0.1",
|
||||
"version": "2.2.0",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
|
|
|
|||
Loading…
Reference in New Issue