@@ -32,51 +30,68 @@ export default class CalendarTemplate {
`;
- }
+ }
- 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
= [
- '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 = [
+ "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' }
- ];
-}
\ No newline at end of file
+ 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",
+ },
+ ];
+}
diff --git a/samples/js-modern-calendar/src/webparts/modernCalendar/ModernCalendarWebPart.manifest.json b/samples/js-modern-calendar/src/webparts/modernCalendar/ModernCalendarWebPart.manifest.json
index b92ae6a41..01900939a 100644
--- a/samples/js-modern-calendar/src/webparts/modernCalendar/ModernCalendarWebPart.manifest.json
+++ b/samples/js-modern-calendar/src/webparts/modernCalendar/ModernCalendarWebPart.manifest.json
@@ -6,7 +6,7 @@
"componentType": "WebPart",
"version": "*",
"manifestVersion": 2,
-
+ "supportedHosts": ["SharePointWebPart"],
"preconfiguredEntries": [{
"groupId": "c2a397d3-8c8f-47ab-b731-897178313c15",
"group": { "default": "Modern Web Parts" },
diff --git a/samples/js-modern-calendar/src/webparts/modernCalendar/ModernCalendarWebPart.ts b/samples/js-modern-calendar/src/webparts/modernCalendar/ModernCalendarWebPart.ts
index 5c4f741c5..f2c06e6cb 100644
--- a/samples/js-modern-calendar/src/webparts/modernCalendar/ModernCalendarWebPart.ts
+++ b/samples/js-modern-calendar/src/webparts/modernCalendar/ModernCalendarWebPart.ts
@@ -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 {
-
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 {
- 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 {
- 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 {
- 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 {
- 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 {
- 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 {
+ 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 {
- 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 {
- var eventDetail = moment(_event['start']).format('MM/DD/YYYY hh:mm') + ' - ' + moment(_event['end']).format('MM/DD/YYYY hh:mm') + '
' + _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") +
+ "
" +
+ _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."
+ );
+ });
+ }
}
diff --git a/samples/js-modern-calendar/tsconfig.json b/samples/js-modern-calendar/tsconfig.json
index 5ae98f83c..76abda2df 100644
--- a/samples/js-modern-calendar/tsconfig.json
+++ b/samples/js-modern-calendar/tsconfig.json
@@ -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",