+
+ {strings.CancelButtonLabel}
+
+ {
+ this.props.panelMode == IPanelModelEnum.edit && this.state.userPermissions.hasPermissionDelete && (
+
+ {strings.DeleteButtonLabel}
+
+ )
+ }
+ {
+ (this.state.userPermissions.hasPermissionAdd || this.state.userPermissions.hasPermissionEdit) &&
+
+ {strings.SaveButtonLabel}
+
+
+ }
+ {
+ this.state.isSaving &&
+
+ );
+ }
+
+ /**
+ *
+ * @private
+ * @param {Date} newDate
+ * @memberof Event
+ */
+ private onSelectDateStart(newDate: Date) {
+ this.setState({ startDate: newDate });
+ }
+
+ /**
+ * @private
+ * @param {Date} newDate
+ * @memberof Event
+ */
+ private onSelectDateEnd(newDate: Date) {
+ this.setState({ endDate: newDate });
+ }
+
+
+ private onAllDayEventChange(ev: React.MouseEvent
+
+
+
+ );
+ }
+}
diff --git a/samples/react-calendar/src/index.ts b/samples/react-calendar/src/index.ts
new file mode 100644
index 000000000..fb81db1e2
--- /dev/null
+++ b/samples/react-calendar/src/index.ts
@@ -0,0 +1 @@
+// A file is required to be in the root of the /src directory by the TypeScript compiler
diff --git a/samples/react-calendar/src/services/IEventData.ts b/samples/react-calendar/src/services/IEventData.ts
new file mode 100644
index 000000000..54fc5116d
--- /dev/null
+++ b/samples/react-calendar/src/services/IEventData.ts
@@ -0,0 +1,17 @@
+export interface IEventData {
+ id?:number;
+ title: string;
+ Description?: any;
+ location?:string;
+ start: Date;
+ end: Date;
+ color?:string;
+ ownerInitial?: string;
+ ownerPhoto?:string;
+ ownerEmail?:string;
+ ownerName?:string;
+ allDayEvent?: boolean;
+ attendes?: number[];
+ geolocation?: {Longitude:number, Latitude: number};
+ Category?: string;
+}
diff --git a/samples/react-calendar/src/services/IList.ts b/samples/react-calendar/src/services/IList.ts
new file mode 100644
index 000000000..58e682232
--- /dev/null
+++ b/samples/react-calendar/src/services/IList.ts
@@ -0,0 +1,4 @@
+export interface IList {
+ ID: string;
+ Title: string;
+}
diff --git a/samples/react-calendar/src/services/IListFIelds.ts b/samples/react-calendar/src/services/IListFIelds.ts
new file mode 100644
index 000000000..e33d771fa
--- /dev/null
+++ b/samples/react-calendar/src/services/IListFIelds.ts
@@ -0,0 +1,5 @@
+export interface IListFields {
+ Title: String;
+ InternalName: string;
+ TypeAsString: string;
+}
diff --git a/samples/react-calendar/src/services/IUserPermissions.ts b/samples/react-calendar/src/services/IUserPermissions.ts
new file mode 100644
index 000000000..0d434d0f3
--- /dev/null
+++ b/samples/react-calendar/src/services/IUserPermissions.ts
@@ -0,0 +1,6 @@
+export interface IUserPermissions {
+ hasPermissionAdd: boolean;
+ hasPermissionEdit: boolean;
+ hasPermissionDelete: boolean;
+ hasPermissionView: boolean;
+}
diff --git a/samples/react-calendar/src/services/spservices.ts b/samples/react-calendar/src/services/spservices.ts
new file mode 100644
index 000000000..9f1c11c76
--- /dev/null
+++ b/samples/react-calendar/src/services/spservices.ts
@@ -0,0 +1,470 @@
+// João Mendes
+// March 2019
+
+import { WebPartContext } from "@microsoft/sp-webpart-base";
+import { sp, Fields, Web, SearchResults, Field, PermissionKind, RegionalSettings } from '@pnp/sp';
+import { graph, } from "@pnp/graph";
+import { SPHttpClient, SPHttpClientResponse, ISPHttpClientOptions, HttpClient, MSGraphClient } from '@microsoft/sp-http';
+import * as $ from 'jquery';
+import { IEventData } from './IEventData';
+import { registerDefaultFontFaces } from "@uifabric/styling";
+import { EventArgs } from "@microsoft/sp-core-library";
+import * as moment from 'moment';
+import { SiteUser } from "@pnp/sp/src/siteusers";
+import { IUserPermissions } from './IUserPermissions';
+import { dateAdd } from "@pnp/common";
+
+
+const ADMIN_ROLETEMPLATE_ID = "62e90394-69f5-4237-9190-012177145e10"; // Global Admin TemplateRoleId
+// Class Services
+export default class spservices {
+
+ private graphClient: MSGraphClient = null;
+
+ constructor(private context: WebPartContext) {
+ // Setuo Context to PnPjs and MSGraph
+ sp.setup({
+ spfxContext: this.context
+ });
+
+ graph.setup({
+ spfxContext: this.context
+ });
+ // Init
+ this.onInit();
+ }
+ // OnInit Function
+ private async onInit() {
+ //this.appCatalogUrl = await this.getAppCatalogUrl();
+
+ }
+
+ /**
+ *
+ * @private
+ * @param {string} siteUrl
+ * @returns {Promise
+ {
+ this.state.hasError &&
+
+ {this.state.errorMessage}
+
+ }
+ {
+ this.state.isloading && (
+
+ {
+ this.state.displayDialog &&
+
+
+
+ + +
+ }
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ + + +
+
+
+
+
+
+
+
+
+
+
+
+ }
+
+
+
+
+
+
+ );
+ };
+
+ return (
+
+
+
+
+
+
+ {
+ moment(event.start).format('YYYY/MM/DD') !== moment(event.end).format('YYYY/MM/DD') ?
+ {moment(event.start).format('dddd')} - {moment(event.end).format('dddd')}
+ :
+ {moment(event.start).format('dddd')}
+ }
+
+ {moment(event.start).format('HH:mm')}H - {moment(event.end).format('HH:mm')}H
+
+
+
+ {
+ }}
+ >
+
+
+ );
+ }
+ /**
+ *
+ *
+ * @private
+ * @memberof Calendar
+ */
+ private onConfigure() {
+ // Context of the web part
+ this.props.context.propertyPane.open();
+ }
+
+ /**
+ * @param {*} { start, end }
+ * @memberof Calendar
+ */
+ public async onSelectSlot({ start, end }) {
+ if (!this.userListPermissions.hasPermissionAdd) return;
+ this.setState({ showDialog: true, startDateSlot: start, endDateSlot: end, selectedEvent: undefined, panelMode: IPanelModelEnum.add });
+ }
+
+ /**
+ *
+ * @param {*} event
+ * @param {*} start
+ * @param {*} end
+ * @param {*} isSelected
+ * @returns {*}
+ * @memberof Calendar
+ */
+ public eventStyleGetter(event, start, end, isSelected): any {
+ let style: any = {
+ backgroundColor: 'white',
+ borderRadius: '0px',
+ opacity: 1,
+ color: 'black',
+ borderWidth: '1.1px',
+ borderStyle: 'solid',
+ borderColor: event.color,
+ borderLeftWidth: '5px',
+ display: 'block'
+ };
+
+ return {
+ style: style
+ };
+ }
+
+ /**
+ *
+ * @returns {React.ReactElement
+
+ {this.state.errorMessage}
+
+ :
+ // show Calendar
+ // Test if is loading Events
+
+ );
+ }
+}
diff --git a/samples/react-calendar/src/webparts/calendar/components/ICalendarProps.ts b/samples/react-calendar/src/webparts/calendar/components/ICalendarProps.ts
new file mode 100644
index 000000000..660bdd63c
--- /dev/null
+++ b/samples/react-calendar/src/webparts/calendar/components/ICalendarProps.ts
@@ -0,0 +1,13 @@
+import { DisplayMode } from '@microsoft/sp-core-library';
+import { WebPartContext } from "@microsoft/sp-webpart-base";
+import { IDateTimeFieldValue } from '@pnp/spfx-property-controls/lib/PropertyFieldDateTimePicker';
+export interface ICalendarProps {
+ title: string;
+ siteUrl: string;
+ list: string;
+ displayMode: DisplayMode;
+ updateProperty: (value: string) => void;
+ context: WebPartContext;
+ eventStartDate: IDateTimeFieldValue;
+ eventEndDate: IDateTimeFieldValue;
+}
diff --git a/samples/react-calendar/src/webparts/calendar/components/ICalendarState.ts b/samples/react-calendar/src/webparts/calendar/components/ICalendarState.ts
new file mode 100644
index 000000000..f84c6a5eb
--- /dev/null
+++ b/samples/react-calendar/src/webparts/calendar/components/ICalendarState.ts
@@ -0,0 +1,13 @@
+import { IPanelModelEnum} from '../../../controls/Event/IPanelModeEnum';
+import { IEventData } from './../../../services/IEventData';
+export interface ICalendarState {
+ showDialog: boolean;
+ eventData: IEventData[];
+ selectedEvent: IEventData;
+ panelMode?: IPanelModelEnum;
+ startDateSlot?: Date;
+ endDateSlot?:Date;
+ isloading: boolean;
+ hasError: boolean;
+ errorMessage: string;
+}
diff --git a/samples/react-calendar/src/webparts/calendar/components/Toolbar.jsx b/samples/react-calendar/src/webparts/calendar/components/Toolbar.jsx
new file mode 100644
index 000000000..d26b2b6ea
--- /dev/null
+++ b/samples/react-calendar/src/webparts/calendar/components/Toolbar.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import Toolbar from 'react-big-calendar/lib/Toolbar';
+
+export default class CalendarToolbar extends Toolbar {
+
+ componentDidMount() {
+ const view = this.props.view;
+ console.log(view)
+ }
+
+ render() {
+ return (
+
+ {this.state.isloading ?
+ }
+ {
+ this.state.showDialog &&
+
+ `+${total} ${strings.showMore}`
+ }
+ }
+ />
+
+ }
+
+
+ );
+ }
+}
+module.export = CalendarToolbar;
diff --git a/samples/react-calendar/src/webparts/calendar/components/calendar.scss b/samples/react-calendar/src/webparts/calendar/components/calendar.scss
new file mode 100644
index 000000000..c202df106
--- /dev/null
+++ b/samples/react-calendar/src/webparts/calendar/components/calendar.scss
@@ -0,0 +1,92 @@
+@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
+
+.rbc-selected-cell {
+ background-color: $ms-color-themeDark;
+}
+.rbc-event:hover {
+ border-width: 2px;
+}
+
+.rbc-today {
+ background-color: $ms-color-themeDark;
+ opacity: 0.7;
+}
+.rbc-off-range-bg {
+ background: #f4f4f4;
+}
+
+.rbc-toolbar button {
+ color: #373a3c;
+ display: inline-block;
+ margin: 0;
+ text-align: center;
+ vertical-align: middle;
+ background: none;
+ background-image: none;
+ border: 1px solid #ccc;
+ padding: .375rem 1rem;
+ /* border-radius: 4px; */
+ line-height: normal;
+ white-space: nowrap;
+}
+
+
+.rbc-toolbar button:active {
+ background-image: none;
+ /* box-shadow: inset 0 3px 5px rgba(0,0,0,.125); */
+ background-color: #f8f8f8;
+ border-color: #adadad;
+}
+
+.rbc-toolbar button {
+ color: #373a3c;
+ display: inline-block;
+ margin: 0;
+ text-align: center;
+ vertical-align: middle;
+ background: none;
+ background-image: none;
+ border: 1px solid #ccc;
+ padding: .375rem 1rem;
+ border-radius: 0px;
+ line-height: normal;
+ white-space: nowrap;
+}
+
+
+.rbc-toolbar button.rbc-active {
+ background-image: none;
+ background-color: $ms-color-themeDark;
+ /* background-color: #0075c7;*/
+ border-color: #f4f4f4;
+ color: white;
+}
+
+.rbc-toolbar button.rbc-active:focus, .rbc-toolbar button.rbc-active:hover, .rbc-toolbar button:active:focus, .rbc-toolbar button:active:hover {
+ color: #fff;
+ background-color: $ms-color-themeDark;
+ border-color: #f4f4f4;
+}
+
+.rbc-toolbar button:focus, .rbc-toolbar button:hover {
+ color: #f8f8f8;
+ background-color: $ms-color-themeDark;
+ border-color: #adadad;
+}
+
+.rbc-show-more {
+ background-color: hsla(0,0%,100%,.3);
+ z-index: 4;
+ font-weight: 700;
+ font-size: 85%;
+ height: auto;
+ line-height: normal;
+ white-space: nowrap;
+}
+
+.rbc-ellipsis, .rbc-event-label, .rbc-row-segment .rbc-event-content, .rbc-show-more {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
diff --git a/samples/react-calendar/src/webparts/calendar/loc/en-us.js b/samples/react-calendar/src/webparts/calendar/loc/en-us.js
new file mode 100644
index 000000000..14e267b3c
--- /dev/null
+++ b/samples/react-calendar/src/webparts/calendar/loc/en-us.js
@@ -0,0 +1,96 @@
+define([], function () {
+ return {
+ PropPanelSiteUrlErrorMessage:'Please verify if site url is valid',
+ HttpErrorMessage: "Error reading calendar events:",
+ CategoryPlaceHolder: "Please select category",
+ CategoryLabel: "Category",
+ EnDateValidationMessage: "start date is greater than end date",
+ SartDateValidationMessage: "start date is greater than end date",
+ eventSelectDatesLabel: "Show only the events within the following dates",
+ ConfirmeDeleteMessage: "Confirm delete event ?",
+ DialogConfirmDeleteTitle: " 'Delete Event'",
+ SpinnerDeletingLabel: "Deleting...",
+ DialogCloseButtonLabel: "Cancel",
+ DialogConfirmDeleteLabel: "Delete",
+ SaveButtonLabel: " Save",
+ DeleteButtonLabel: "Delete",
+ CancelButtonLabel: "Cancel",
+ LoadingEventsLabel: "Loading events...",
+ WebPartConfigButtonLabel: "Configure",
+ WebpartConfigDescription: "Please configure list calendar ",
+ WebpartConfigIconText: "Configure your Calendar Web Part",
+ EventOwnerLabel: "event owner",
+ InvalidDateFormat: "Invalid date format.",
+ IsRequired: "Field is required.",
+ CloseDate: "Close date picker",
+ NextYear: "Go to next year",
+ PrevYear: "Go to previous year",
+ NextMonth: "Go to next month",
+ PrevMonth: "Go to previous month",
+ GoToDay: "Go to today",
+ ShortDay_Saunday: "S",
+ ShortDay_Friday: "F",
+ ShortDay_Tursday: "T",
+ ShortDay_W: "W",
+ ShortDay_T: "T",
+ ShortDay_M: "M",
+ ShortDay_S: "S",
+ Saturday: "Saturday",
+ Friday: "Friday",
+ Thursday: "Thursday",
+ Wednesday: "Wednesday",
+ Tuesday: "Tuesday",
+ Monday: "Monday",
+ Sunday: "Sunday",
+ Jan:'Jan',
+ Feb:'Feb',
+ Mar:'Mar',
+ Apr:'Apr',
+ May:'May',
+ Jun:'Jun',
+ Jul:'Jul',
+ Aug:'Aug',
+ Sep:'Sep',
+ Oct:'Oct',
+ Nov:'Nov',
+ Dez:'Dez',
+ Dezember: "December",
+ November: " 'November'",
+ October: "October",
+ September: "September",
+ August: " 'August'",
+ July: "July",
+ June: "June",
+ May: "May",
+ April: "April",
+ March: "March",
+ February: "February",
+ January: "January",
+ LocationLabel: "Location search and Map",
+ LocationTextLabel: "Location",
+ AttendeesLabel: "Attendees",
+ EndMinLabel: "Min",
+ EndHourLabel: "Hour",
+ EndDateLabel: "End Date",
+ EndDatePlaceHolder: "Select a date...",
+ StartMinLabel: "Min",
+ StartHourLabel: "Hour",
+ StartDateLabel: "Start Date",
+ StartDatePlaceHolder: "Select a date...",
+ EventTitleErrorMessage: "Event Title is required.",
+ EventTitleLabel: "Event title",
+ EventPanelTitle: "Edit/Add Event",
+ "PropertyPaneDescription": "Calendar",
+ "BasicGroupName": "Properties",
+ SiteUrlFieldLabel: 'Site Url',
+ ListFieldLabel: 'Calendar List name',
+ weekLabel: 'Week',
+ dayLable: 'Day',
+ agenda: 'Agenda',
+ monthLabel: 'Month',
+ "todayLabel": 'Today',
+ "previousLabel": 'Previous',
+ "nextLabel": "Next",
+ "showMore": 'more'
+ }
+});
diff --git a/samples/react-calendar/src/webparts/calendar/loc/mystrings.d.ts b/samples/react-calendar/src/webparts/calendar/loc/mystrings.d.ts
new file mode 100644
index 000000000..308bbd717
--- /dev/null
+++ b/samples/react-calendar/src/webparts/calendar/loc/mystrings.d.ts
@@ -0,0 +1,100 @@
+declare interface ICalendarWebPartStrings {
+ HttpErrorMessage: string;
+ CategoryPlaceHolder: string;
+ CategoryLabel: string;
+ EnDateValidationMessage: string;
+ SartDateValidationMessage: string;
+ eventSelectDatesLabel: string;
+ ConfirmeDeleteMessage: string;
+ DialogConfirmDeleteTitle: string;
+ SpinnerDeletingLabel: string;
+ DialogCloseButtonLabel: string;
+ DialogConfirmDeleteLabel: string;
+ SaveButtonLabel: string;
+ DeleteButtonLabel: string;
+ CancelButtonLabel: string;
+ LoadingEventsLabel: string;
+ WebPartConfigButtonLabel: string;
+ WebpartConfigDescription: string;
+ WebpartConfigIconText: string;
+ EventOwnerLabel: string;
+ InvalidDateFormat: string;
+ IsRequired: string;
+ CloseDate: string;
+ NextYear: string;
+ PrevYear: string;
+ NextMonth: string;
+ PrevMonth: string;
+ GoToDay: string;
+ ShortDay_Saunday: string;
+ ShortDay_Friday: string;
+ ShortDay_Tursday: string;
+ ShortDay_W: string;
+ ShortDay_T: string;
+ ShortDay_M: string;
+ ShortDay_S: string;
+ Saturday: string;
+ Friday: string;
+ Thursday: string;
+ Wednesday: string;
+ Tuesday: string;
+ Monday: string;
+ Sunday: string;
+ Jan:string;
+ Feb:string;
+ Mar:string;
+ Apr:string;
+ May:string,
+ Jun:string;
+ Jul:string;
+ Aug:string;
+ Sep:string;
+ Oct:string;
+ Nov:string;
+ Dez:string;
+ Dezember: string;
+ November: string;
+ October: string;
+ September: string;
+ August: string;
+ July: string;
+ June: string;
+ May: string;
+ April: string;
+ March: string;
+ February: string;
+ January: string;
+ LocationLabel: string;
+ LocationTextLabel: string;
+ AttendeesLabel: string;
+ EndMinLabel: string;
+ EndHourLabel: string;
+ EndDateLabel: string;
+ EndDatePlaceHolder: string;
+ StartMinLabel: string;
+ StartHourLabel: string;
+ StartDateLabel: string;
+ StartDatePlaceHolder: string;
+ EventTitleErrorMessage: string;
+ EventTitleLabel: string;
+ EventPanelTitle: string;
+ PropertyPaneDescription: string;
+ BasicGroupName: string;
+ DescriptionFieldLabel: string;
+ SiteUrlFieldLabel: string;
+ ListFieldLabel: string;
+ monthLabel: string;
+ weekLabel: string;
+ dayLable: string;
+ agenda: string;
+ todayLabel: string;
+ previousLabel: string;
+ nextLabel: string;
+ showMore: string;
+ PropPanelSiteUrlErrorMessage: string;
+}
+
+declare module 'CalendarWebPartStrings' {
+ const strings: ICalendarWebPartStrings;
+ export = strings;
+}
diff --git a/samples/react-calendar/src/webparts/calendar/loc/pt-pt.js b/samples/react-calendar/src/webparts/calendar/loc/pt-pt.js
new file mode 100644
index 000000000..cc362951a
--- /dev/null
+++ b/samples/react-calendar/src/webparts/calendar/loc/pt-pt.js
@@ -0,0 +1,96 @@
+define([], function() {
+ return {
+ PropPanelSiteUrlErrorMessage:'Por favor verifique se site url é valido.',
+ HttpErrorMessage: "Error reading calendar events:",
+ CategoryPlaceHolder: "Please select category",
+ CategoryLabel: "Category",
+ EnDateValidationMessage: "start date is greater than end date",
+ SartDateValidationMessage: "start date is greater than end date",
+ eventSelectDatesLabel: "Show only the events within the following dates",
+ ConfirmeDeleteMessage: "Confirm delete event ?",
+ DialogConfirmDeleteTitle: " 'Delete Event'",
+ SpinnerDeletingLabel: "Deleting...",
+ DialogCloseButtonLabel: "Cancel",
+ DialogConfirmDeleteLabel: "Delete",
+ SaveButtonLabel: " Save",
+ DeleteButtonLabel: "Delete",
+ CancelButtonLabel: "Cancel",
+ LoadingEventsLabel: "A carregar eventos...",
+ WebPartConfigButtonLabel: "Configurar",
+ WebpartConfigDescription: "Por favor configure configurar calendário ",
+ WebpartConfigIconText: "Configurar Web Part Calendarário",
+ EventOwnerLabel: "Organizador",
+ InvalidDateFormat: "Formato data inválido",
+ IsRequired: "Campo é obrigatório",
+ CloseDate: "Fechar date picker",
+ NextYear: "Ir para o próximo ano",
+ PrevYear: "Ir para o ano anterior",
+ NextMonth: "Ir para o próximo mês",
+ PrevMonth: "Ir para o mês anterior",
+ GoToDay: "Ir para dia de hoje",
+ ShortDay_Saunday: "S",
+ ShortDay_Friday: "S",
+ ShortDay_Tursday: "Q",
+ ShortDay_W: "Q",
+ ShortDay_T: "T",
+ ShortDay_M: "S",
+ ShortDay_S: "D",
+ Saturday: "Sábado",
+ Friday: "Sexta-feira",
+ Thursday: "Quinta-feira",
+ Wednesday: "Quarta",
+ Tuesday: "Terça",
+ Monday: "Segunda",
+ Sunday: "Domingo",
+ Jan:'Jan',
+ Feb:'Fev',
+ Mar:'Mar',
+ Apr:'Abr',
+ May:'Mai',
+ Jun:'Jun',
+ Jul:'Jul',
+ Aug:'Aug',
+ Sep:'Sep',
+ Oct:'Oct',
+ Nov:'Nov',
+ Dez:'Dez',
+ Dezember: "Dezembro",
+ November: " 'Novembro'",
+ October: "Outubro",
+ September: "Setembro",
+ August: 'Agosto',
+ July: "Julho",
+ June: "Junho",
+ May: "Maio",
+ April: "Abril",
+ March: "Março",
+ February: "Fevereiro",
+ January: "Janeiro",
+ LocationLabel: "Mapa",
+ LocationTextLabel: "Local",
+ AttendeesLabel: "Participantes",
+ EndMinLabel: "Min",
+ EndHourLabel: "Hora",
+ EndDateLabel: "Data fim",
+ EndDatePlaceHolder: "Seleccionar data...",
+ StartMinLabel: "Min",
+ StartHourLabel: "Hora",
+ StartDateLabel: "Data Início",
+ StartDatePlaceHolder: "Seleccionar data...",
+ EventTitleErrorMessage: "Título do evento é obrigatório.",
+ EventTitleLabel: "Título do evento",
+ EventPanelTitle: "Editar/Addcionar Evento",
+ "PropertyPaneDescription": "Calendário com marcação de eventos, mostra os eventos criados na lista calendário definida no site seleccionado",
+ "BasicGroupName": "Indique o Url do site e calendário",
+ "SiteUrlFieldLabel": 'Url do Site',
+ "ListFieldLabel": 'Nome da Lista Calendario',
+ "weekLabel": 'Semana',
+ "dayLable": 'Dia',
+ "agenda": 'Agenda',
+ "monthLabel": 'Mês',
+ "todayLabel": 'Hoje',
+ "previousLabel": 'Anterior',
+ "nextLabel": "Seguinte",
+ "showMore": 'mais'
+ }
+});
diff --git a/samples/react-calendar/teams/24353da0-cf7a-4ca8-85a2-c9cc91b5b865_color.png b/samples/react-calendar/teams/24353da0-cf7a-4ca8-85a2-c9cc91b5b865_color.png
new file mode 100644
index 000000000..a8d279707
Binary files /dev/null and b/samples/react-calendar/teams/24353da0-cf7a-4ca8-85a2-c9cc91b5b865_color.png differ
diff --git a/samples/react-calendar/teams/24353da0-cf7a-4ca8-85a2-c9cc91b5b865_outline.png b/samples/react-calendar/teams/24353da0-cf7a-4ca8-85a2-c9cc91b5b865_outline.png
new file mode 100644
index 000000000..6df4a038d
Binary files /dev/null and b/samples/react-calendar/teams/24353da0-cf7a-4ca8-85a2-c9cc91b5b865_outline.png differ
diff --git a/samples/react-calendar/tools/pre-version.js b/samples/react-calendar/tools/pre-version.js
new file mode 100644
index 000000000..be51a4beb
--- /dev/null
+++ b/samples/react-calendar/tools/pre-version.js
@@ -0,0 +1,64 @@
+/**
+ * This script updates the package-solution version analogue to the
+ * the package.json file.
+ */
+
+if (process.env.npm_package_version === undefined) {
+
+ throw 'Package version cannot be evaluated';
+
+}
+
+// define path to package-solution file
+const solution = './config/package-solution.json',
+ teams = './teams/manifest.json';
+
+// require filesystem instanc
+const fs = require('fs');
+
+// get next automated package version from process variable
+const nextPkgVersion = process.env.npm_package_version;
+
+// make sure next build version match
+const nextVersion = nextPkgVersion.indexOf('-') === -1 ?
+ nextPkgVersion : nextPkgVersion.split('-')[0];
+
+// Update version in SPFx package-solution if exists
+if (fs.existsSync(solution)) {
+
+ // read package-solution file
+ const solutionFileContent = fs.readFileSync(solution, 'UTF-8');
+ // parse file as json
+ const solutionContents = JSON.parse(solutionFileContent);
+
+ // set property of version to next version
+ solutionContents.solution.version = nextVersion + '.0';
+
+ // save file
+ fs.writeFileSync(
+ solution,
+ // convert file back to proper json
+ JSON.stringify(solutionContents, null, 2),
+ 'UTF-8');
+
+}
+
+// Update version in teams manifest if exists
+if (fs.existsSync(teams)) {
+
+ // read package-solution file
+ const teamsManifestContent = fs.readFileSync(teams, 'UTF-8');
+ // parse file as json
+ const teamsContent = JSON.parse(teamsManifestContent);
+
+ // set property of version to next version
+ teamsContent.version = nextVersion;
+
+ // save file
+ fs.writeFileSync(
+ teams,
+ // convert file back to proper json
+ JSON.stringify(teamsContent, null, 2),
+ 'UTF-8');
+
+}
diff --git a/samples/react-calendar/tsconfig.json b/samples/react-calendar/tsconfig.json
new file mode 100644
index 000000000..f48e83ea5
--- /dev/null
+++ b/samples/react-calendar/tsconfig.json
@@ -0,0 +1,38 @@
+{
+ "extends": "./node_modules/@microsoft/rush-stack-compiler-3.2/includes/tsconfig-web.json",
+ "compilerOptions": {
+ "target": "es5",
+ "forceConsistentCasingInFileNames": true,
+ "module": "esnext",
+ "moduleResolution": "node",
+ "jsx": "react",
+ "declaration": true,
+ "sourceMap": true,
+ "experimentalDecorators": true,
+ "skipLibCheck": true,
+ "outDir": "lib",
+ "inlineSources": false,
+ "strictNullChecks": false,
+ "noUnusedLocals": false,
+ "typeRoots": [
+ "./node_modules/@types",
+ "./node_modules/@microsoft"
+ ],
+ "types": [
+ "es6-promise",
+ "webpack-env"
+ ],
+ "lib": [
+ "es5",
+ "dom",
+ "es2015.collection"
+ ]
+ },
+ "include": [
+ "src/**/*.ts"
+ ],
+ "exclude": [
+ "node_modules",
+ "lib"
+ ]
+}
diff --git a/samples/react-calendar/tslint.json b/samples/react-calendar/tslint.json
new file mode 100644
index 000000000..23fa2aa43
--- /dev/null
+++ b/samples/react-calendar/tslint.json
@@ -0,0 +1,30 @@
+{
+ "extends": "@microsoft/sp-tslint-rules/base-tslint.json",
+ "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-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,
+ "variable-name": false,
+ "whitespace": false
+ }
+}
\ No newline at end of file
diff --git a/samples/react-manage-sitedesigns/README.md b/samples/react-manage-sitedesigns/README.md
index 1771e07e8..cb4788536 100644
--- a/samples/react-manage-sitedesigns/README.md
+++ b/samples/react-manage-sitedesigns/README.md
@@ -85,7 +85,6 @@ Only users with Tenant Admin Role are allowed to managed tenant properties.
-
@@ -127,6 +126,7 @@ Version|Date|Comments
## Minimal Path to Awesome
- Clone this repository
+- Move to sample folder
- in the command line run:
- `npm install`
- `gulp build`
@@ -134,7 +134,4 @@ Version|Date|Comments
- `gulp package-solution --ship`
- `Add to AppCatalog and deploy`
-
-
-
+
+
+
+
+ {this.props.label}
+
+
+
+
+
+
+