New Sample Added, Modern Calendar (#140)
* Initial Commit * Update README.md * Updated README
This commit is contained in:
Jeremy Coleman
Vesa Juvonen
parent
b6fd85de83
commit
6020d00821
|
|
@ -0,0 +1,21 @@
|
||||||
|
MIT License
|
||||||
|
|
||||||
|
Copyright (c) 2017 jcoleman-pcprofessional
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
|
|
@ -0,0 +1,56 @@
|
||||||
|
# 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). The ready to deploy SharePoint Add-in package is available under the sharepoint/solution folder.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Used SharePoint Framework Version
|
||||||
|
|
||||||
|
|
||||||
|
## Applies to
|
||||||
|
|
||||||
|
* [SharePoint Framework](https://blogs.office.com/2017/02/23/sharepoint-framework-reaches-general-availability-build-and-deploy-engaging-web-parts-today/)
|
||||||
|
* [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
|
||||||
|
|
||||||
|
> Update accordingly as needed.
|
||||||
|
|
||||||
|
## Prerequisites
|
||||||
|
|
||||||
|
> Any special pre-requisites?
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
|
||||||
|
Solution|Author(s)
|
||||||
|
--------|---------
|
||||||
|
folder name | Author details
|
||||||
|
|
||||||
|
## Version history
|
||||||
|
|
||||||
|
Version|Date|Comments
|
||||||
|
-------|----|--------
|
||||||
|
1.1|September 2, 2025|Update comment
|
||||||
|
1.0|August 29, 2025|Initial release
|
||||||
|
|
||||||
|
## 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.**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Minimal Path to Awesome
|
||||||
|
|
||||||
|
- Clone this repository
|
||||||
|
- in the command line run:
|
||||||
|
- `npm install`
|
||||||
|
- `gulp serve`
|
||||||
|
|
||||||
|
> Include any additional steps as needed.
|
||||||
|
|
||||||
|
## Features
|
||||||
|
Renders a calendar from any list available on the selected site. Site, List, Start, End, Event Title,Event Details and Calendar Theme are user-definable in the web part properties.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/js-modern-calendar“ />
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
{
|
||||||
|
"entries": [
|
||||||
|
{
|
||||||
|
"entry": "./lib/webparts/modernCalendar/ModernCalendarWebPart.js",
|
||||||
|
"manifest": "./src/webparts/modernCalendar/ModernCalendarWebPart.manifest.json",
|
||||||
|
"outputPath": "./dist/modern-calendar.bundle.js"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"externals": {
|
||||||
|
},
|
||||||
|
"localizedResources": {
|
||||||
|
"modernCalendarStrings": "webparts/modernCalendar/loc/{locale}.js"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
{
|
||||||
|
"deployCdnPath": "temp/deploy"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
{
|
||||||
|
"workingDir": "./temp/deploy/",
|
||||||
|
"account": "<!-- STORAGE ACCOUNT NAME -->",
|
||||||
|
"container": "document-card-web-part",
|
||||||
|
"accessKey": "<!-- ACCESS KEY -->"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
{
|
||||||
|
"solution": {
|
||||||
|
"name": "spFX Modern Calendar",
|
||||||
|
"id": "3d593a2f-73f1-486f-9dae-555c6f6b584d",
|
||||||
|
"version": "1.0.0.1"
|
||||||
|
},
|
||||||
|
"paths": {
|
||||||
|
"zippedPackage": "solution/modern-calendar.sppkg"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
{
|
||||||
|
"port": 4321,
|
||||||
|
"initialPage": "https://localhost:5432/workbench",
|
||||||
|
"https": true,
|
||||||
|
"api": {
|
||||||
|
"port": 5432,
|
||||||
|
"entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,46 @@
|
||||||
|
{
|
||||||
|
// Display errors as warnings
|
||||||
|
"displayAsWarning": true,
|
||||||
|
// The TSLint task may have been configured with several custom lint rules
|
||||||
|
// before this config file is read (for example lint rules from the tslint-microsoft-contrib
|
||||||
|
// project). If true, this flag will deactivate any of these rules.
|
||||||
|
"removeExistingRules": true,
|
||||||
|
// When true, the TSLint task is configured with some default TSLint "rules.":
|
||||||
|
"useDefaultConfigAsBase": false,
|
||||||
|
// Since removeExistingRules=true and useDefaultConfigAsBase=false, there will be no lint rules
|
||||||
|
// which are active, other than the list of rules below.
|
||||||
|
"lintConfig": {
|
||||||
|
// Opt-in to Lint rules which help to eliminate bugs in JavaScript
|
||||||
|
"rules": {
|
||||||
|
"class-name": false,
|
||||||
|
"export-name": false,
|
||||||
|
"forin": false,
|
||||||
|
"label-position": false,
|
||||||
|
"member-access": true,
|
||||||
|
"no-arg": false,
|
||||||
|
"no-console": false,
|
||||||
|
"no-construct": false,
|
||||||
|
"no-duplicate-case": true,
|
||||||
|
"no-duplicate-variable": true,
|
||||||
|
"no-eval": false,
|
||||||
|
"no-function-expression": true,
|
||||||
|
"no-internal-module": true,
|
||||||
|
"no-shadowed-variable": true,
|
||||||
|
"no-switch-case-fall-through": true,
|
||||||
|
"no-unnecessary-semicolons": true,
|
||||||
|
"no-unused-expression": true,
|
||||||
|
"no-unused-imports": true,
|
||||||
|
"no-use-before-declare": true,
|
||||||
|
"no-with-statement": true,
|
||||||
|
"semicolon": true,
|
||||||
|
"trailing-comma": false,
|
||||||
|
"typedef": false,
|
||||||
|
"typedef-whitespace": false,
|
||||||
|
"use-named-parameter": true,
|
||||||
|
"valid-typeof": true,
|
||||||
|
"variable-name": false,
|
||||||
|
"whitespace": false,
|
||||||
|
"prefer-const": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
{
|
||||||
|
"cdnBasePath": "https://publiccdn.sharepointonline.com/pcpro365.sharepoint.com/163800463de5f9285ad4f6f9cc0a97985b96b057e062d4733849cc0fc90eeffbd6d72bb8/calendar/"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const gulp = require('gulp');
|
||||||
|
const build = require('@microsoft/sp-build-web');
|
||||||
|
|
||||||
|
build.initialize(gulp);
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
{
|
||||||
|
"name": "modern-calendar",
|
||||||
|
"version": "0.0.1",
|
||||||
|
"private": true,
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.10.0"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@microsoft/sp-client-base": "~1.0.0",
|
||||||
|
"@microsoft/sp-core-library": "~1.0.0",
|
||||||
|
"@microsoft/sp-webpart-base": "~1.0.0",
|
||||||
|
"@types/fullcalendar": "^2.7.38",
|
||||||
|
"@types/moment": "^2.13.0",
|
||||||
|
"@types/webpack-env": ">=1.12.1 <1.14.0",
|
||||||
|
"fullcalendar": "^3.2.0",
|
||||||
|
"sweetalert2": "^6.4.2"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@microsoft/sp-build-web": "~1.0.0",
|
||||||
|
"@microsoft/sp-module-interfaces": "~1.0.0",
|
||||||
|
"@microsoft/sp-webpart-workbench": "~1.0.0",
|
||||||
|
"gulp": "~3.9.1",
|
||||||
|
"@types/chai": ">=3.4.34 <3.6.0",
|
||||||
|
"@types/mocha": ">=2.2.33 <2.6.0"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"build": "gulp bundle",
|
||||||
|
"clean": "gulp clean",
|
||||||
|
"test": "gulp test"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,52 @@
|
||||||
|
.EmptyCalendar {
|
||||||
|
.container {
|
||||||
|
max-width: 700px;
|
||||||
|
margin: 0px auto;
|
||||||
|
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.row {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listItem {
|
||||||
|
max-width: 715px;
|
||||||
|
margin: 5px auto 5px auto;
|
||||||
|
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
// Our button
|
||||||
|
text-decoration: none;
|
||||||
|
height: 32px;
|
||||||
|
|
||||||
|
// Primary Button
|
||||||
|
min-width: 80px;
|
||||||
|
background-color: #0078d7;
|
||||||
|
border-color: #0078d7;
|
||||||
|
color: #ffffff;
|
||||||
|
|
||||||
|
// Basic Button
|
||||||
|
outline: transparent;
|
||||||
|
position: relative;
|
||||||
|
font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
border-width: 0;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0 16px;
|
||||||
|
|
||||||
|
.label {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 14px;
|
||||||
|
height: 32px;
|
||||||
|
line-height: 32px;
|
||||||
|
margin: 0 4px;
|
||||||
|
vertical-align: top;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,82 @@
|
||||||
|
import {
|
||||||
|
IPropertyPaneDropdownOption
|
||||||
|
} from '@microsoft/sp-webpart-base';
|
||||||
|
import styles from './CalendarTemplate.module.scss';
|
||||||
|
import { escape } from '@microsoft/sp-lodash-subset';
|
||||||
|
|
||||||
|
export interface ISPLists {
|
||||||
|
value: ISPList[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ISPList {
|
||||||
|
Title: string;
|
||||||
|
Id: string;
|
||||||
|
}
|
||||||
|
export default class CalendarTemplate {
|
||||||
|
public static templateHtml: string = `
|
||||||
|
<div class='spfxcalendar'></div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
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">
|
||||||
|
<span class="ms-font-xl ms-fontColor-white">${title}</span>
|
||||||
|
<p class="ms-font-l ms-fontColor-white">Edit this web part to continue</p>
|
||||||
|
<a href="https://aka.ms/spfx" class="${styles.button}">
|
||||||
|
<span class="${styles.label}">View More Modern Web Parts</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
public static themeBase: string = `https://publiccdn.sharepointonline.com/pcpro365.sharepoint.com/163800463de5f9285ad4f6f9cc0a97985b96b057e062d4733849cc0fc90eeffbd6d72bb8/calendar/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 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' }
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
export interface IModernCalendarWebPartProps {
|
||||||
|
description: string;
|
||||||
|
site: string;
|
||||||
|
siteOther: string;
|
||||||
|
other: boolean;
|
||||||
|
listTitle: string;
|
||||||
|
theme: string;
|
||||||
|
start: string;
|
||||||
|
end: string;
|
||||||
|
title: string;
|
||||||
|
detail: string;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,60 @@
|
||||||
|
.helloWorld {
|
||||||
|
.container {
|
||||||
|
max-width: 700px;
|
||||||
|
margin: 0px auto;
|
||||||
|
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.row {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listItem {
|
||||||
|
max-width: 715px;
|
||||||
|
margin: 5px auto 5px auto;
|
||||||
|
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
// Our button
|
||||||
|
text-decoration: none;
|
||||||
|
height: 32px;
|
||||||
|
|
||||||
|
// Primary Button
|
||||||
|
min-width: 80px;
|
||||||
|
background-color: #0078d7;
|
||||||
|
border-color: #0078d7;
|
||||||
|
color: #ffffff;
|
||||||
|
|
||||||
|
// Basic Button
|
||||||
|
outline: transparent;
|
||||||
|
position: relative;
|
||||||
|
font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
border-width: 0;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0 16px;
|
||||||
|
|
||||||
|
.label {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 14px;
|
||||||
|
height: 32px;
|
||||||
|
line-height: 32px;
|
||||||
|
margin: 0 4px;
|
||||||
|
vertical-align: top;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
input[aria-label='hide-col'] {
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#spPropertyPaneContainer input[aria-label='hide-col'] {
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
{
|
||||||
|
"$schema": "../../../node_modules/@microsoft/sp-module-interfaces/lib/manifestSchemas/jsonSchemas/clientSideComponentManifestSchema.json",
|
||||||
|
|
||||||
|
"id": "c2a397d3-8c8f-47ab-b731-897178313c15",
|
||||||
|
"alias": "ModernCalendarWebPart",
|
||||||
|
"componentType": "WebPart",
|
||||||
|
"version": "0.0.1",
|
||||||
|
"manifestVersion": 2,
|
||||||
|
|
||||||
|
"preconfiguredEntries": [{
|
||||||
|
"groupId": "c2a397d3-8c8f-47ab-b731-897178313c15",
|
||||||
|
"group": { "default": "Modern Web Parts" },
|
||||||
|
"title": { "default": "ModernCalendar" },
|
||||||
|
"description": { "default": "SFPx Modern Calendar" },
|
||||||
|
"officeFabricIconFontName": "Calendar",
|
||||||
|
"properties": {
|
||||||
|
"description": "SPFx Modern Calendar",
|
||||||
|
"other": false
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,376 @@
|
||||||
|
import { Version } from '@microsoft/sp-core-library';
|
||||||
|
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
|
||||||
|
} from '@microsoft/sp-http';
|
||||||
|
import {
|
||||||
|
Environment,
|
||||||
|
EnvironmentType
|
||||||
|
} from '@microsoft/sp-core-library';
|
||||||
|
|
||||||
|
export interface ISPLists {
|
||||||
|
value: ISPList[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ISPList {
|
||||||
|
Title: string;
|
||||||
|
Id: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface EventObjects {
|
||||||
|
value: FC.EventObject[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class ModernCalendarWebPart extends BaseClientSideWebPart<IModernCalendarWebPartProps> {
|
||||||
|
|
||||||
|
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');
|
||||||
|
}
|
||||||
|
|
||||||
|
public render(): void {
|
||||||
|
|
||||||
|
if (this.properties.theme != null){
|
||||||
|
SPComponentLoader.loadCss(this.properties.theme);
|
||||||
|
}
|
||||||
|
|
||||||
|
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);
|
||||||
|
} else {
|
||||||
|
this.domElement.innerHTML = CalendarTemplate.templateHtml;
|
||||||
|
this._renderListAsync();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
protected get dataVersion(): Version {
|
||||||
|
return Version.parse('1.0');
|
||||||
|
}
|
||||||
|
|
||||||
|
protected onPropertyPaneConfigurationStart(): void {
|
||||||
|
//Set a default theme
|
||||||
|
|
||||||
|
if (this.properties.theme == null){
|
||||||
|
this.properties.theme = CalendarTemplate.theme()[0].key.toString();
|
||||||
|
}
|
||||||
|
if (this.properties.site){
|
||||||
|
this.listDisabled = false;
|
||||||
|
}
|
||||||
|
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();
|
||||||
|
}
|
||||||
|
|
||||||
|
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' ){
|
||||||
|
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();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else if (propertyPath === 'listTitle' && newValue) {
|
||||||
|
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;
|
||||||
|
private listDisabled: boolean = true;
|
||||||
|
|
||||||
|
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
|
||||||
|
var otherSiteAria = 'hide-col';
|
||||||
|
if (this.properties.other) { otherSiteAria = ''; }
|
||||||
|
return {
|
||||||
|
pages: [
|
||||||
|
{
|
||||||
|
header: {
|
||||||
|
description: strings.PropertyPaneDescription
|
||||||
|
},
|
||||||
|
groups: [
|
||||||
|
{
|
||||||
|
groupName: strings.BasicGroupName,
|
||||||
|
groupFields: [
|
||||||
|
PropertyPaneTextField('description', {
|
||||||
|
label: strings.DescriptionFieldLabel
|
||||||
|
}),
|
||||||
|
PropertyPaneDropdown('theme', {
|
||||||
|
label: 'Theme',
|
||||||
|
options: CalendarTemplate.theme()
|
||||||
|
}),
|
||||||
|
PropertyPaneDropdown('site', {
|
||||||
|
label: 'Site',
|
||||||
|
options: this._siteOptions
|
||||||
|
}),
|
||||||
|
PropertyPaneTextField('siteOther', {
|
||||||
|
label: 'Other Site Url (i.e. https://contoso.sharepoint.com/path)',
|
||||||
|
ariaLabel: otherSiteAria
|
||||||
|
}),
|
||||||
|
PropertyPaneDropdown('listTitle', {
|
||||||
|
label: 'List Title',
|
||||||
|
options: this._dropdownOptions,
|
||||||
|
disabled: this.listDisabled
|
||||||
|
}),
|
||||||
|
PropertyPaneDropdown('start', {
|
||||||
|
label: 'Start Date Field',
|
||||||
|
options: this._columnOptions,
|
||||||
|
disabled: this.colsDisabled
|
||||||
|
}),
|
||||||
|
PropertyPaneDropdown('end', {
|
||||||
|
label: 'End Date Field',
|
||||||
|
options: this._columnOptions,
|
||||||
|
disabled: this.colsDisabled
|
||||||
|
}),
|
||||||
|
PropertyPaneDropdown('title', {
|
||||||
|
label: 'Event Title Field',
|
||||||
|
options: this._columnOptions,
|
||||||
|
disabled: this.colsDisabled
|
||||||
|
}),
|
||||||
|
PropertyPaneDropdown('detail', {
|
||||||
|
label: 'Event Details',
|
||||||
|
options: this._columnOptions,
|
||||||
|
disabled: this.colsDisabled
|
||||||
|
})
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
private _siteOptions: IPropertyPaneDropdownOption[] = [];
|
||||||
|
private _dropdownOptions: IPropertyPaneDropdownOption[] = [];
|
||||||
|
private _columnOptions: IPropertyPaneDropdownOption[] = [];
|
||||||
|
|
||||||
|
public onInit<T>(): Promise<T> {
|
||||||
|
//this._siteOptions.push({key:this.context.pageContext.web.absoluteUrl, text:'This Site'});
|
||||||
|
return Promise.resolve();
|
||||||
|
}
|
||||||
|
|
||||||
|
private _getSiteRootWeb(): Promise<ISPLists> {
|
||||||
|
return this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl + `/_api/Site/RootWeb?$select=Title,Url`, SPHttpClient.configurations.v1)
|
||||||
|
.then((response: Response) => {
|
||||||
|
return response.json();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
private _getSites(rootWebUrl: string): Promise<ISPLists> {
|
||||||
|
return this.context.spHttpClient.get(rootWebUrl + `/_api/web/webs?$select=Title,Url`, SPHttpClient.configurations.v1)
|
||||||
|
.then((response: Response) => {
|
||||||
|
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)
|
||||||
|
.then((response: Response) => {
|
||||||
|
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)
|
||||||
|
.then((response: Response) => {
|
||||||
|
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)
|
||||||
|
.then((response: Response) => {
|
||||||
|
return response.json();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
private _renderList(items: any[]): void {
|
||||||
|
var calItems: FC.EventObject[] = 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:FC.Options = {
|
||||||
|
theme: true,
|
||||||
|
events: calItems,
|
||||||
|
eventClick: function(_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');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
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();
|
||||||
|
})
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
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.");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
define([], function() {
|
||||||
|
return {
|
||||||
|
"PropertyPaneDescription": "Description",
|
||||||
|
"BasicGroupName": "Group Name",
|
||||||
|
"DescriptionFieldLabel": "Description Field"
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
declare interface IModernCalendarStrings {
|
||||||
|
PropertyPaneDescription: string;
|
||||||
|
BasicGroupName: string;
|
||||||
|
DescriptionFieldLabel: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module 'modernCalendarStrings' {
|
||||||
|
const strings: IModernCalendarStrings;
|
||||||
|
export = strings;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
/// <reference types="mocha" />
|
||||||
|
|
||||||
|
import { assert } from 'chai';
|
||||||
|
|
||||||
|
describe('ModernCalendarWebPart', () => {
|
||||||
|
it('should do something', () => {
|
||||||
|
assert.ok(true);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "es5",
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"module": "commonjs",
|
||||||
|
"jsx": "react",
|
||||||
|
"declaration": true,
|
||||||
|
"sourceMap": true,
|
||||||
|
"types": [
|
||||||
|
"es6-promise",
|
||||||
|
"es6-collections",
|
||||||
|
"webpack-env"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
// Type definitions for Microsoft ODSP projects
|
||||||
|
// Project: ODSP
|
||||||
|
|
||||||
|
/* Global definition for UNIT_TEST builds
|
||||||
|
Code that is wrapped inside an if(UNIT_TEST) {...}
|
||||||
|
block will not be included in the final bundle when the
|
||||||
|
--ship flag is specified */
|
||||||
|
declare const UNIT_TEST: boolean;
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
/// <reference path="@ms/odsp.d.ts" />
|
||||||
Loading…
Reference in New Issue