diff --git a/samples/js-modern-calendar/config/config.json b/samples/js-modern-calendar/config/config.json index ef9a5d303..9279068c1 100644 --- a/samples/js-modern-calendar/config/config.json +++ b/samples/js-modern-calendar/config/config.json @@ -1,14 +1,18 @@ { - "entries": [ - { - "entry": "./lib/webparts/modernCalendar/ModernCalendarWebPart.js", - "manifest": "./src/webparts/modernCalendar/ModernCalendarWebPart.manifest.json", - "outputPath": "./dist/modern-calendar.bundle.js" + "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json", + "version": "2.0", + "bundles": { + "modern-calendar.bundle": { + "components": [ + { + "entrypoint": "./lib/webparts/modernCalendar/ModernCalendarWebPart.js", + "manifest": "./src/webparts/modernCalendar/ModernCalendarWebPart.manifest.json" + } + ] } - ], - "externals": { }, "localizedResources": { - "modernCalendarStrings": "webparts/modernCalendar/loc/{locale}.js" - } + "modernCalendarStrings": "lib/webparts/modernCalendar/loc/{locale}.js" + }, + "externals": {} } \ No newline at end of file diff --git a/samples/js-modern-calendar/config/package-solution.json b/samples/js-modern-calendar/config/package-solution.json index 0bf6f31db..1fd6960e3 100644 --- a/samples/js-modern-calendar/config/package-solution.json +++ b/samples/js-modern-calendar/config/package-solution.json @@ -1,8 +1,9 @@ { "solution": { - "name": "spFX Modern Calendar", + "name": "SPFx Modern Calendar", "id": "3d593a2f-73f1-486f-9dae-555c6f6b584d", - "version": "1.0.0.1" + "version": "1.0.0.1", + "includeClientSideAssets": true }, "paths": { "zippedPackage": "solution/modern-calendar.sppkg" diff --git a/samples/js-modern-calendar/config/write-manifests.json b/samples/js-modern-calendar/config/write-manifests.json index 8c6020586..89f4ed068 100644 --- a/samples/js-modern-calendar/config/write-manifests.json +++ b/samples/js-modern-calendar/config/write-manifests.json @@ -1,3 +1,4 @@ { - "cdnBasePath": "https://publiccdn.sharepointonline.com/pcpro365.sharepoint.com/163800463de5f9285ad4f6f9cc0a97985b96b057e062d4733849cc0fc90eeffbd6d72bb8/calendar/" + "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json", + "cdnBasePath": "" } \ No newline at end of file diff --git a/samples/js-modern-calendar/src/webparts/modernCalendar/CalendarTemplate.ts b/samples/js-modern-calendar/src/webparts/modernCalendar/CalendarTemplate.ts index f102c99e9..18babdae5 100644 --- a/samples/js-modern-calendar/src/webparts/modernCalendar/CalendarTemplate.ts +++ b/samples/js-modern-calendar/src/webparts/modernCalendar/CalendarTemplate.ts @@ -34,7 +34,7 @@ export default class CalendarTemplate { `; } - public static themeBase: string = `https://publiccdn.sharepointonline.com/pcpro365.sharepoint.com/163800463de5f9285ad4f6f9cc0a97985b96b057e062d4733849cc0fc90eeffbd6d72bb8/calendar/themes/`; + public static themeBase: string = `https://code.jquery.com/ui/1.12.1/themes/`; public static themeNames: Array = [ 'default', @@ -63,12 +63,12 @@ export default class CalendarTemplate { '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()}) + themes.push({key: CalendarTemplate.themeBase + name + '/jquery-ui.min.css', text: name.toLocaleUpperCase()}); }); return themes; } diff --git a/samples/js-modern-calendar/src/webparts/modernCalendar/ModernCalendarWebPart.ts b/samples/js-modern-calendar/src/webparts/modernCalendar/ModernCalendarWebPart.ts index 00b1638b5..5c4f741c5 100644 --- a/samples/js-modern-calendar/src/webparts/modernCalendar/ModernCalendarWebPart.ts +++ b/samples/js-modern-calendar/src/webparts/modernCalendar/ModernCalendarWebPart.ts @@ -26,7 +26,7 @@ import { Environment, EnvironmentType } from '@microsoft/sp-core-library'; -import { EventObjectInput, OptionsInput } from 'fullcalendar'; +import { EventObjectInput, OptionsInput } from 'fullcalendar'; import { Default as View } from 'fullcalendar/View'; export interface ISPLists { @@ -39,27 +39,27 @@ export interface ISPList { } export interface EventObjects { - value: EventObjectInput []; + value: EventObjectInput[]; } export default class ModernCalendarWebPart extends BaseClientSideWebPart { public constructor() { super(); - //Modify with your a CDN or local path - SPComponentLoader.loadCss('//publiccdn.sharepointonline.com/pcpro365.sharepoint.com/163800463de5f9285ad4f6f9cc0a97985b96b057e062d4733849cc0fc90eeffbd6d72bb8/calendar/sweetalert2.min.css'); - SPComponentLoader.loadCss('//publiccdn.sharepointonline.com/pcpro365.sharepoint.com/163800463de5f9285ad4f6f9cc0a97985b96b057e062d4733849cc0fc90eeffbd6d72bb8/calendar/fullcalendar.min.css'); + // 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 { - - if (this.properties.theme != null){ + if (this.properties.theme != null) { SPComponentLoader.loadCss(this.properties.theme); } - if (!this.properties.other){ + if (!this.properties.other) { 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); @@ -74,120 +74,121 @@ export default class ModernCalendarWebPart extends BaseClientSideWebPart { + 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']}); - } - } - 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']}); + if (this.context.pageContext.web.absoluteUrl != response.value[_key]['Url']) { + sites.push({ key: response.value[_key]['Url'], text: response.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._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(); + this._getSitesAsync(); } } 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') { - this.properties.other = false; - this.properties.siteOther = null; - this.properties.listTitle = null; - jQuery('input[aria-label=hide-col]').parent().hide(); - } - 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 (newValue == 'other') { + this.properties.other = true; + this.properties.listTitle = null; + 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(); + } + 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 + }; }); - } - } 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(); + 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(); + } } private colsDisabled: boolean = true; @@ -265,16 +266,16 @@ 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) - .then((response: SPHttpClientResponse) => { - return response.json(); - }); + .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) - .then((response: SPHttpClientResponse) => { - return response.json(); - }); + .then((response: SPHttpClientResponse) => { + return response.json(); + }); } private _getListTitles(site: string): Promise { @@ -284,7 +285,7 @@ export default class ModernCalendarWebPart extends BaseClientSideWebPart { + 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(); @@ -292,89 +293,89 @@ export default class ModernCalendarWebPart extends BaseClientSideWebPart { - 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(); }); } private _renderList(items: any[]): void { - var calItems: EventObjectInput [] = items.map((list: any) => { - return { - title: list[this.properties.title], - start: list[this.properties.start], - end: list[this.properties.end], - id: list['Id'], - detail: list[this.properties.detail] - }; + var calItems: EventObjectInput[] = items.map((list: any) => { + return { + title: list[this.properties.title], + start: list[this.properties.start], + end: list[this.properties.end], + id: list['Id'], + detail: list[this.properties.detail] + }; }); this.context.statusRenderer.clearLoadingIndicator(this.domElement); - const calendarOptions:EventObjectInput = { + const calendarOptions: EventObjectInput = { title: "test", 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') + '
' + _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); } private _getSitesAsync(): void { - this._getSiteRootWeb() + 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(); - }); + .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."); - }); + 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."); + }); } }