Added the Aggregated Calendar Webpart using React framework (#566)
* Initial Release * Updated Readme * Update Read Me * Updated readme with technolgies
This commit is contained in:
Dhaval Shah
Vesa Juvonen
parent
293bbba17a
commit
ea3b8efe1e
|
|
@ -0,0 +1,25 @@
|
||||||
|
# EditorConfig helps developers define and maintain consistent
|
||||||
|
# coding styles between different editors and IDEs
|
||||||
|
# editorconfig.org
|
||||||
|
|
||||||
|
root = true
|
||||||
|
|
||||||
|
|
||||||
|
[*]
|
||||||
|
|
||||||
|
# change these settings to your own preference
|
||||||
|
indent_style = space
|
||||||
|
indent_size = 2
|
||||||
|
|
||||||
|
# we recommend you to keep these unchanged
|
||||||
|
end_of_line = lf
|
||||||
|
charset = utf-8
|
||||||
|
trim_trailing_whitespace = true
|
||||||
|
insert_final_newline = true
|
||||||
|
|
||||||
|
[*.md]
|
||||||
|
trim_trailing_whitespace = false
|
||||||
|
|
||||||
|
[{package,bower}.json]
|
||||||
|
indent_style = space
|
||||||
|
indent_size = 2
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
|
||||||
|
# Dependency directories
|
||||||
|
node_modules
|
||||||
|
|
||||||
|
# Build generated files
|
||||||
|
dist
|
||||||
|
lib
|
||||||
|
solution
|
||||||
|
temp
|
||||||
|
*.sppkg
|
||||||
|
|
||||||
|
# Coverage directory used by tools like istanbul
|
||||||
|
coverage
|
||||||
|
|
||||||
|
# OSX
|
||||||
|
.DS_Store
|
||||||
|
|
||||||
|
# Visual Studio files
|
||||||
|
.ntvs_analysis.dat
|
||||||
|
.vs
|
||||||
|
bin
|
||||||
|
obj
|
||||||
|
|
||||||
|
# Resx Generated Code
|
||||||
|
*.resx.ts
|
||||||
|
|
||||||
|
# Styles Generated Code
|
||||||
|
*.scss.ts
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
{
|
||||||
|
"@microsoft/generator-sharepoint": {
|
||||||
|
"version": "1.4.1",
|
||||||
|
"libraryName": "react-aggregated-calendar",
|
||||||
|
"libraryId": "e904a5f2-6d72-4ac2-96d8-5679cb4c7384",
|
||||||
|
"environment": "spo"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,100 @@
|
||||||
|
# React Aggregated Calendar Webpart
|
||||||
|
|
||||||
|
## Summary
|
||||||
|
This is a sample webpart developed using React Framework to gather the aggregated events from the multiple calendars from multiple sites using Full Calendar from fullcalendar.io
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
The webpart was designed to create an aggregated view of calendar to fetch events from multiple calendars across the sites and site collection.
|
||||||
|
The webpart will show the event information using the callout functionality of Office UI Fabric
|
||||||
|
|
||||||
|
Webpart is developed using below technologies
|
||||||
|
* React Framework
|
||||||
|
* Full Calendar(fullcalendar.io)
|
||||||
|
* jQuery
|
||||||
|
* Office UI Fabric
|
||||||
|
|
||||||
|
|
||||||
|
## Used SharePoint Framework Version
|
||||||
|
|
||||||
|
|
||||||
|
## Applies to
|
||||||
|
|
||||||
|
* [SharePoint Framework](https:/dev.office.com/sharepoint)
|
||||||
|
* [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Prerequisites
|
||||||
|
|
||||||
|
Before you can use this webpart exmaple, you will need atleast one Out of the Box Calendar created.
|
||||||
|
|
||||||
|
It is required that the users have view access on the calendar.
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
|
||||||
|
Solution|Author(s)
|
||||||
|
--------|---------
|
||||||
|
react-aggregated-calendar | [Dhaval Shah](https://www.linkedin.com/in/dhavalshah27) ([@beingdhavalshah](https://twitter.com/BeingDhavalShah))
|
||||||
|
|
||||||
|
## Version history
|
||||||
|
|
||||||
|
Version|Date|Comments
|
||||||
|
-------|----|--------
|
||||||
|
|
||||||
|
1.0 |July 16, 2018 | 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`
|
||||||
|
|
||||||
|
|
||||||
|
## Features
|
||||||
|
This Web Part displays the events from multiple calendars located in various sites/site collection of sharepoint:
|
||||||
|
|
||||||
|
- Aggregated events for Calendar
|
||||||
|
- Supports Sub-Sites and Site Collection level
|
||||||
|
- Display of Legend for each Calendar
|
||||||
|
- Formatted Date time
|
||||||
|
- Display of Event Details over event click
|
||||||
|
|
||||||
|
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-aggregated-calendar" />
|
||||||
|
|
||||||
|
## React Aggregated Calendar
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### Building the code
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git clone the repo
|
||||||
|
npm i
|
||||||
|
npm i -g gulp
|
||||||
|
gulp
|
||||||
|
```
|
||||||
|
|
||||||
|
This package produces the following:
|
||||||
|
|
||||||
|
* lib/* - intermediate-stage commonjs build artifacts
|
||||||
|
* dist/* - the bundled script, along with other resources
|
||||||
|
* deploy/* - all resources which should be uploaded to a CDN.
|
||||||
|
|
||||||
|
### Build options
|
||||||
|
|
||||||
|
gulp clean
|
||||||
|
gulp test
|
||||||
|
gulp serve
|
||||||
|
gulp bundle
|
||||||
|
gulp package-solution
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 11 MiB |
|
|
@ -0,0 +1,31 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://dev.office.com/json-schemas/spfx-build/config.2.0.schema.json",
|
||||||
|
"version": "2.0",
|
||||||
|
"bundles": {
|
||||||
|
"react-aggregated-calendar-web-part": {
|
||||||
|
"components": [{
|
||||||
|
"entrypoint": "./lib/webparts/reactAggregatedCalendar/ReactAggregatedCalendarWebPart.js",
|
||||||
|
"manifest": "./src/webparts/reactAggregatedCalendar/ReactAggregatedCalendarWebPart.manifest.json"
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"externals": {
|
||||||
|
"sp-client-custom-fields": "node_modules/sp-client-custom-fields/dist/sp-client-custom-fields.bundle.js",
|
||||||
|
"jquery": {
|
||||||
|
"path": "https://code.jquery.com/jquery-1.11.1.min.js",
|
||||||
|
"globalName": "jQuery"
|
||||||
|
},
|
||||||
|
"moment": "https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js",
|
||||||
|
"fullcalendar": {
|
||||||
|
"path": "https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js",
|
||||||
|
"globalName": "jQuery",
|
||||||
|
"globalDependencies": [
|
||||||
|
"jquery"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"localizedResources": {
|
||||||
|
"sp-client-custom-fields/strings": "node_modules/sp-client-custom-fields/lib/loc/{locale}.js",
|
||||||
|
"ReactAggregatedCalendarWebPartStrings": "lib/webparts/reactAggregatedCalendar/loc/{locale}.js"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://dev.office.com/json-schemas/spfx-build/copy-assets.schema.json",
|
||||||
|
"deployCdnPath": "temp/deploy"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://dev.office.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
|
||||||
|
"workingDir": "./temp/deploy/",
|
||||||
|
"account": "<!-- STORAGE ACCOUNT NAME -->",
|
||||||
|
"container": "react-aggregated-calendar",
|
||||||
|
"accessKey": "<!-- ACCESS KEY -->"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://dev.office.com/json-schemas/spfx-build/package-solution.schema.json",
|
||||||
|
"solution": {
|
||||||
|
"name": "react-aggregated-calendar-app",
|
||||||
|
"id": "e904a5f2-6d72-4ac2-96d8-5679cb4c7384",
|
||||||
|
"version": "1.0.0.0",
|
||||||
|
"includeClientSideAssets": true,
|
||||||
|
"skipFeatureDeployment": true
|
||||||
|
},
|
||||||
|
"paths": {
|
||||||
|
"zippedPackage": "solution/react-aggregated-calendar.sppkg"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://dev.office.com/json-schemas/core-build/serve.schema.json",
|
||||||
|
"port": 4321,
|
||||||
|
"https": true,
|
||||||
|
"initialPage": "https://localhost:5432/workbench",
|
||||||
|
"api": {
|
||||||
|
"port": 5432,
|
||||||
|
"entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,38 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://dev.office.com/json-schemas/core-build/tslint.schema.json",
|
||||||
|
|
||||||
|
"displayAsWarning": true,
|
||||||
|
"removeExistingRules": true,
|
||||||
|
"useDefaultConfigAsBase": false,
|
||||||
|
"lintConfig": {
|
||||||
|
"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-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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://dev.office.com/json-schemas/spfx-build/write-manifests.schema.json",
|
||||||
|
"cdnBasePath": "https://sharepointarena.sharepoint.com/sites/SPFX/CDN/react-aggregated-calendar"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const gulp = require('gulp');
|
||||||
|
const build = require('@microsoft/sp-build-web');
|
||||||
|
const path = require('path');
|
||||||
|
const bundleAnalyzer = require('webpack-bundle-analyzer');
|
||||||
|
build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
|
||||||
|
build.configureWebpack.mergeConfig({
|
||||||
|
additionalConfiguration: (generatedConfiguration) => {
|
||||||
|
const lastDirName = path.basename(__dirname);
|
||||||
|
const dropPath = path.join(__dirname, 'temp', 'stats');
|
||||||
|
generatedConfiguration.plugins.push(new bundleAnalyzer.BundleAnalyzerPlugin({
|
||||||
|
openAnalyzer: false,
|
||||||
|
analyzerMode: 'static',
|
||||||
|
reportFilename: path.join(dropPath, `${lastDirName}.stats.html`),
|
||||||
|
generateStatsFile: true,
|
||||||
|
statsFilename: path.join(dropPath, `${lastDirName}.stats.json`),
|
||||||
|
logLevel: 'error'
|
||||||
|
}));
|
||||||
|
|
||||||
|
return generatedConfiguration;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
build.initialize(gulp);
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,38 @@
|
||||||
|
{
|
||||||
|
"name": "react-aggregated-calendar",
|
||||||
|
"version": "0.0.1",
|
||||||
|
"private": true,
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.10.0"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"build": "gulp bundle",
|
||||||
|
"clean": "gulp clean",
|
||||||
|
"test": "gulp test"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@microsoft/sp-core-library": "~1.4.1",
|
||||||
|
"@microsoft/sp-lodash-subset": "~1.4.1",
|
||||||
|
"@microsoft/sp-office-ui-fabric-core": "~1.4.1",
|
||||||
|
"@microsoft/sp-webpart-base": "~1.4.1",
|
||||||
|
"@types/fullcalendar": "^3.8.0",
|
||||||
|
"@types/jquery": "^3.3.2",
|
||||||
|
"@types/react": "15.6.6",
|
||||||
|
"@types/react-dom": "15.5.6",
|
||||||
|
"@types/webpack-env": ">=1.12.1 <1.14.0",
|
||||||
|
"moment": "^2.22.2",
|
||||||
|
"react": "15.6.2",
|
||||||
|
"react-dom": "15.6.2",
|
||||||
|
"sp-client-custom-fields": "^1.3.7"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@microsoft/sp-build-web": "~1.4.1",
|
||||||
|
"@microsoft/sp-module-interfaces": "~1.4.1",
|
||||||
|
"@microsoft/sp-webpart-workbench": "~1.4.1",
|
||||||
|
"@types/chai": ">=3.4.34 <3.6.0",
|
||||||
|
"@types/mocha": ">=2.2.33 <2.6.0",
|
||||||
|
"ajv": "~5.2.2",
|
||||||
|
"gulp": "~3.9.1",
|
||||||
|
"webpack-bundle-analyzer": "^2.13.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,35 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://dev.office.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
|
||||||
|
"id": "be293fec-29f2-4db2-869a-604e560980fa",
|
||||||
|
"alias": "ReactAggregatedCalendarWebPart",
|
||||||
|
"componentType": "WebPart",
|
||||||
|
"version": "*",
|
||||||
|
"manifestVersion": 2,
|
||||||
|
"requiresCustomScript": false,
|
||||||
|
"preconfiguredEntries": [{
|
||||||
|
"groupId": "5c03119e-3074-46fd-976b-c60198311f70",
|
||||||
|
"group": {
|
||||||
|
"default": "Ayka"
|
||||||
|
},
|
||||||
|
"title": {
|
||||||
|
"default": "React Aggreagated Calendar App"
|
||||||
|
},
|
||||||
|
"description": {
|
||||||
|
"default": "React Aggreagated Calendar App developed by Dhaval Shah"
|
||||||
|
},
|
||||||
|
"officeFabricIconFontName": "SearchCalendar",
|
||||||
|
"properties": {
|
||||||
|
"header": "My Calendar",
|
||||||
|
"showWeekends": "Off",
|
||||||
|
"showLegend": true,
|
||||||
|
"dateFormat": "MMMM Do YYYY, h:mm a",
|
||||||
|
"defaultView": "month",
|
||||||
|
"availableViews": [
|
||||||
|
"month",
|
||||||
|
"agendaWeek",
|
||||||
|
"agendaDay",
|
||||||
|
"listMonth"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,181 @@
|
||||||
|
import * as React from 'react';
|
||||||
|
import * as ReactDom from 'react-dom';
|
||||||
|
import { Log, Version } from '@microsoft/sp-core-library';
|
||||||
|
import { BaseClientSideWebPart, IPropertyPaneConfiguration, PropertyPaneTextField, PropertyPaneDropdown, PropertyPaneToggle } from '@microsoft/sp-webpart-base';
|
||||||
|
import { SPComponentLoader } from '@microsoft/sp-loader';
|
||||||
|
import * as strings from 'ReactAggregatedCalendarWebPartStrings';
|
||||||
|
import ReactAggregatedCalendar from './components/ReactAggregatedCalendar';
|
||||||
|
import { IReactAggregatedCalendarProps } from './components/IReactAggregatedCalendarProps';
|
||||||
|
import MessageComponent, { IMessageComponentProps } from '../shared/components/MessageComponent';
|
||||||
|
import { MessageBarType } from 'office-ui-fabric-react/lib/MessageBar';
|
||||||
|
import { PropertyFieldCustomList, CustomListFieldType } from 'sp-client-custom-fields/lib/PropertyFieldCustomList';
|
||||||
|
import { SelectedCalendar } from './model/SelectedCalendar';
|
||||||
|
import { PropertyFieldDropDownSelect } from 'sp-client-custom-fields/lib/PropertyFieldDropDownSelect';
|
||||||
|
import { IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Interface for the Aggregated Calendar Webpart Class Properties
|
||||||
|
*
|
||||||
|
* @export
|
||||||
|
* @interface IReactAggregatedCalendarWebPartProps
|
||||||
|
*/
|
||||||
|
export interface IReactAggregatedCalendarWebPartProps {
|
||||||
|
header: string;
|
||||||
|
calendarList: SelectedCalendar[];
|
||||||
|
dateFormat: string;
|
||||||
|
showLegend: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Aggregated Calendar Webpart Class
|
||||||
|
*
|
||||||
|
* @export
|
||||||
|
* @class ReactAggregatedCalendarWebPart
|
||||||
|
* @extends {BaseClientSideWebPart<IReactAggregatedCalendarWebPartProps>}
|
||||||
|
*/
|
||||||
|
export default class ReactAggregatedCalendarWebPart extends BaseClientSideWebPart<IReactAggregatedCalendarWebPartProps> {
|
||||||
|
private availableViews: IDropdownOption[] = require("../shared/availableViews.json");
|
||||||
|
private timeFormat: IDropdownOption[] = require("../shared/timeFormat.json");
|
||||||
|
protected onInit(): Promise<void> {
|
||||||
|
SPComponentLoader.loadCss('https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.css');
|
||||||
|
return super.onInit();
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* Renders the React Agggregated Calendar Webpart
|
||||||
|
*
|
||||||
|
* @memberof ReactAggregatedCalendarWebPart
|
||||||
|
*/
|
||||||
|
public render(): void {
|
||||||
|
Log.verbose("render()", "Inside Render", this.context.serviceScope);
|
||||||
|
if (this.needsConfiguration()) {
|
||||||
|
Log.warn("render()", "Webpart not configured", this.context.serviceScope);
|
||||||
|
this.renderMessage(strings.WebPartNotConfigured, MessageBarType.error, true);
|
||||||
|
} else {
|
||||||
|
Log.info("render()", "Webpart configuration not needed", this.context.serviceScope);
|
||||||
|
const element: React.ReactElement<IReactAggregatedCalendarProps> = React.createElement(
|
||||||
|
ReactAggregatedCalendar,
|
||||||
|
{
|
||||||
|
header: this.properties.header,
|
||||||
|
selectedCalendarLists: this.properties.calendarList,
|
||||||
|
context: this.context,
|
||||||
|
domElement: this.domElement,
|
||||||
|
dateFormat: this.properties.dateFormat,
|
||||||
|
showLegend: this.properties.showLegend
|
||||||
|
|
||||||
|
}
|
||||||
|
);
|
||||||
|
ReactDom.render(element, this.domElement);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Gets the data Version of the Webpart
|
||||||
|
*
|
||||||
|
* @readonly
|
||||||
|
* @protected
|
||||||
|
* @type {Version}
|
||||||
|
* @memberof ReactAggregatedCalendarWebPart
|
||||||
|
*/
|
||||||
|
protected get dataVersion(): Version {
|
||||||
|
return Version.parse('1.0');
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Initializes the SPFx Property Pane of the Aggregated Calendar Webpart
|
||||||
|
*
|
||||||
|
* @protected
|
||||||
|
* @returns {IPropertyPaneConfiguration}
|
||||||
|
* @memberof ReactAggregatedCalendarWebPart
|
||||||
|
*/
|
||||||
|
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
|
||||||
|
return {
|
||||||
|
pages: [
|
||||||
|
{
|
||||||
|
header: {
|
||||||
|
description: strings.PropertyPaneDescription
|
||||||
|
},
|
||||||
|
groups: [
|
||||||
|
{
|
||||||
|
groupName: strings.BasicGroupName,
|
||||||
|
groupFields: [
|
||||||
|
PropertyPaneTextField('header', {
|
||||||
|
label: strings.HeaderFieldLabel
|
||||||
|
}),
|
||||||
|
PropertyFieldCustomList('calendarList', {
|
||||||
|
label: strings.SelectCalendarLabel,
|
||||||
|
value: this.properties.calendarList,
|
||||||
|
headerText: 'Manage Calendar',
|
||||||
|
fields: [
|
||||||
|
{ id: 'CalendarTitle', title: 'Calendar Title', required: true, type: CustomListFieldType.string },
|
||||||
|
{ id: 'SiteUrl', title: 'Site Url', required: true, type: CustomListFieldType.string },
|
||||||
|
{
|
||||||
|
id: 'CalendarListTitle', title: 'Calendar List Title', required: true,
|
||||||
|
type: CustomListFieldType.string
|
||||||
|
},
|
||||||
|
{ id: 'Color', title: 'Color', required: false, type: CustomListFieldType.color }
|
||||||
|
],
|
||||||
|
disabled: false,
|
||||||
|
onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
|
||||||
|
render: this.render.bind(this),
|
||||||
|
disableReactivePropertyChanges: this.disableReactivePropertyChanges,
|
||||||
|
properties: this.properties,
|
||||||
|
context: this.context,
|
||||||
|
key: 'calendarList'
|
||||||
|
}),
|
||||||
|
PropertyPaneDropdown('dateFormat', {
|
||||||
|
label: strings.SelectDateFormatFieldLabel,
|
||||||
|
selectedKey: "MMMM Do YYYY, h: mm a",
|
||||||
|
options: this.timeFormat
|
||||||
|
}),
|
||||||
|
PropertyPaneToggle('showLegend', {
|
||||||
|
label: strings.ShowLegendFieldLabel,
|
||||||
|
onText: strings.OnTextFieldLabel,
|
||||||
|
offText: strings.OffTextFieldLabel,
|
||||||
|
checked: false
|
||||||
|
})
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check whether Aggregated Calendar needs configuration
|
||||||
|
* or not
|
||||||
|
* @private
|
||||||
|
* @returns {boolean}
|
||||||
|
* @memberof ReactAggregatedCalendarWebPart
|
||||||
|
*/
|
||||||
|
private needsConfiguration(): boolean {
|
||||||
|
Log.verbose("needsConfiguration()", "calendarList : " + this.properties.calendarList, this.context.serviceScope);
|
||||||
|
return this.properties.calendarList === null ||
|
||||||
|
this.properties.calendarList === undefined ||
|
||||||
|
this.properties.calendarList.length === 0;
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* Render Message method to render the message component
|
||||||
|
*
|
||||||
|
* @private
|
||||||
|
* @param {string} statusMessage
|
||||||
|
* @param {MessageBarType} statusMessageType
|
||||||
|
* @param {boolean} display
|
||||||
|
* @memberof ReactAggregatedCalendarWebPart
|
||||||
|
*/
|
||||||
|
private renderMessage(statusMessage: string, statusMessageType: MessageBarType,
|
||||||
|
display: boolean): void {
|
||||||
|
Log.verbose("renderMessage()", "Rendering Message " + statusMessage + " of type " + statusMessageType, this.context.serviceScope);
|
||||||
|
const messageElement: React.ReactElement<IMessageComponentProps> = React.createElement(
|
||||||
|
MessageComponent,
|
||||||
|
{
|
||||||
|
Message: statusMessage,
|
||||||
|
Type: statusMessageType,
|
||||||
|
Display: display
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
ReactDom.render(messageElement, this.domElement);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
import { SelectedCalendar } from "../model/SelectedCalendar";
|
||||||
|
import { WebPartContext } from "@microsoft/sp-webpart-base";
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
*
|
||||||
|
* @export
|
||||||
|
* @interface IReactAggregatedCalendarProps
|
||||||
|
*/
|
||||||
|
export interface IReactAggregatedCalendarProps {
|
||||||
|
header: string;
|
||||||
|
selectedCalendarLists: SelectedCalendar[];
|
||||||
|
context: WebPartContext;
|
||||||
|
domElement: HTMLElement;
|
||||||
|
dateFormat: string;
|
||||||
|
showLegend: boolean;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,146 @@
|
||||||
|
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
|
||||||
|
@import '~office-ui-fabric-react/dist/sass/_References.scss';
|
||||||
|
@import '~office-ui-fabric-react/dist/sass/Fabric.scss';
|
||||||
|
.closeIconFocus:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calloutInnerEventContent {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.msCalloutclose {
|
||||||
|
margin: 0;
|
||||||
|
border: 0;
|
||||||
|
background: none;
|
||||||
|
cursor: pointer;
|
||||||
|
position: absolute;
|
||||||
|
top: 12px;
|
||||||
|
right: 12px;
|
||||||
|
padding: 8px;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
font-size: $ms-font-size-m;
|
||||||
|
color: $ms-color-neutralSecondary;
|
||||||
|
//z-index: ($ms-zIndex-Callout + $ms-zIndex-front);
|
||||||
|
}
|
||||||
|
|
||||||
|
.msCalloutheader {
|
||||||
|
//z-index: ($ms-zIndex-Callout + $ms-zIndex-middle);
|
||||||
|
padding: 18px 24px 12px;
|
||||||
|
background-color: "[theme: inputBackgroundCheckedHovered, default: #0078d7]" !important ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.msCallouttitle {
|
||||||
|
margin: 0; //font-family: $ms-font-family-semilight;
|
||||||
|
//font-size: $ms-font-size-xl;
|
||||||
|
}
|
||||||
|
|
||||||
|
.msCalloutinner {
|
||||||
|
height: 100%;
|
||||||
|
padding: 0 24px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.msCalloutsubText {
|
||||||
|
margin: 0; //font-family: $ms-font-family-semilight;
|
||||||
|
color: $ms-color-neutralPrimary;
|
||||||
|
font-size: $ms-font-size-s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reactAggregatedCalendar {
|
||||||
|
.legend {
|
||||||
|
border: solid 1px #eee;
|
||||||
|
font-size: 14px;
|
||||||
|
text-align: right;
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
.outerLegendDiv {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 5px 20px 5px 5px;
|
||||||
|
line-height: 15px;
|
||||||
|
max-width: 300px;
|
||||||
|
cursor: pointer;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
.innerLegendDiv {
|
||||||
|
border: 1px solid gray;
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
font-size: 1px;
|
||||||
|
position: relative;
|
||||||
|
float: left;
|
||||||
|
margin-right: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.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 {
|
||||||
|
@include ms-Grid-row;
|
||||||
|
|
||||||
|
// background-color: $ms-color-themeDark;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column {
|
||||||
|
@include ms-Grid-col;
|
||||||
|
@include ms-lg12;
|
||||||
|
@include ms-xl12;
|
||||||
|
@include ms-xlPush2;
|
||||||
|
@include ms-lgPush1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
@include ms-font-xl;
|
||||||
|
@include ms-fontColor-white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subTitle {
|
||||||
|
@include ms-font-l;
|
||||||
|
@include ms-fontColor-white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
@include ms-font-l;
|
||||||
|
@include ms-fontColor-white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
// Our button
|
||||||
|
text-decoration: none;
|
||||||
|
height: 32px;
|
||||||
|
|
||||||
|
// Primary Button
|
||||||
|
min-width: 80px;
|
||||||
|
background-color: $ms-color-themePrimary;
|
||||||
|
border-color: $ms-color-themePrimary;
|
||||||
|
color: $ms-color-white;
|
||||||
|
|
||||||
|
// 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: $ms-font-size-m;
|
||||||
|
font-weight: $ms-font-weight-regular;
|
||||||
|
border-width: 0;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0 16px;
|
||||||
|
|
||||||
|
.label {
|
||||||
|
font-weight: $ms-font-weight-semibold;
|
||||||
|
font-size: $ms-font-size-m;
|
||||||
|
height: 32px;
|
||||||
|
line-height: 32px;
|
||||||
|
margin: 0 4px;
|
||||||
|
vertical-align: top;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,277 @@
|
||||||
|
import * as React from 'react';
|
||||||
|
import * as $ from 'jquery';
|
||||||
|
import * as moment from 'moment';
|
||||||
|
import 'fullcalendar';
|
||||||
|
import styles from './ReactAggregatedCalendar.module.scss';
|
||||||
|
import { IReactAggregatedCalendarProps } from './IReactAggregatedCalendarProps';
|
||||||
|
import { EnvironmentType, Environment } from '@microsoft/sp-core-library';
|
||||||
|
import { AggregatedCalendarService } from '../service/AggregatedCalendarService';
|
||||||
|
import { AggregatedCalendarMockService } from '../service/AggregatedCalendarMockService';
|
||||||
|
import { css } from 'office-ui-fabric-react/lib/Utilities';
|
||||||
|
import * as strings from 'ReactAggregatedCalendarWebPartStrings';
|
||||||
|
import { FullCalendarEvent } from '../model/FullCalendarEvent';
|
||||||
|
import { DirectionalHint, Callout } from 'office-ui-fabric-react/lib/Callout';
|
||||||
|
import { Label } from 'office-ui-fabric-react/lib/Label';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Interface for maintaining ReactAggregatedCalendar webpart state
|
||||||
|
*
|
||||||
|
* @export
|
||||||
|
* @interface IReactAggregatedCalendarState
|
||||||
|
*/
|
||||||
|
export interface IReactAggregatedCalendarState {
|
||||||
|
isCalloutVisible?: boolean;
|
||||||
|
selectedEvent: FullCalendarEvent;
|
||||||
|
directionalHint?: DirectionalHint;
|
||||||
|
isBeakVisible?: boolean;
|
||||||
|
gapSpace?: number;
|
||||||
|
beakWidth?: number;
|
||||||
|
EventElement: HTMLElement;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* React Component for ReactAggregatedCalendar Webpart
|
||||||
|
*
|
||||||
|
* @export
|
||||||
|
* @class ReactAggregatedCalendar
|
||||||
|
* @extends {React.Component<IReactAggregatedCalendarProps, IReactAggregatedCalendarState>}
|
||||||
|
*/
|
||||||
|
export default class ReactAggregatedCalendar
|
||||||
|
extends React.Component<IReactAggregatedCalendarProps, IReactAggregatedCalendarState> {
|
||||||
|
|
||||||
|
/**
|
||||||
|
*Creates an instance of ReactAggregatedCalendar.
|
||||||
|
* @param {IReactAggregatedCalendarProps} props
|
||||||
|
* @memberof ReactAggregatedCalendar
|
||||||
|
*/
|
||||||
|
public constructor(props: IReactAggregatedCalendarProps) {
|
||||||
|
super(props);
|
||||||
|
|
||||||
|
this.onCalloutDismiss = this.onCalloutDismiss.bind(this);
|
||||||
|
this.eventClickHandler = this.eventClickHandler.bind(this);
|
||||||
|
|
||||||
|
// Initialize the State for ReactAggregatedCalendar
|
||||||
|
this.state = {
|
||||||
|
isCalloutVisible: false,
|
||||||
|
selectedEvent: {
|
||||||
|
id: 0,
|
||||||
|
title: '',
|
||||||
|
color: '',
|
||||||
|
start: moment(),
|
||||||
|
end: moment(),
|
||||||
|
description: '',
|
||||||
|
location: '',
|
||||||
|
allDay: false,
|
||||||
|
category: ''
|
||||||
|
},
|
||||||
|
directionalHint: DirectionalHint.bottomCenter,
|
||||||
|
isBeakVisible: true,
|
||||||
|
gapSpace: 10,
|
||||||
|
beakWidth: 20,
|
||||||
|
EventElement: null
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* componentDidMount
|
||||||
|
*
|
||||||
|
* @memberof ReactAggregatedCalendar
|
||||||
|
*/
|
||||||
|
public componentDidMount() {
|
||||||
|
this.renderContents();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* componentDidUpdate
|
||||||
|
*
|
||||||
|
* @memberof ReactAggregatedCalendar
|
||||||
|
*/
|
||||||
|
public componentDidUpdate() {
|
||||||
|
this.renderContents();
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* Render method for the ReactAggregatedCalendar React Component
|
||||||
|
*
|
||||||
|
* @returns {React.ReactElement<IReactAggregatedCalendarProps>}
|
||||||
|
* @memberof ReactAggregatedCalendar
|
||||||
|
*/
|
||||||
|
public render(): React.ReactElement<IReactAggregatedCalendarProps> {
|
||||||
|
const { isCalloutVisible } = this.state;
|
||||||
|
let calendarLegend: JSX.Element[] = ([]);
|
||||||
|
|
||||||
|
// Render the Legend for the Calendar Events
|
||||||
|
calendarLegend = this.props.selectedCalendarLists.map((calendar) => {
|
||||||
|
let calendarLegendColor = {
|
||||||
|
'background-color': `${calendar.Color}`
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<div className={styles.outerLegendDiv} title={calendar.CalendarTitle}>
|
||||||
|
<div className={styles.innerLegendDiv} style={calendarLegendColor}>
|
||||||
|
</div>
|
||||||
|
{calendar.CalendarTitle}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Render the FullCalendar container
|
||||||
|
return (
|
||||||
|
<div className={styles.reactAggregatedCalendar}>
|
||||||
|
<h1>{this.props.header}</h1>
|
||||||
|
<div >
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<div id="aggregatedCalendarComp">
|
||||||
|
</div>
|
||||||
|
{
|
||||||
|
this.props.showLegend &&
|
||||||
|
<div className={styles.legend}>
|
||||||
|
{calendarLegend}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{isCalloutVisible && (
|
||||||
|
<Callout
|
||||||
|
className="ms-CalloutExample"
|
||||||
|
ariaLabelledBy={'callout-label-1'}
|
||||||
|
ariaDescribedBy={'callout-description-1'}
|
||||||
|
role={'alertdialog'}
|
||||||
|
target={this.state.EventElement}
|
||||||
|
onDismiss={this.onCalloutDismiss}
|
||||||
|
gapSpace={this.state.gapSpace}
|
||||||
|
isBeakVisible={this.state.isBeakVisible}
|
||||||
|
beakWidth={this.state.beakWidth}
|
||||||
|
directionalHint={this.state.directionalHint}
|
||||||
|
setInitialFocus={true}>
|
||||||
|
<button onClick={this.onCalloutDismiss}
|
||||||
|
className={css(styles.msCalloutclose, styles.closeIconFocus, 'ms-fontColor-white')} >
|
||||||
|
<i className="ms-Icon ms-Icon--Clear"></i>
|
||||||
|
</button>
|
||||||
|
<div className={css(styles.msCalloutheader, 'ms-fontColor-white')}>
|
||||||
|
<p className={styles.msCallouttitle}>{this.state.selectedEvent.title}</p>
|
||||||
|
</div>
|
||||||
|
<div className={css(styles.msCalloutinner, styles.calloutInnerEventContent)}>
|
||||||
|
<div className="ms-Callout-content">
|
||||||
|
<p className={styles.msCalloutsubText} dangerouslySetInnerHTML={this.createMarkup(this.state.selectedEvent.description)} />
|
||||||
|
<p className={styles.msCalloutsubText}>
|
||||||
|
<Label>{strings.StartTimeLabel}{this.state.selectedEvent.start.format(this.props.dateFormat)} </Label>
|
||||||
|
{
|
||||||
|
this.state.selectedEvent.end !== null &&
|
||||||
|
<Label>{strings.EndTimeLabel} {this.state.selectedEvent.end.format(this.props.dateFormat)}</Label>
|
||||||
|
}
|
||||||
|
{
|
||||||
|
this.state.selectedEvent.location !== '' &&
|
||||||
|
<Label>{strings.LocationLabel}{this.state.selectedEvent.location}</Label>
|
||||||
|
}
|
||||||
|
{
|
||||||
|
this.state.selectedEvent.category !== '' &&
|
||||||
|
<Label>{strings.CategoryLabel}{this.state.selectedEvent.category}</Label>
|
||||||
|
}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Callout>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Render the Full Calendar Plugin
|
||||||
|
*
|
||||||
|
* @private
|
||||||
|
* @memberof ReactAggregatedCalendar
|
||||||
|
*/
|
||||||
|
private renderContents() {
|
||||||
|
let containerEl: JQuery = $('#aggregatedCalendarComp');
|
||||||
|
let eventSourcesArray: any[] = [];
|
||||||
|
const dataService = (Environment.type === EnvironmentType.Test
|
||||||
|
|| Environment.type === EnvironmentType.Local) ? new AggregatedCalendarMockService() :
|
||||||
|
this.props.context.serviceScope.consume(AggregatedCalendarService.serviceKey);
|
||||||
|
console.log(this.props.selectedCalendarLists);
|
||||||
|
this.props.selectedCalendarLists.forEach((calendarData) => {
|
||||||
|
const calendarRestApi: string = calendarData.SiteUrl.trim()
|
||||||
|
+ '/_api/Web/Lists/GetByTitle(\'' + calendarData.CalendarListTitle.trim() + '\')/items';
|
||||||
|
|
||||||
|
eventSourcesArray.push({
|
||||||
|
events: ((start: moment.Moment, end: moment.Moment, timezone, callback) => {
|
||||||
|
const startDate = start.format('YYYY-MM-DD');
|
||||||
|
const endDate = end.format('YYYY-MM-DD');
|
||||||
|
dataService.getEventsForCalendar(calendarRestApi, calendarData.Color, startDate, endDate)
|
||||||
|
.then((response: FullCalendarEvent[]) => {
|
||||||
|
callback(response);
|
||||||
|
});
|
||||||
|
})
|
||||||
|
});
|
||||||
|
});
|
||||||
|
containerEl.fullCalendar({
|
||||||
|
timezone: 'local',
|
||||||
|
header: {
|
||||||
|
left: 'prev,next today',
|
||||||
|
center: 'title'
|
||||||
|
},
|
||||||
|
defaultDate: new Date(),
|
||||||
|
navLinks: true,
|
||||||
|
editable: true,
|
||||||
|
eventLimit: true,
|
||||||
|
eventSources: eventSourcesArray,
|
||||||
|
eventClick: this.eventClickHandler
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Click Event handler when the event is clicked on the Calendar
|
||||||
|
* Display the Callout function to display event details
|
||||||
|
* @private
|
||||||
|
* @param {*} eventObj
|
||||||
|
* @param {*} jsEvent
|
||||||
|
* @param {*} view
|
||||||
|
* @memberof ReactAggregatedCalendar
|
||||||
|
*/
|
||||||
|
private eventClickHandler(eventObj: any, jsEvent: any, view: any) {
|
||||||
|
|
||||||
|
this.setState(() => {
|
||||||
|
return {
|
||||||
|
isCalloutVisible: !this.state.isCalloutVisible,
|
||||||
|
selectedEvent: {
|
||||||
|
id: eventObj.id,
|
||||||
|
title: eventObj.title,
|
||||||
|
color: eventObj.color,
|
||||||
|
start: moment(eventObj.start),
|
||||||
|
end: moment(eventObj.end),
|
||||||
|
description: eventObj.description,
|
||||||
|
location: eventObj.location,
|
||||||
|
allDay: eventObj.allDay,
|
||||||
|
category: eventObj.category
|
||||||
|
},
|
||||||
|
EventElement: jsEvent.toElement
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Hide the call out component on close
|
||||||
|
*
|
||||||
|
* @private
|
||||||
|
* @memberof ReactAggregatedCalendar
|
||||||
|
*/
|
||||||
|
private onCalloutDismiss() {
|
||||||
|
this.setState({
|
||||||
|
isCalloutVisible: false
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Create markup for rendering HTML on react component
|
||||||
|
*
|
||||||
|
* @private
|
||||||
|
* @returns
|
||||||
|
* @memberof ReactAggregatedCalendar
|
||||||
|
*/
|
||||||
|
private createMarkup(description: string) {
|
||||||
|
return { __html: description };
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
22
samples/react-aggregated-calendar/src/webparts/reactAggregatedCalendar/loc/en-us.js
vendored
Normal file
22
samples/react-aggregated-calendar/src/webparts/reactAggregatedCalendar/loc/en-us.js
vendored
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
define([], function () {
|
||||||
|
return {
|
||||||
|
"PropertyPaneDescription": "React Aggregated Calendar View App",
|
||||||
|
"BasicGroupName": "Dynamic Properties",
|
||||||
|
"DescriptionFieldLabel": "Description Field",
|
||||||
|
"SelectCalendarLabel": "Add Calendars",
|
||||||
|
"HeaderFieldLabel": "App Header Value",
|
||||||
|
"WebPartNotConfigured": "Webpart is not configured. Please configure webpart by Editing the page.",
|
||||||
|
"StartTimeLabel": "Start Time : ",
|
||||||
|
"EndTimeLabel": "End Time : ",
|
||||||
|
"LocationLabel": "Location : ",
|
||||||
|
"CategoryLabel": "Category : ",
|
||||||
|
"SelectDateFormatFieldLabel": "Select Date & Time Format",
|
||||||
|
"ShowWeekendsFieldLabel": "Show Weekends",
|
||||||
|
"OnTextFieldLabel": "On",
|
||||||
|
"OffTextFieldLabel": "Off",
|
||||||
|
"DefautlViewFieldLabel": "Default Calendar View",
|
||||||
|
"ShowLegendFieldLabel": "Show Legend",
|
||||||
|
"AvailableViewFieldLabel": "Select Available Views",
|
||||||
|
"HeightFieldLabel":"Enter Calendar Height"
|
||||||
|
}
|
||||||
|
});
|
||||||
25
samples/react-aggregated-calendar/src/webparts/reactAggregatedCalendar/loc/mystrings.d.ts
vendored
Normal file
25
samples/react-aggregated-calendar/src/webparts/reactAggregatedCalendar/loc/mystrings.d.ts
vendored
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
declare interface IReactAggregatedCalendarWebPartStrings {
|
||||||
|
PropertyPaneDescription: string;
|
||||||
|
BasicGroupName: string;
|
||||||
|
DescriptionFieldLabel: string;
|
||||||
|
SelectDateFormatFieldLabel: string;
|
||||||
|
ShowWeekendsFieldLabel: string;
|
||||||
|
WebPartNotConfigured: string;
|
||||||
|
SelectCalendarLabel: string;
|
||||||
|
HeaderFieldLabel: string;
|
||||||
|
StartTimeLabel: string;
|
||||||
|
EndTimeLabel: string;
|
||||||
|
LocationLabel: string;
|
||||||
|
CategoryLabel: string;
|
||||||
|
OnTextFieldLabel: string;
|
||||||
|
OffTextFieldLabel: string;
|
||||||
|
DefautlViewFieldLabel: string;
|
||||||
|
ShowLegendFieldLabel: string;
|
||||||
|
AvailableViewFieldLabel: string;
|
||||||
|
HeightFieldLabel: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module 'ReactAggregatedCalendarWebPartStrings' {
|
||||||
|
const strings: IReactAggregatedCalendarWebPartStrings;
|
||||||
|
export = strings;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
import * as moment from 'moment';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Interface for FullCalendarEvent
|
||||||
|
*
|
||||||
|
* @export
|
||||||
|
* @interface FullCalendarEvent
|
||||||
|
*/
|
||||||
|
export interface FullCalendarEvent {
|
||||||
|
id: number;
|
||||||
|
title: string;
|
||||||
|
start: moment.Moment;
|
||||||
|
end: moment.Moment;
|
||||||
|
color: string;
|
||||||
|
allDay: boolean;
|
||||||
|
description: string;
|
||||||
|
location: string;
|
||||||
|
category: string;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
/**
|
||||||
|
* Interface for SPCalendarItemsValue
|
||||||
|
*
|
||||||
|
* @export
|
||||||
|
* @interface SPCalendarItemsValue
|
||||||
|
*/
|
||||||
|
export interface SPCalendarItemsValue {
|
||||||
|
Id: number;
|
||||||
|
Title: string;
|
||||||
|
Location?: any;
|
||||||
|
EventDate: Date;
|
||||||
|
EndDate: Date;
|
||||||
|
Description?: any;
|
||||||
|
fAllDayEvent?: boolean;
|
||||||
|
Category?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Interface for SPCalendarItems
|
||||||
|
*
|
||||||
|
* @export
|
||||||
|
* @interface SPCalendarItems
|
||||||
|
*/
|
||||||
|
export interface SPCalendarItems {
|
||||||
|
value: SPCalendarItemsValue[];
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
/**
|
||||||
|
* Interface for SelectedCalendar
|
||||||
|
*
|
||||||
|
* @export
|
||||||
|
* @interface SelectedCalendar
|
||||||
|
*/
|
||||||
|
export interface SelectedCalendar {
|
||||||
|
CalendarTitle: string;
|
||||||
|
SiteUrl: string;
|
||||||
|
CalendarListTitle: string;
|
||||||
|
Color: string;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,79 @@
|
||||||
|
import { IAggregatedCalendarService } from './IAggregatedCalendarService';
|
||||||
|
import { SelectedCalendar } from '../model/SelectedCalendar';
|
||||||
|
import { FullCalendarEvent } from '../model/FullCalendarEvent';
|
||||||
|
import * as moment from 'moment';
|
||||||
|
/**
|
||||||
|
* Mock Service for AggregatedCalendarService
|
||||||
|
*
|
||||||
|
* @export
|
||||||
|
* @class AggregatedCalendarMockService
|
||||||
|
* @implements {IAggregatedCalendarService}
|
||||||
|
*/
|
||||||
|
export class AggregatedCalendarMockService implements IAggregatedCalendarService {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns the mock data for the calendar events
|
||||||
|
*
|
||||||
|
* @param {string} calendarRestApi
|
||||||
|
* @param {string} calendarColor
|
||||||
|
* @param {string} startDate
|
||||||
|
* @param {string} endDate
|
||||||
|
* @returns {Promise<FullCalendarEvent[]>}
|
||||||
|
* @memberof AggregatedCalendarMockService
|
||||||
|
*/
|
||||||
|
public getEventsForCalendar(calendarRestApi: string, calendarColor: string, startDate: string,
|
||||||
|
endDate: string):
|
||||||
|
Promise<FullCalendarEvent[]> {
|
||||||
|
return new Promise<FullCalendarEvent[]>((resolve, reject) => {
|
||||||
|
let calendarLists: FullCalendarEvent[] = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
title: "Lunch",
|
||||||
|
start: moment().add(1, 'days'),
|
||||||
|
end: moment().add(1, 'days').add(1, "h"),
|
||||||
|
color: "blue",
|
||||||
|
allDay: false,
|
||||||
|
description: "",
|
||||||
|
location: "18223 Kilmacolm Drive, Richmond, TX 77407",
|
||||||
|
category: "Get-together"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
title: "Lunch & Learn",
|
||||||
|
start: moment(),
|
||||||
|
end: moment().add(1, "h"),
|
||||||
|
color: "blue",
|
||||||
|
allDay: false,
|
||||||
|
description: "<p>Lunch & Learn Session</p>\r\n",
|
||||||
|
location: "Microsoft Store, 5015 Westheimer Rd Ste A2421, Houston, TX, United States",
|
||||||
|
category: "Meeting"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
title: "Town Hall",
|
||||||
|
start: moment("2018-07-08T21:30:00.000Z"),
|
||||||
|
end: moment("2018-07-08T22:30:00.000Z"),
|
||||||
|
color: "red",
|
||||||
|
allDay: false,
|
||||||
|
description: "",
|
||||||
|
location: "Deer Park, Texas, United States",
|
||||||
|
category: ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
title: "Team Outing",
|
||||||
|
start: moment("2018-07-12T00:00:00.000Z"),
|
||||||
|
end: moment("2018-07-12T23:59:00.000Z"),
|
||||||
|
color: "red",
|
||||||
|
allDay: false,
|
||||||
|
description: "",
|
||||||
|
location: "Seaworld San Antonio, San Antonio, Texas, United States",
|
||||||
|
category: ""
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
resolve(calendarLists);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,82 @@
|
||||||
|
import { IAggregatedCalendarService } from './IAggregatedCalendarService';
|
||||||
|
import { SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';
|
||||||
|
import { ServiceKey, ServiceScope, Log } from '@microsoft/sp-core-library';
|
||||||
|
import { PageContext } from '@microsoft/sp-page-context';
|
||||||
|
import * as moment from 'moment';
|
||||||
|
import { SPCalendarItems } from '../model/SPCalendarItems';
|
||||||
|
import { FullCalendarEvent } from '../model/FullCalendarEvent';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Aggregated Calendar Service for teh Aggregated Calendar Webpart to get the Calendar Events
|
||||||
|
*
|
||||||
|
* @export
|
||||||
|
* @class AggregatedCalendarService
|
||||||
|
* @implements {IAggregatedCalendarService}
|
||||||
|
*/
|
||||||
|
export class AggregatedCalendarService implements IAggregatedCalendarService {
|
||||||
|
public static readonly serviceKey: ServiceKey<IAggregatedCalendarService>
|
||||||
|
= ServiceKey.create<IAggregatedCalendarService>('ayka:IAggregatedCalendarService', AggregatedCalendarService);
|
||||||
|
private _spHttpClient: SPHttpClient;
|
||||||
|
private _serviceScope: ServiceScope;
|
||||||
|
/**
|
||||||
|
*Creates an instance of AggregatedCalendarService.
|
||||||
|
* @param {ServiceScope} serviceScope
|
||||||
|
* @memberof AggregatedCalendarService
|
||||||
|
*/
|
||||||
|
constructor(serviceScope: ServiceScope) {
|
||||||
|
serviceScope.whenFinished(() => {
|
||||||
|
this._spHttpClient = serviceScope.consume(SPHttpClient.serviceKey);
|
||||||
|
this._serviceScope = serviceScope;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Gets the Events from the SharePoint Calendar between startDate and endDate
|
||||||
|
*
|
||||||
|
* @param {string} calendarRestApi
|
||||||
|
* @param {string} calendarColor
|
||||||
|
* @param {string} startDate
|
||||||
|
* @param {string} endDate
|
||||||
|
* @returns {Promise<any[]>}
|
||||||
|
* @memberof AggregatedCalendarService
|
||||||
|
*/
|
||||||
|
public getEventsForCalendar(calendarRestApi: string, calendarColor: string, startDate: string, endDate: string): Promise<any[]> {
|
||||||
|
return new Promise<FullCalendarEvent[]>((resolve, reject) => {
|
||||||
|
let _webRestApi: string = calendarRestApi +
|
||||||
|
'?$Select=Title,EventDate,EndDate,Location,Description,Category,fAllDayEvent&$filter=((EventDate ge \''
|
||||||
|
+ startDate + '\' and EventDate le \'' + endDate + '\'))';
|
||||||
|
Log.info("getEventsForCalendar()", "REST API : " + calendarRestApi, this._serviceScope);
|
||||||
|
this._spHttpClient.get(_webRestApi, SPHttpClient.configurations.v1)
|
||||||
|
.then((response: SPHttpClientResponse) => {
|
||||||
|
response.json().then((spEvents: SPCalendarItems) => {
|
||||||
|
Log.verbose("getEventsForCalendar()", JSON.stringify(spEvents), this._serviceScope);
|
||||||
|
let fullCalendarEvents: FullCalendarEvent[] = [];
|
||||||
|
|
||||||
|
// Convert the SharePoint Events into compatible Full Calendar Events
|
||||||
|
spEvents.value.forEach((spEvent) => {
|
||||||
|
|
||||||
|
fullCalendarEvents.push({
|
||||||
|
id: spEvent.Id,
|
||||||
|
title: spEvent.Title,
|
||||||
|
start: moment(spEvent.EventDate),
|
||||||
|
end: moment(spEvent.EndDate),
|
||||||
|
color: calendarColor,
|
||||||
|
allDay: spEvent.fAllDayEvent,
|
||||||
|
description: spEvent.Description || '',
|
||||||
|
location: spEvent.Location || '',
|
||||||
|
category: spEvent.Category || ''
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
Log.info("getEventsForCalendar()", "Returning Full Calendar Events ", this._serviceScope);
|
||||||
|
Log.verbose("getEventsForCalendar()", JSON.stringify(fullCalendarEvents), this._serviceScope);
|
||||||
|
resolve(fullCalendarEvents);
|
||||||
|
}).catch((error) => {
|
||||||
|
Log.error("getEventsForCalendar()", new Error("Error Fetching events from Calendar"), this._serviceScope);
|
||||||
|
reject(error);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
import { FullCalendarEvent } from "../model/FullCalendarEvent";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Interface Service for the AggregatedCalendarService
|
||||||
|
*
|
||||||
|
* @export
|
||||||
|
* @interface IAggregatedCalendarService
|
||||||
|
*/
|
||||||
|
export interface IAggregatedCalendarService {
|
||||||
|
getEventsForCalendar(calendarRestApi: string, calendarColor: string,
|
||||||
|
startDate: string, endDate: string): Promise<FullCalendarEvent[]>;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
[{
|
||||||
|
"key": "month",
|
||||||
|
"text": "Month"
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"key": "agendaWeek",
|
||||||
|
"text": "Weekly"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"key": "agendaDay",
|
||||||
|
"text": "Daily"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"key": "listMonth",
|
||||||
|
"text": "Monthly List"
|
||||||
|
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
@ -0,0 +1,60 @@
|
||||||
|
import * as React from 'react';
|
||||||
|
import { MessageBar, MessageBarType } from 'office-ui-fabric-react/lib/MessageBar';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Interface to implement the MessageComponent Webpart
|
||||||
|
*
|
||||||
|
* @export
|
||||||
|
* @interface IMessageComponentProps
|
||||||
|
*/
|
||||||
|
export interface IMessageComponentProps {
|
||||||
|
Message: string;
|
||||||
|
Type: MessageBarType;
|
||||||
|
Display: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* React MessageComponent for displaying the messages
|
||||||
|
*
|
||||||
|
* @export
|
||||||
|
* @class MessageComponent
|
||||||
|
* @extends {React.Component<IMessageComponentProps, any>}
|
||||||
|
*/
|
||||||
|
export default class MessageComponent extends React.Component<IMessageComponentProps, any> {
|
||||||
|
|
||||||
|
/**
|
||||||
|
*Creates an instance of MessageComponent.
|
||||||
|
* @param {IMessageComponentProps} props
|
||||||
|
* @memberof MessageComponent
|
||||||
|
*/
|
||||||
|
public constructor(props: IMessageComponentProps) {
|
||||||
|
super(props);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Render method of the Message Component
|
||||||
|
*
|
||||||
|
* @returns {React.ReactElement<IMessageComponentProps>}
|
||||||
|
* @memberof MessageComponent
|
||||||
|
*/
|
||||||
|
public render(): React.ReactElement<IMessageComponentProps> {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={`ms-Grid-row`}>
|
||||||
|
<div className={`ms-Grid-col ms-sm12`}>
|
||||||
|
{
|
||||||
|
this.props.Display &&
|
||||||
|
<div>
|
||||||
|
<MessageBar
|
||||||
|
messageBarType={MessageBarType.error}
|
||||||
|
isMultiline={false}
|
||||||
|
dismissButtonAriaLabel="Close">
|
||||||
|
{this.props.Message}
|
||||||
|
</MessageBar>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,28 @@
|
||||||
|
[{
|
||||||
|
"key": "MMMM Do YYYY, h:mm a",
|
||||||
|
"text": "MMMM Do YYYY, h:mm a"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"key": "ddd MMM Do HH:mm YYYY",
|
||||||
|
"text": "ddd MMM Do HH:mm YYYY"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"key": "dddd, MMMM Do YYYY, h:mm:ss a",
|
||||||
|
"text": "dddd, MMMM Do YYYY, h:mm:ss a"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"key": "dddd, DD MMMM YYYY [at] hh:mm:ss A",
|
||||||
|
"text": "dddd, DD MMMM YYYY [at] hh:mm:ss A"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"key": "MM/d/YYYY HH:mm:ss",
|
||||||
|
"text": "MM/d/YYYYY HH:mm:ss"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"key": "d/M/YYYY HH:mm:ss",
|
||||||
|
"text": "d/M/YYYYY HH:mm:ss"
|
||||||
|
}, {
|
||||||
|
"key": "dddd, MMMM Do, YYYY, h:mm:ss",
|
||||||
|
"text": "dddd, MMMM Do, YYYY, h:mm:ss"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "es5",
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"module": "commonjs",
|
||||||
|
"jsx": "react",
|
||||||
|
"declaration": true,
|
||||||
|
"sourceMap": true,
|
||||||
|
"experimentalDecorators": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"typeRoots": [
|
||||||
|
"./node_modules/@types",
|
||||||
|
"./node_modules/@microsoft"
|
||||||
|
],
|
||||||
|
"types": [
|
||||||
|
"es6-promise",
|
||||||
|
"webpack-env"
|
||||||
|
],
|
||||||
|
"lib": [
|
||||||
|
"es5",
|
||||||
|
"dom",
|
||||||
|
"es2015.collection"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue