From b4332a36a3bf929eb74d466e6fb390a58e63aa8d Mon Sep 17 00:00:00 2001
From: Abderahman88 <rags_place@hotmail.com>
Date: Sun, 18 Oct 2020 00:11:54 +0100
Subject: [PATCH 1/6] add custom toolbar

---
 samples/react-calendar/config/config.json     |   3 +-
 .../config/package-solution.json              |   2 +-
 .../webparts/calendar/components/Calendar.tsx |  17 +-
 .../calendar/components/CustomToolbar.tsx     |  91 +++++++++
 .../webparts/calendar/components/Toolbar.jsx  |   8 +-
 .../src/webparts/calendar/components/Year.tsx | 185 ++++++++++++++++++
 samples/react-calendar/tsconfig.json          |   5 +-
 7 files changed, 301 insertions(+), 10 deletions(-)
 create mode 100644 samples/react-calendar/src/webparts/calendar/components/CustomToolbar.tsx
 create mode 100644 samples/react-calendar/src/webparts/calendar/components/Year.tsx

diff --git a/samples/react-calendar/config/config.json b/samples/react-calendar/config/config.json
index 2acf37ba9..609a25130 100644
--- a/samples/react-calendar/config/config.json
+++ b/samples/react-calendar/config/config.json
@@ -16,6 +16,7 @@
   "localizedResources": {
     "CalendarWebPartStrings": "lib/webparts/calendar/loc/{locale}.js",
     "ControlStrings": "node_modules/@pnp/spfx-controls-react/lib/loc/{locale}.js",
-    "PropertyControlStrings": "node_modules/@pnp/spfx-property-controls/lib/loc/{locale}.js"
+    "PropertyControlStrings": "node_modules/@pnp/spfx-property-controls/lib/loc/{locale}.js",
+    "CalendarToolbar": "lib/webparts/calendar/components/Toolbar.jsx"
   }
 }
diff --git a/samples/react-calendar/config/package-solution.json b/samples/react-calendar/config/package-solution.json
index 3b76f668e..8bf601228 100644
--- a/samples/react-calendar/config/package-solution.json
+++ b/samples/react-calendar/config/package-solution.json
@@ -3,7 +3,7 @@
   "solution": {
     "name": "react-calendar-client-side-solution",
     "id": "3a13208b-3874-4036-9262-4edd22e88187",
-    "version": "1.0.0.0",
+    "version": "1.0.0.1",
     "includeClientSideAssets": true,
     "skipFeatureDeployment": true,
     "isDomainIsolated": false
diff --git a/samples/react-calendar/src/webparts/calendar/components/Calendar.tsx b/samples/react-calendar/src/webparts/calendar/components/Calendar.tsx
index 5a1e1a667..68092d9b5 100644
--- a/samples/react-calendar/src/webparts/calendar/components/Calendar.tsx
+++ b/samples/react-calendar/src/webparts/calendar/components/Calendar.tsx
@@ -9,6 +9,8 @@ import * as strings from 'CalendarWebPartStrings';
 import 'react-big-calendar/lib/css/react-big-calendar.css';
 require('./calendar.css');
 import { CommunicationColors ,  FluentCustomizations, FluentTheme  } from '@uifabric/fluent-theme';
+import CalendarToolbar from './CustomToolbar';
+import Year from './Year';
 
 import {
   Customizer,
@@ -311,7 +313,6 @@ export default class Calendar extends React.Component<ICalendarProps, ICalendarS
    * @memberof Calendar
    */
   public render(): React.ReactElement<ICalendarProps> {
-
     return (
       <Customizer {...FluentCustomizations}>
 
@@ -350,11 +351,19 @@ export default class Calendar extends React.Component<ICalendarProps, ICalendarS
                       eventPropGetter={this.eventStyleGetter}
                       onSelectSlot={this.onSelectSlot}
                       components={{
-                        event: this.renderEvent
-
+                        event: this.renderEvent,
+                        toolbar: CalendarToolbar,
                       }}
                       onSelectEvent={this.onSelectEvent}
                       defaultDate={moment().startOf('day').toDate()}
+                      /*views={{
+                        day: true,
+                        week: true,
+                        month: true,
+                        agenda: true,
+                        work_week: false
+                      }}*/
+                      //views={['month','week','day','agenda']}
                       messages={
                         {
                           'today': strings.todayLabel,
@@ -363,7 +372,7 @@ export default class Calendar extends React.Component<ICalendarProps, ICalendarS
                           'month': strings.monthLabel,
                           'week': strings.weekLabel,
                           'day': strings.dayLable,
-                          'showMore': total => `+${total} ${strings.showMore}`
+                          'showMore': total => `+${total} ${strings.showMore}`,
                         }
                       }
                     />
diff --git a/samples/react-calendar/src/webparts/calendar/components/CustomToolbar.tsx b/samples/react-calendar/src/webparts/calendar/components/CustomToolbar.tsx
new file mode 100644
index 000000000..b68e1d3d8
--- /dev/null
+++ b/samples/react-calendar/src/webparts/calendar/components/CustomToolbar.tsx
@@ -0,0 +1,91 @@
+import * as React from 'react';
+import { css } from 'office-ui-fabric-react';
+import PropTypes from 'prop-types';
+import { View, Views, Navigate, Messages } from "react-big-calendar";
+import * as strings from 'CalendarWebPartStrings';
+//require('./calendar.css');
+
+export interface ICustomToolbarProps {
+    date: Date;
+    view: View;
+    views: Views;
+    label: string;
+    localizer: { messages: Messages };
+    onNavigate: (navigate: Navigate, date?: Date) => void;
+    onView: (view: View) => void;
+    children?: React.ReactNode;
+}
+
+export interface ICustomToolbarState {
+    activeView: string;
+}
+
+
+export default class CalendarToolbar extends React.Component<ICustomToolbarProps, ICustomToolbarState> {
+    public constructor(props) {
+        super(props);
+    
+        this.state = {
+          activeView: 'month'
+        };
+    }
+
+    public componentDidMount() {
+		const view = this.props.view;
+		console.log(view);
+    }
+    
+    private navigate = (action) => {
+        this.props.onNavigate(action);
+    }
+
+    private view = (view) => {
+        this.props.onView(view);
+        this.setState({activeView: view});
+    }
+
+
+    /*private viewNamesGroup = (messages) => {
+        let viewNames = this.props.views
+        const view = this.props.view
+    
+        if (viewNames.length > 1) {
+          return viewNames.map(name => (
+            <button
+              type="button"
+              key={name}
+              className={css({ 'rbc-active': view === name })}
+              onClick={this.view.bind(null, name)}
+            >
+              {messages[name]}
+            </button>
+          ))
+        }
+    }*/
+
+    public render() {
+            const {activeView} = this.state;
+
+            return (
+                <div className="rbc-toolbar">
+                    <div className="rbc-btn-group">
+                        {/*<button type="button" onClick={() => this.navigate('TODAY')}>{strings.todayLabel}</button>*/}
+                        <button type="button" onClick={() => this.navigate('TODAY')}>VANDAAGHAHA</button>
+                        <button type="button" onClick={() => this.navigate('PREV')}>{strings.previousLabel}</button>
+                        <button type="button" onClick={() => this.navigate('NEXT')}>{strings.nextLabel}</button>
+                    </div>
+                    <span className="rbc-toolbar-label">{this.props.label}</span>
+                    <div className="rbc-btn-group">
+                        <button type="button" className={css({ 'rbc-active': activeView === "month" })} onClick={() => this.view('month')}>{strings.monthLabel}</button>
+                        <button type="button" className={css({ 'rbc-active': activeView === "week" })} onClick={() => this.view('week')}>{strings.weekLabel}</button>
+                        <button type="button" className={css({ 'rbc-active': activeView === "day" })} onClick={() => this.view('day')}>{strings.dayLable}</button>
+                        <button type="button" className={css({ 'rbc-active': activeView === "year" })} onClick={() => this.view('year')}>{"YEAR"}</button>
+                        <button type="button" className={css({ 'rbc-active': activeView === "agenda" })} onClick={() => this.view('agenda')}>{strings.agenda}</button>
+                    </div>
+
+                    {/*<span className="rbc-btn-group">{this.viewNamesGroup(this.props.localizer.messages)}</span>*/}
+                </div>
+            );
+    }
+}
+
diff --git a/samples/react-calendar/src/webparts/calendar/components/Toolbar.jsx b/samples/react-calendar/src/webparts/calendar/components/Toolbar.jsx
index 53d2011c7..45092a21a 100644
--- a/samples/react-calendar/src/webparts/calendar/components/Toolbar.jsx
+++ b/samples/react-calendar/src/webparts/calendar/components/Toolbar.jsx
@@ -10,10 +10,11 @@ export default class CalendarToolbar extends Toolbar {
 	}
 
 	render() {
-		return (
+£		return (
 			<div>
 				<div className="rbc-btn-group">
-					<button type="button" onClick={() => this.navigate('TODAY')}>{strings.todayLabel}</button>
+					{/*<button type="button" onClick={() => this.navigate('TODAY')}>{strings.todayLabel}</button>*/}
+					<button type="button" onClick={() => this.navigate('TODAY')}>VANDAAGHAHA</button>
 					<button type="button" onClick={() => this.navigate('PREV')}>{strings.previousLabel}</button>
 					<button type="button" onClick={() => this.navigate('NEXT')}>{strings.nextLabel}</button>
 				</div>
@@ -22,10 +23,11 @@ export default class CalendarToolbar extends Toolbar {
 					<button type="button" onClick={this.view.bind(null, 'month')}>{strings.monthLabel}</button>
 					<button type="button" onClick={this.view.bind(null, 'week')}>{strings.weekLabel}</button>
 					<button type="button" onClick={this.view.bind(null, 'day')}>{strings.dayLable}</button>
+					<button type="button" onClick={this.view.bind(null, 'year')}>{"YEAR"}</button>
 					<button type="button" onClick={this.view.bind(null, 'agenda')}>{strings.agenda}</button>
 				</div>
 			</div>
 		);
 	}
 }
-module.export = CalendarToolbar;
+//module.export = CalendarToolbar;
diff --git a/samples/react-calendar/src/webparts/calendar/components/Year.tsx b/samples/react-calendar/src/webparts/calendar/components/Year.tsx
new file mode 100644
index 000000000..e4f500e6d
--- /dev/null
+++ b/samples/react-calendar/src/webparts/calendar/components/Year.tsx
@@ -0,0 +1,185 @@
+import React from 'react'
+import moment from 'moment'
+
+import dates from 'react-big-calendar/lib/utils/dates'
+import { navigate } from 'react-big-calendar/lib/utils/constants'
+
+function createCalendar(currentDate) {
+  if (!currentDate) {
+    currentDate = moment()
+  } else {
+    currentDate = moment(currentDate)
+  }
+
+  const first = currentDate.clone().startOf('month')
+  const last = currentDate.clone().endOf('month')
+  const weeksCount = Math.ceil((first.day() + last.date()) / 7)
+  //const a = { currentDate, first, last };
+  const calendar = [currentDate, first, last];
+
+  for (let weekNumber = 0; weekNumber < weeksCount; weekNumber++) {
+    const week = []
+    calendar.push(week)
+    //calendar.year = currentDate.year()
+    //calendar.month = currentDate.month()
+
+    for (let day = 7 * weekNumber; day < 7 * (weekNumber + 1); day++) {
+      const date = currentDate.clone().set('date', day + 1 - first.day())
+      date.calendar = calendar
+      week.push(date)
+    }
+  }
+
+  return calendar
+}
+
+function CalendarDate(props) {
+  const { dateToRender, dateOfMonth } = props
+  const today =
+    dateToRender.format('YYYY-MM-DD') === moment().format('YYYY-MM-DD')
+      ? 'today'
+      : ''
+
+  if (dateToRender.month() < dateOfMonth.month()) {
+    return (
+      <button disabled={true} className="date prev-month">
+        {dateToRender.date()}
+      </button>
+    )
+  }
+
+  if (dateToRender.month() > dateOfMonth.month()) {
+    return (
+      <button disabled={true} className="date next-month">
+        {dateToRender.date()}
+      </button>
+    )
+  }
+
+  return (
+    <button
+      className={`date in-month ${today}`}
+      onClick={() => props.onClick(dateToRender)}>
+      {dateToRender.date()}
+    </button>
+  )
+}
+
+
+export interface IYearCalendarProps {
+    date: Date;
+}
+
+export interface IYearCalendarState {
+    calendar: any;
+}
+
+export interface ICalendar {
+    currentDate: any;
+    first: any;
+    last: any;
+    year: any;
+    month: any;
+}
+
+
+class YearCalendar extends React.Component<IYearCalendarProps, IYearCalendarState> {
+    public constructor(props) {
+        super(props);
+    
+        this.state = {
+            calendar: undefined
+        };
+  }
+
+  public componentDidMount() {
+    this.setState({ calendar: createCalendar(this.props.date) })
+  }
+
+  public componentDidUpdate(prevProps) {
+    if (this.props.date !== prevProps.date) {
+      this.setState({ calendar: createCalendar(this.props.date) })
+    }
+  }
+
+  render() {
+    if (!this.state.calendar) {
+      return null
+    }
+
+    return (
+      <div className="month">
+        <div className="month-name">
+          {this.state.calendar.currentDate.format('MMMM').toUpperCase()}
+        </div>
+        {['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((day, index) => (
+          <span key={index} className="day">
+            {day}
+          </span>
+        ))}
+        {this.state.calendar.map((week, index) => (
+          <div key={index}>
+            {week.map(date => (
+              <CalendarDate
+                key={date.date()}
+                dateToRender={date}
+                dateOfMonth={this.state.calendar.currentDate}
+                onClick={date =>
+                  alert(`Will go to daily-view of ${date.format('YYYY-MM-DD')}`)
+                }
+              />
+            ))}
+          </div>
+        ))}
+      </div>
+    )
+  }
+}
+
+
+
+export interface IYearProps {
+    date: any;
+}
+
+class Year extends React.Component<IYearProps> {
+
+    private range = date => {
+        return [dates.startOf(date, 'year')]
+      }
+    
+    private navigate = (date, action) => {
+        switch (action) {
+          case navigate.PREVIOUS:
+            return dates.add(date, -1, 'year')
+      
+          case navigate.NEXT:
+            return dates.add(date, 1, 'year')
+      
+          default:
+            return date
+        }
+      }
+
+    //private title = (date, { localizer }) => {
+    //    localizer.format(date, 'yearHeaderFormat');
+    //}
+
+  public render() {
+    let { date, ...props } = this.props
+    let range = this.range(date)
+    const months = []
+    const firstMonth = dates.startOf(date, 'year')
+
+    for (let i = 0; i < 12; i++) {
+      months.push(
+        <YearCalendar key={i + 1} date={dates.add(firstMonth, i, 'month')} />
+      )
+    }
+
+    return <div className="year">{months.map(month => month)}</div>
+  }
+}
+
+
+export default Year
diff --git a/samples/react-calendar/tsconfig.json b/samples/react-calendar/tsconfig.json
index 9cadc0b33..055b483cd 100644
--- a/samples/react-calendar/tsconfig.json
+++ b/samples/react-calendar/tsconfig.json
@@ -14,6 +14,8 @@
     "inlineSources": false,
     "strictNullChecks": false,
     "noUnusedLocals": false,
+    "allowSyntheticDefaultImports":true,
+    //"allowJs": true,
     "typeRoots": [
       "./node_modules/@types",
       "./node_modules/@microsoft"
@@ -29,7 +31,8 @@
     ]
   },
   "include": [
-    "src/**/*.ts"
+    "src/**/*.ts",
+    "src/**/*.jsx"
   ],
   "exclude": [
     "node_modules",

From 683a6320c5d746569f4addfce531f94bb5506747 Mon Sep 17 00:00:00 2001
From: Abderahman88 <rags_place@hotmail.com>
Date: Mon, 19 Oct 2020 21:47:42 +0100
Subject: [PATCH 2/6] add year header label

---
 samples/react-calendar/package-lock.json      | 186 +++++++++---------
 samples/react-calendar/package.json           |   4 +-
 .../webparts/calendar/components/Calendar.tsx |  59 ++++--
 .../calendar/components/Year.module.scss      |  50 +++++
 .../src/webparts/calendar/components/Year.tsx | 151 +++++++-------
 .../src/webparts/calendar/loc/en-us.js        |   1 +
 .../src/webparts/calendar/loc/mystrings.d.ts  |   1 +
 7 files changed, 280 insertions(+), 172 deletions(-)
 create mode 100644 samples/react-calendar/src/webparts/calendar/components/Year.module.scss

diff --git a/samples/react-calendar/package-lock.json b/samples/react-calendar/package-lock.json
index d263f50ad..b89d80254 100644
--- a/samples/react-calendar/package-lock.json
+++ b/samples/react-calendar/package-lock.json
@@ -152,17 +152,17 @@
       "dev": true
     },
     "@babel/runtime": {
-      "version": "7.4.3",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.4.3.tgz",
-      "integrity": "sha512-9lsJwJLxDh/T3Q3SZszfWOTkk3pHbkmH+3KY+zwIDmsNlxsumuhS2TH3NIpktU4kNvfzy+k3eLT7aTJSPTo0OA==",
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.1.tgz",
+      "integrity": "sha512-J5AIf3vPj3UwXaAzb5j1xM4WAQDX3EMgemF8rjCP3SoW09LfRKAXQKt6CoVYl230P6iWdRcBbnLDDdnqWxZSCA==",
       "requires": {
-        "regenerator-runtime": "^0.13.2"
+        "regenerator-runtime": "^0.13.4"
       },
       "dependencies": {
         "regenerator-runtime": {
-          "version": "0.13.2",
-          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.2.tgz",
-          "integrity": "sha512-S/TQAZJO+D3m9xeN1WTI8dLKBBiRgXBlTJvbWjCThHWZj9EvHK70Ff50/tYj2J/fvBY6JtFVwRuazHN2E7M9BA=="
+          "version": "0.13.7",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
+          "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
         }
       }
     },
@@ -5786,6 +5786,15 @@
       "integrity": "sha512-NsEzBVa5aMgn/n79piyJtpUQFzJ97tB2R2r8PSJlLnMA6LJmchKuv7ATN+/nZH/3QRd/+uFXEq07/i/ajsqVGQ==",
       "dev": true
     },
+    "@restart/hooks": {
+      "version": "0.3.25",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.3.25.tgz",
+      "integrity": "sha512-m2v3N5pxTsIiSH74/sb1yW8D9RxkJidGW+5Mfwn/lHb2QzhZNlaU1su7abSyT9EGf0xS/0waLjrf7/XxQHUk7w==",
+      "requires": {
+        "lodash": "^4.17.15",
+        "lodash-es": "^4.17.15"
+      }
+    },
     "@types/adal-angular": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@types/adal-angular/-/adal-angular-1.0.1.tgz",
@@ -6094,9 +6103,9 @@
       }
     },
     "@types/react-big-calendar": {
-      "version": "0.20.13",
-      "resolved": "https://registry.npmjs.org/@types/react-big-calendar/-/react-big-calendar-0.20.13.tgz",
-      "integrity": "sha512-aFaICwmv8De+PiXAlSxqQpNoe1/tUHIFrM9F/6JcF9OouQmzYOy0/EBGbN7I/uL5sdivHGyaLrg4oKqDldJNVA==",
+      "version": "0.24.6",
+      "resolved": "https://registry.npmjs.org/@types/react-big-calendar/-/react-big-calendar-0.24.6.tgz",
+      "integrity": "sha512-np1isJTczysxHBUHsdh1a/oI0SH0Cm1qzulHeItmtde/3qU42OX7pNjAHixBBaOCkLSuQS1b2N3drZarjbxM3A==",
       "requires": {
         "@types/prop-types": "*",
         "@types/react": "*"
@@ -9073,6 +9082,11 @@
       "integrity": "sha1-l1+HwTLymdJKA3W59jyj+4j3Kzo=",
       "dev": true
     },
+    "clsx": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
+      "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA=="
+    },
     "co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -9974,9 +9988,9 @@
       }
     },
     "date-arithmetic": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/date-arithmetic/-/date-arithmetic-3.1.0.tgz",
-      "integrity": "sha1-H80D29UEudvuK5B4yFpfHH08wtM="
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-arithmetic/-/date-arithmetic-4.1.0.tgz",
+      "integrity": "sha512-QWxYLR5P/6GStZcdem+V1xoto6DMadYWpMXU82ES3/RfR3Wdwr3D0+be7mgOJ+Ov0G9D5Dmb9T17sNLQYj9XOg=="
     },
     "dateformat": {
       "version": "2.2.0",
@@ -10287,11 +10301,19 @@
       "dev": true
     },
     "dom-helpers": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz",
-      "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==",
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.0.tgz",
+      "integrity": "sha512-Ru5o9+V8CpunKnz5LGgWXkmrH/20cGKwcHwS4m73zIvs54CN9epEmT/HLqFJW3kXpakAFkEdzgy1hzlJe3E4OQ==",
       "requires": {
-        "@babel/runtime": "^7.1.2"
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      },
+      "dependencies": {
+        "csstype": {
+          "version": "3.0.3",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.3.tgz",
+          "integrity": "sha512-jPl+wbWPOWJ7SXsWyqGRk3lGecbar0Cb0OvZF/r/ZU011R4YqiRehgkQ9p4eQfo9DSDLqLL3wHwfxeJiuIsNag=="
+        }
       }
     },
     "dom-serializer": {
@@ -16244,6 +16266,11 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
       "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
     },
+    "lodash-es": {
+      "version": "4.17.15",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.15.tgz",
+      "integrity": "sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ=="
+    },
     "lodash._basecopy": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz",
@@ -16634,9 +16661,9 @@
       }
     },
     "memoize-one": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-4.0.3.tgz",
-      "integrity": "sha512-QmpUu4KqDmX0plH4u+tf0riMc1KHE1+lw95cMrLlXQAFOx/xnBtwhZ52XJxd9X2O6kwKBqX32kmhbhlobD0cuw=="
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.1.1.tgz",
+      "integrity": "sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA=="
     },
     "memory-fs": {
       "version": "0.4.1",
@@ -18275,6 +18302,11 @@
       "integrity": "sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==",
       "dev": true
     },
+    "popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
+    },
     "posix-character-classes": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
@@ -19245,25 +19277,6 @@
         "reflect.ownkeys": "^0.2.0"
       }
     },
-    "prop-types-extra": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.0.tgz",
-      "integrity": "sha512-QFyuDxvMipmIVKD2TwxLVPzMnO4e5oOf1vr3tJIomL8E7d0lr6phTHd5nkPhFIzTD1idBLLEPeylL9g+rrTzRg==",
-      "requires": {
-        "react-is": "^16.3.2",
-        "warning": "^3.0.0"
-      },
-      "dependencies": {
-        "warning": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
-          "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
-          "requires": {
-            "loose-envify": "^1.0.0"
-          }
-        }
-      }
-    },
     "proxy-addr": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.4.tgz",
@@ -19496,29 +19509,21 @@
       }
     },
     "react-big-calendar": {
-      "version": "0.20.4",
-      "resolved": "https://registry.npmjs.org/react-big-calendar/-/react-big-calendar-0.20.4.tgz",
-      "integrity": "sha512-HABwo8jZCvKsbUOH5U8fgO6msSsl6dHgSDH//T5OCtvX+S0onFZg9kDbU82x2AtF7lx5s2vAJxGmEA3uPQr0Xg==",
+      "version": "0.24.6",
+      "resolved": "https://registry.npmjs.org/react-big-calendar/-/react-big-calendar-0.24.6.tgz",
+      "integrity": "sha512-3t+FSqmaNQr3sAvOcIue+VmNjBV7PNOiGLUidwG0mN6LRPuprO8+poZBq3QM6OqZPu69HY50tCZN8P3BslRUbw==",
       "requires": {
         "@babel/runtime": "^7.1.5",
-        "classnames": "^2.2.6",
-        "date-arithmetic": "^3.0.0",
-        "dom-helpers": "^3.4.0",
+        "clsx": "^1.0.4",
+        "date-arithmetic": "^4.0.1",
+        "dom-helpers": "^5.1.0",
         "invariant": "^2.2.4",
         "lodash": "^4.17.11",
-        "memoize-one": "^4.0.3",
+        "lodash-es": "^4.17.11",
+        "memoize-one": "^5.1.1",
         "prop-types": "^15.6.2",
-        "prop-types-extra": "^1.1.0",
-        "react-overlays": "^0.8.3",
-        "uncontrollable": "^6.0.0",
-        "warning": "^4.0.2"
-      },
-      "dependencies": {
-        "lodash": {
-          "version": "4.17.15",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
-          "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
-        }
+        "react-overlays": "^2.0.0-0",
+        "uncontrollable": "^7.0.0"
       }
     },
     "react-dom": {
@@ -19555,26 +19560,17 @@
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
     "react-overlays": {
-      "version": "0.8.3",
-      "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-0.8.3.tgz",
-      "integrity": "sha512-h6GT3jgy90PgctleP39Yu3eK1v9vaJAW73GOA/UbN9dJ7aAN4BTZD6793eI1D5U+ukMk17qiqN/wl3diK1Z5LA==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-2.1.1.tgz",
+      "integrity": "sha512-gaQJwmb8Ij2IGVt4D1HmLtl4A0mDVYxlsv/8i0dHWK7Mw0kNat6ORelbbEWzaXTK1TqMeQtJw/jraL3WOADz3w==",
       "requires": {
-        "classnames": "^2.2.5",
-        "dom-helpers": "^3.2.1",
-        "prop-types": "^15.5.10",
-        "prop-types-extra": "^1.0.1",
-        "react-transition-group": "^2.2.0",
-        "warning": "^3.0.0"
-      },
-      "dependencies": {
-        "warning": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
-          "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
-          "requires": {
-            "loose-envify": "^1.0.0"
-          }
-        }
+        "@babel/runtime": "^7.4.5",
+        "@restart/hooks": "^0.3.12",
+        "dom-helpers": "^5.1.0",
+        "popper.js": "^1.15.0",
+        "prop-types": "^15.7.2",
+        "uncontrollable": "^7.0.0",
+        "warning": "^4.0.3"
       }
     },
     "react-test-renderer": {
@@ -19601,17 +19597,6 @@
         }
       }
     },
-    "react-transition-group": {
-      "version": "2.9.0",
-      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz",
-      "integrity": "sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==",
-      "requires": {
-        "dom-helpers": "^3.4.0",
-        "loose-envify": "^1.4.0",
-        "prop-types": "^15.6.2",
-        "react-lifecycles-compat": "^3.0.4"
-      }
-    },
     "read": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz",
@@ -22772,11 +22757,30 @@
       "dev": true
     },
     "uncontrollable": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-6.1.0.tgz",
-      "integrity": "sha512-2TzEm0pLKauMBZfAZXsgQvLpZHEp95891frCZdGDrSG7dWYaIQhedwLAzi0X8pR8KHNqlmuYEb2cEgbQzr050A==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.1.1.tgz",
+      "integrity": "sha512-EcPYhot3uWTS3w00R32R2+vS8Vr53tttrvMj/yA1uYRhf8hbTG2GyugGqWDY0qIskxn0uTTojVd6wPYW9ZEf8Q==",
       "requires": {
-        "invariant": "^2.2.4"
+        "@babel/runtime": "^7.6.3",
+        "@types/react": "^16.9.11",
+        "invariant": "^2.2.4",
+        "react-lifecycles-compat": "^3.0.4"
+      },
+      "dependencies": {
+        "@types/react": {
+          "version": "16.9.53",
+          "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.53.tgz",
+          "integrity": "sha512-4nW60Sd4L7+WMXH1D6jCdVftuW7j4Za6zdp6tJ33Rqv0nk1ZAmQKML9ZLD4H0dehA3FZxXR/GM8gXplf82oNGw==",
+          "requires": {
+            "@types/prop-types": "*",
+            "csstype": "^3.0.2"
+          }
+        },
+        "csstype": {
+          "version": "3.0.3",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.3.tgz",
+          "integrity": "sha512-jPl+wbWPOWJ7SXsWyqGRk3lGecbar0Cb0OvZF/r/ZU011R4YqiRehgkQ9p4eQfo9DSDLqLL3wHwfxeJiuIsNag=="
+        }
       }
     },
     "underscore": {
diff --git a/samples/react-calendar/package.json b/samples/react-calendar/package.json
index 5b9f4757c..6ebc2cef6 100644
--- a/samples/react-calendar/package.json
+++ b/samples/react-calendar/package.json
@@ -28,7 +28,7 @@
     "@types/globalize": "0.0.34",
     "@types/jquery": "^3.3.29",
     "@types/react": "16.8.8",
-    "@types/react-big-calendar": "^0.20.13",
+    "@types/react-big-calendar": "^0.24.6",
     "@types/react-dom": "16.8.3",
     "@types/webpack-env": "1.13.1",
     "@uifabric/fluent-theme": "^0.16.7",
@@ -42,7 +42,7 @@
     "moment": "^2.24.0",
     "office-ui-fabric-react": "6.189.2",
     "react": "16.8.5",
-    "react-big-calendar": "^0.20.4",
+    "react-big-calendar": "^0.24.6",
     "react-dom": "16.8.5",
     "react-draft-wysiwyg": "^1.13.2",
     "spfx-uifabric-themes": "^0.6.0",
diff --git a/samples/react-calendar/src/webparts/calendar/components/Calendar.tsx b/samples/react-calendar/src/webparts/calendar/components/Calendar.tsx
index 68092d9b5..f807fb583 100644
--- a/samples/react-calendar/src/webparts/calendar/components/Calendar.tsx
+++ b/samples/react-calendar/src/webparts/calendar/components/Calendar.tsx
@@ -12,6 +12,8 @@ import { CommunicationColors ,  FluentCustomizations, FluentTheme  } from '@uifa
 import CalendarToolbar from './CustomToolbar';
 import Year from './Year';
 
+import { Calendar as OriCalendar, momentLocalizer  } from 'react-big-calendar';
+
 import {
   Customizer,
   IPersonaSharedProps,
@@ -54,9 +56,8 @@ import { IEventData } from './../../../services/IEventData';
 import { IUserPermissions } from './../../../services/IUserPermissions';
 
 
-
-const localizer = BigCalendar.momentLocalizer(moment);
-
+//const localizer = BigCalendar.momentLocalizer(moment);
+const localizer = momentLocalizer(moment);
 /**
  * @export
  * @class Calendar
@@ -341,7 +342,41 @@ export default class Calendar extends React.Component<ICalendarProps, ICalendarS
               <div>
                 {this.state.isloading ? <Spinner size={SpinnerSize.large} label={strings.LoadingEventsLabel} /> :
                   <div className={styles.container}>
-                    <BigCalendar
+                    <OriCalendar
+                      dayPropGetter = {this.dayPropGetter}
+                      localizer={localizer}
+                      selectable
+                      events={this.state.eventData}
+                      startAccessor="EventDate"
+                      endAccessor="EndDate"
+                      eventPropGetter={this.eventStyleGetter}
+                      onSelectSlot={this.onSelectSlot}
+                      components={{
+                        event: this.renderEvent
+                      }}
+                      onSelectEvent={this.onSelectEvent}
+                      defaultDate={moment().startOf('day').toDate()}
+                      views={{
+                        day: true,
+                        week: true,
+                        month: true,
+                        agenda: true,
+                        work_week: Year
+                      }}
+                      messages={
+                        {
+                          'today': strings.todayLabel,
+                          'previous': strings.previousLabel,
+                          'next': strings.nextLabel,
+                          'month': strings.monthLabel,
+                          'week': strings.weekLabel,
+                          'day': strings.dayLable,
+                          'showMore': total => `+${total} ${strings.showMore}`,
+                          'work_week': strings.yearHeaderLabel
+                        }
+                      }
+                    />
+                    {/*<BigCalendar
                       dayPropGetter = {this.dayPropGetter}
                       localizer={localizer}
                       selectable
@@ -356,13 +391,13 @@ export default class Calendar extends React.Component<ICalendarProps, ICalendarS
                       }}
                       onSelectEvent={this.onSelectEvent}
                       defaultDate={moment().startOf('day').toDate()}
-                      /*views={{
-                        day: true,
-                        week: true,
-                        month: true,
-                        agenda: true,
-                        work_week: false
-                      }}*/
+                      //views={{
+                      //  day: true,
+                      //  week: true,
+                      //  month: true,
+                     //   agenda: true,
+                     //  work_week: false
+                    //  }}
                       //views={['month','week','day','agenda']}
                       messages={
                         {
@@ -375,7 +410,7 @@ export default class Calendar extends React.Component<ICalendarProps, ICalendarS
                           'showMore': total => `+${total} ${strings.showMore}`,
                         }
                       }
-                    />
+                    />*/}
                   </div>
                 }
               </div>
diff --git a/samples/react-calendar/src/webparts/calendar/components/Year.module.scss b/samples/react-calendar/src/webparts/calendar/components/Year.module.scss
new file mode 100644
index 000000000..d1bd62b1d
--- /dev/null
+++ b/samples/react-calendar/src/webparts/calendar/components/Year.module.scss
@@ -0,0 +1,50 @@
+@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
+
+.year {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.month {
+  margin: 5px 5px 15px 5px;
+}
+
+.monthName {
+  color: $ms-color-themeDark;
+  //color: #ccbe88;
+  font-weight: bold;
+}
+
+.day {
+  display: inline-block;
+  width: 30px;
+  height: 30px;
+  text-align: center;
+  line-height: 30px;
+}
+
+.date {
+  width: 30px;
+  height: 30px;
+  background: white;
+  border-radius: 50px;
+  border: none;
+  outline: none;
+}
+
+.date.inMonth:hover {
+  cursor: pointer;
+  //background: #ccbe88;
+  background: $ms-color-themeDark;
+}
+
+.today {
+  //background: #ccbe88;
+  background: $ms-color-themeDark;
+}
+
+.date.prev-month,
+.date.next-month {
+  color: grey;
+}
\ No newline at end of file
diff --git a/samples/react-calendar/src/webparts/calendar/components/Year.tsx b/samples/react-calendar/src/webparts/calendar/components/Year.tsx
index e4f500e6d..376f6d879 100644
--- a/samples/react-calendar/src/webparts/calendar/components/Year.tsx
+++ b/samples/react-calendar/src/webparts/calendar/components/Year.tsx
@@ -1,73 +1,75 @@
-import React from 'react'
-import moment from 'moment'
-
-import dates from 'react-big-calendar/lib/utils/dates'
-import { navigate } from 'react-big-calendar/lib/utils/constants'
+import React from 'react';
+import moment from 'moment';
+import * as dates from 'date-arithmetic';
+import styles from './Year.module.scss';
+import { navigate } from 'react-big-calendar/lib/utils/constants';
+import { css } from 'office-ui-fabric-react';
 
 function createCalendar(currentDate) {
   if (!currentDate) {
-    currentDate = moment()
+    currentDate = moment();
   } else {
-    currentDate = moment(currentDate)
+    currentDate = moment(currentDate);
   }
 
-  const first = currentDate.clone().startOf('month')
-  const last = currentDate.clone().endOf('month')
-  const weeksCount = Math.ceil((first.day() + last.date()) / 7)
-  //const a = { currentDate, first, last };
-  const calendar = [currentDate, first, last];
+  const first = currentDate.clone().startOf('month');
+  const last = currentDate.clone().endOf('month');
+  const weeksCount = Math.ceil((first.day() + last.date()) / 7);
+  let calendar:any = [];
+  calendar.currentDate = currentDate;
+  calendar.last = last;
+  calendar.first = first;
 
   for (let weekNumber = 0; weekNumber < weeksCount; weekNumber++) {
-    const week = []
-    calendar.push(week)
-    //calendar.year = currentDate.year()
-    //calendar.month = currentDate.month()
+    const week = [];
+    calendar.push(week);
+    calendar.year = currentDate.year();
+    calendar.month = currentDate.month();
 
     for (let day = 7 * weekNumber; day < 7 * (weekNumber + 1); day++) {
-      const date = currentDate.clone().set('date', day + 1 - first.day())
-      date.calendar = calendar
-      week.push(date)
+      const date = currentDate.clone().set('date', day + 1 - first.day());
+      date.calendar = calendar;
+      week.push(date);
     }
   }
-
-  return calendar
+  return calendar;
 }
 
 function CalendarDate(props) {
-  const { dateToRender, dateOfMonth } = props
+  const { dateToRender, dateOfMonth } = props;
   const today =
     dateToRender.format('YYYY-MM-DD') === moment().format('YYYY-MM-DD')
       ? 'today'
-      : ''
+      : '';
 
   if (dateToRender.month() < dateOfMonth.month()) {
     return (
-      <button disabled={true} className="date prev-month">
+      <button disabled={true} className={css(styles.date, styles["prev-month"])}>
         {dateToRender.date()}
       </button>
-    )
+    );
   }
 
   if (dateToRender.month() > dateOfMonth.month()) {
     return (
-      <button disabled={true} className="date next-month">
+      <button disabled={true} className={css(styles.date, styles["next-month"])}>
         {dateToRender.date()}
       </button>
-    )
+    );
   }
 
   return (
     <button
-      className={`date in-month ${today}`}
-      onClick={() => props.onClick(dateToRender)}>
+      className={`${css(styles.date, styles.inMonth)} ${today}`}
+      onClick={(e) => props.onClick(e, dateToRender)}>
       {dateToRender.date()}
     </button>
-  )
+  );
 }
 
-
 export interface IYearCalendarProps {
     date: Date;
+    onDrillDown: (date: any, view?: string) => void;
 }
 
 export interface IYearCalendarState {
@@ -82,7 +84,6 @@ export interface ICalendar {
     month: any;
 }
 
-
 class YearCalendar extends React.Component<IYearCalendarProps, IYearCalendarState> {
     public constructor(props) {
         super(props);
@@ -90,30 +91,33 @@ class YearCalendar extends React.Component<IYearCalendarProps, IYearCalendarStat
         this.state = {
             calendar: undefined
         };
+         
+        this.openView = this.openView.bind(this);
   }
 
   public componentDidMount() {
-    this.setState({ calendar: createCalendar(this.props.date) })
+    this.setState({ calendar: createCalendar(this.props.date) });
   }
 
   public componentDidUpdate(prevProps) {
     if (this.props.date !== prevProps.date) {
-      this.setState({ calendar: createCalendar(this.props.date) })
+      this.setState({ calendar: createCalendar(this.props.date) });
     }
   }
 
-  render() {
+  public render() {
     if (!this.state.calendar) {
-      return null
+      return null;
     }
 
     return (
-      <div className="month">
-        <div className="month-name">
-          {this.state.calendar.currentDate.format('MMMM').toUpperCase()}
+      <div className={styles.month}>
+        <div className={styles.monthName}>
+          {/*this.state.calendar.currentDate.format('MMMM').toUpperCase()*/}
+          {this.state.calendar.currentDate.lang("en").format('MMMM','en').toUpperCase()}
         </div>
         {['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((day, index) => (
-          <span key={index} className="day">
+          <span key={index} className={styles.day}>
             {day}
           </span>
         ))}
@@ -124,62 +128,75 @@ class YearCalendar extends React.Component<IYearCalendarProps, IYearCalendarStat
                 key={date.date()}
                 dateToRender={date}
                 dateOfMonth={this.state.calendar.currentDate}
-                onClick={date =>
-                  alert(`Will go to daily-view of ${date.format('YYYY-MM-DD')}`)
+                onClick={(e,obj) => {
+                  this.openView(obj.toDate(), "day", e) //open day-view
+                  }
                 }
               />
             ))}
           </div>
-        ))}
+              ))}
       </div>
-    )
+    );
   }
+
+  private openView = (date, view, e) => {
+    e.preventDefault()
+    this.props.onDrillDown(date, view);
+  }
+
 }
 
-
-
 export interface IYearProps {
-    date: any;
+   date: string;
+   onDrillDown: (date: any, view?: string) => void;
 }
 
-class Year extends React.Component<IYearProps> {
 
+class Year extends React.Component<IYearProps> {
     private range = date => {
-        return [dates.startOf(date, 'year')]
-      }
+      return [dates.startOf(date, 'year')];
+    }
     
-    private navigate = (date, action) => {
+    public static navigate = (date, action) => {
         switch (action) {
           case navigate.PREVIOUS:
-            return dates.add(date, -1, 'year')
+            return dates.add(date, -1, 'year');
       
           case navigate.NEXT:
-            return dates.add(date, 1, 'year')
+            return dates.add(date, 1, 'year');
       
           default:
-            return date
+            return date;
         }
-      }
+    }
 
-    //private title = (date, { localizer }) => {
-    //    localizer.format(date, 'yearHeaderFormat');
-    //}
+  public static title = (date, calendar ) => {
+      return calendar.localizer.format(date, "YYYY");
+    }
+  
+  private handleHeadingClick = (date, view) => {
+      this.props.onDrillDown(date, view);
+  }
 
   public render() {
-    let { date, ...props } = this.props
-    let range = this.range(date)
-    const months = []
-    const firstMonth = dates.startOf(date, 'year')
+    let { date, ...props } = this.props;
+    let range = this.range(date);
+    const months = [];
+    const firstMonth = dates.startOf(date, 'year');
 
     for (let i = 0; i < 12; i++) {
       months.push(
-        <YearCalendar key={i + 1} date={dates.add(firstMonth, i, 'month')} />
-      )
+        <YearCalendar 
+          key={i + 1} 
+          date={dates.add(firstMonth, i, 'month')}
+          onDrillDown={this.handleHeadingClick}
+        />
+      );
     }
 
-    return <div className="year">{months.map(month => month)}</div>
+    return <div className={styles.year}>{months.map(month => month)}</div>;
   }
 }
 
-
-export default Year
+export default Year;
diff --git a/samples/react-calendar/src/webparts/calendar/loc/en-us.js b/samples/react-calendar/src/webparts/calendar/loc/en-us.js
index 1e232061b..f5eb11cbf 100644
--- a/samples/react-calendar/src/webparts/calendar/loc/en-us.js
+++ b/samples/react-calendar/src/webparts/calendar/loc/en-us.js
@@ -108,6 +108,7 @@ define([], function () {
     dayLable: "Day",
     agenda: "Agenda",
     monthLabel: "Month",
+    yearHeaderLabel: "Year",
     todayLabel: "Today",
     previousLabel: "Previous",
     nextLabel: "Next",
diff --git a/samples/react-calendar/src/webparts/calendar/loc/mystrings.d.ts b/samples/react-calendar/src/webparts/calendar/loc/mystrings.d.ts
index 238de9155..c2d23921f 100644
--- a/samples/react-calendar/src/webparts/calendar/loc/mystrings.d.ts
+++ b/samples/react-calendar/src/webparts/calendar/loc/mystrings.d.ts
@@ -104,6 +104,7 @@ declare interface ICalendarWebPartStrings {
   DescriptionFieldLabel: string;
   SiteUrlFieldLabel: string;
   ListFieldLabel: string;
+  yearHeaderLabel: string;
   monthLabel: string;
   weekLabel: string;
   dayLable: string;

From 20920c25323d3fe0580449c99187a19b0a2ed01f Mon Sep 17 00:00:00 2001
From: Abderahman88 <rags_place@hotmail.com>
Date: Wed, 21 Oct 2020 21:39:13 +0100
Subject: [PATCH 3/6] change styles year-component

---
 .../webparts/calendar/components/Calendar.tsx | 39 +------------------
 .../calendar/components/Year.module.scss      | 11 +++---
 .../src/webparts/calendar/components/Year.tsx | 11 +++---
 3 files changed, 12 insertions(+), 49 deletions(-)

diff --git a/samples/react-calendar/src/webparts/calendar/components/Calendar.tsx b/samples/react-calendar/src/webparts/calendar/components/Calendar.tsx
index f807fb583..c511c767f 100644
--- a/samples/react-calendar/src/webparts/calendar/components/Calendar.tsx
+++ b/samples/react-calendar/src/webparts/calendar/components/Calendar.tsx
@@ -12,7 +12,7 @@ import { CommunicationColors ,  FluentCustomizations, FluentTheme  } from '@uifa
 import CalendarToolbar from './CustomToolbar';
 import Year from './Year';
 
-import { Calendar as OriCalendar, momentLocalizer  } from 'react-big-calendar';
+import { Calendar as MyCalendar, momentLocalizer  } from 'react-big-calendar';
 
 import {
   Customizer,
@@ -342,7 +342,7 @@ export default class Calendar extends React.Component<ICalendarProps, ICalendarS
               <div>
                 {this.state.isloading ? <Spinner size={SpinnerSize.large} label={strings.LoadingEventsLabel} /> :
                   <div className={styles.container}>
-                    <OriCalendar
+                    <MyCalendar
                       dayPropGetter = {this.dayPropGetter}
                       localizer={localizer}
                       selectable
@@ -376,41 +376,6 @@ export default class Calendar extends React.Component<ICalendarProps, ICalendarS
                         }
                       }
                     />
-                    {/*<BigCalendar
-                      dayPropGetter = {this.dayPropGetter}
-                      localizer={localizer}
-                      selectable
-                      events={this.state.eventData}
-                      startAccessor="EventDate"
-                      endAccessor="EndDate"
-                      eventPropGetter={this.eventStyleGetter}
-                      onSelectSlot={this.onSelectSlot}
-                      components={{
-                        event: this.renderEvent,
-                        toolbar: CalendarToolbar,
-                      }}
-                      onSelectEvent={this.onSelectEvent}
-                      defaultDate={moment().startOf('day').toDate()}
-                      //views={{
-                      //  day: true,
-                      //  week: true,
-                      //  month: true,
-                     //   agenda: true,
-                     //  work_week: false
-                    //  }}
-                      //views={['month','week','day','agenda']}
-                      messages={
-                        {
-                          'today': strings.todayLabel,
-                          'previous': strings.previousLabel,
-                          'next': strings.nextLabel,
-                          'month': strings.monthLabel,
-                          'week': strings.weekLabel,
-                          'day': strings.dayLable,
-                          'showMore': total => `+${total} ${strings.showMore}`,
-                        }
-                      }
-                    />*/}
                   </div>
                 }
               </div>
diff --git a/samples/react-calendar/src/webparts/calendar/components/Year.module.scss b/samples/react-calendar/src/webparts/calendar/components/Year.module.scss
index d1bd62b1d..2b2896eb3 100644
--- a/samples/react-calendar/src/webparts/calendar/components/Year.module.scss
+++ b/samples/react-calendar/src/webparts/calendar/components/Year.module.scss
@@ -12,7 +12,6 @@
 
 .monthName {
   color: $ms-color-themeDark;
-  //color: #ccbe88;
   font-weight: bold;
 }
 
@@ -35,16 +34,16 @@
 
 .date.inMonth:hover {
   cursor: pointer;
-  //background: #ccbe88;
   background: $ms-color-themeDark;
+  color: white;
+  font-weight: bold;
 }
 
 .today {
-  //background: #ccbe88;
   background: $ms-color-themeDark;
 }
 
-.date.prev-month,
-.date.next-month {
+.date.prevMonth,
+.date.nextMonth {
   color: grey;
-}
\ No newline at end of file
+}
diff --git a/samples/react-calendar/src/webparts/calendar/components/Year.tsx b/samples/react-calendar/src/webparts/calendar/components/Year.tsx
index 376f6d879..d8cfa856d 100644
--- a/samples/react-calendar/src/webparts/calendar/components/Year.tsx
+++ b/samples/react-calendar/src/webparts/calendar/components/Year.tsx
@@ -44,7 +44,7 @@ function CalendarDate(props) {
 
   if (dateToRender.month() < dateOfMonth.month()) {
     return (
-      <button disabled={true} className={css(styles.date, styles["prev-month"])}>
+      <button disabled={true} className={css(styles.date, styles["prevMonth"])}>
         {dateToRender.date()}
       </button>
     );
@@ -52,7 +52,7 @@ function CalendarDate(props) {
 
   if (dateToRender.month() > dateOfMonth.month()) {
     return (
-      <button disabled={true} className={css(styles.date, styles["next-month"])}>
+      <button disabled={true} className={css(styles.date, styles["nextMonth"])}>
         {dateToRender.date()}
       </button>
     );
@@ -113,8 +113,7 @@ class YearCalendar extends React.Component<IYearCalendarProps, IYearCalendarStat
     return (
       <div className={styles.month}>
         <div className={styles.monthName}>
-          {/*this.state.calendar.currentDate.format('MMMM').toUpperCase()*/}
-          {this.state.calendar.currentDate.lang("en").format('MMMM','en').toUpperCase()}
+          {this.state.calendar.currentDate.format('MMMM').toUpperCase()}
         </div>
         {['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((day, index) => (
           <span key={index} className={styles.day}>
@@ -129,7 +128,7 @@ class YearCalendar extends React.Component<IYearCalendarProps, IYearCalendarStat
                 dateToRender={date}
                 dateOfMonth={this.state.calendar.currentDate}
                 onClick={(e,obj) => {
-                  this.openView(obj.toDate(), "day", e) //open day-view
+                  this.openView(obj.toDate(), "day", e); //open day-view
                   }
                 }
               />
@@ -141,7 +140,7 @@ class YearCalendar extends React.Component<IYearCalendarProps, IYearCalendarStat
   }
 
   private openView = (date, view, e) => {
-    e.preventDefault()
+    e.preventDefault();
     this.props.onDrillDown(date, view);
   }
 

From c576451685f8016d16cc14492a0ac8050cb1ea4e Mon Sep 17 00:00:00 2001
From: Abderahman88 <rags_place@hotmail.com>
Date: Wed, 21 Oct 2020 21:56:54 +0100
Subject: [PATCH 4/6] update package-solution.json

---
 samples/react-calendar/config/package-solution.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/samples/react-calendar/config/package-solution.json b/samples/react-calendar/config/package-solution.json
index 90bb4c496..f84532de5 100644
--- a/samples/react-calendar/config/package-solution.json
+++ b/samples/react-calendar/config/package-solution.json
@@ -3,7 +3,7 @@
   "solution": {
     "name": "react-calendar-client-side-solution",
     "id": "3a13208b-3874-4036-9262-4edd22e88187",
-    "version": "1.0.4.0",
+    "version": "1.0.5.0",
     "includeClientSideAssets": true,
     "skipFeatureDeployment": true,
     "isDomainIsolated": false

From ed784cc1299d77dd71c8be329c3da6feae62e8fb Mon Sep 17 00:00:00 2001
From: Abderahman88 <rags_place@hotmail.com>
Date: Wed, 21 Oct 2020 22:05:15 +0100
Subject: [PATCH 5/6] remove comments

---
 .../calendar/components/CustomToolbar.tsx     | 27 ++-----------------
 .../webparts/calendar/components/Toolbar.jsx  | 10 +++----
 2 files changed, 6 insertions(+), 31 deletions(-)

diff --git a/samples/react-calendar/src/webparts/calendar/components/CustomToolbar.tsx b/samples/react-calendar/src/webparts/calendar/components/CustomToolbar.tsx
index b68e1d3d8..70504bd10 100644
--- a/samples/react-calendar/src/webparts/calendar/components/CustomToolbar.tsx
+++ b/samples/react-calendar/src/webparts/calendar/components/CustomToolbar.tsx
@@ -3,7 +3,6 @@ import { css } from 'office-ui-fabric-react';
 import PropTypes from 'prop-types';
 import { View, Views, Navigate, Messages } from "react-big-calendar";
 import * as strings from 'CalendarWebPartStrings';
-//require('./calendar.css');
 
 export interface ICustomToolbarProps {
     date: Date;
@@ -44,33 +43,13 @@ export default class CalendarToolbar extends React.Component<ICustomToolbarProps
         this.setState({activeView: view});
     }
 
-
-    /*private viewNamesGroup = (messages) => {
-        let viewNames = this.props.views
-        const view = this.props.view
-    
-        if (viewNames.length > 1) {
-          return viewNames.map(name => (
-            <button
-              type="button"
-              key={name}
-              className={css({ 'rbc-active': view === name })}
-              onClick={this.view.bind(null, name)}
-            >
-              {messages[name]}
-            </button>
-          ))
-        }
-    }*/
-
     public render() {
             const {activeView} = this.state;
 
             return (
                 <div className="rbc-toolbar">
                     <div className="rbc-btn-group">
-                        {/*<button type="button" onClick={() => this.navigate('TODAY')}>{strings.todayLabel}</button>*/}
-                        <button type="button" onClick={() => this.navigate('TODAY')}>VANDAAGHAHA</button>
+                        <button type="button" onClick={() => this.navigate('TODAY')}>{strings.todayLabel}</button>
                         <button type="button" onClick={() => this.navigate('PREV')}>{strings.previousLabel}</button>
                         <button type="button" onClick={() => this.navigate('NEXT')}>{strings.nextLabel}</button>
                     </div>
@@ -79,11 +58,9 @@ export default class CalendarToolbar extends React.Component<ICustomToolbarProps
                         <button type="button" className={css({ 'rbc-active': activeView === "month" })} onClick={() => this.view('month')}>{strings.monthLabel}</button>
                         <button type="button" className={css({ 'rbc-active': activeView === "week" })} onClick={() => this.view('week')}>{strings.weekLabel}</button>
                         <button type="button" className={css({ 'rbc-active': activeView === "day" })} onClick={() => this.view('day')}>{strings.dayLable}</button>
-                        <button type="button" className={css({ 'rbc-active': activeView === "year" })} onClick={() => this.view('year')}>{"YEAR"}</button>
+                        <button type="button" className={css({ 'rbc-active': activeView === "year" })} onClick={() => this.view('year')}>{strings.yearHeaderLabel}</button>
                         <button type="button" className={css({ 'rbc-active': activeView === "agenda" })} onClick={() => this.view('agenda')}>{strings.agenda}</button>
                     </div>
-
-                    {/*<span className="rbc-btn-group">{this.viewNamesGroup(this.props.localizer.messages)}</span>*/}
                 </div>
             );
     }
diff --git a/samples/react-calendar/src/webparts/calendar/components/Toolbar.jsx b/samples/react-calendar/src/webparts/calendar/components/Toolbar.jsx
index 45092a21a..0d4d85c84 100644
--- a/samples/react-calendar/src/webparts/calendar/components/Toolbar.jsx
+++ b/samples/react-calendar/src/webparts/calendar/components/Toolbar.jsx
@@ -10,11 +10,10 @@ export default class CalendarToolbar extends Toolbar {
 	}
 
 	render() {
-£		return (
+		return (
 			<div>
 				<div className="rbc-btn-group">
-					{/*<button type="button" onClick={() => this.navigate('TODAY')}>{strings.todayLabel}</button>*/}
-					<button type="button" onClick={() => this.navigate('TODAY')}>VANDAAGHAHA</button>
+					<button type="button" onClick={() => this.navigate('TODAY')}>{strings.todayLabel}</button>
 					<button type="button" onClick={() => this.navigate('PREV')}>{strings.previousLabel}</button>
 					<button type="button" onClick={() => this.navigate('NEXT')}>{strings.nextLabel}</button>
 				</div>
@@ -23,11 +22,10 @@ export default class CalendarToolbar extends Toolbar {
 					<button type="button" onClick={this.view.bind(null, 'month')}>{strings.monthLabel}</button>
 					<button type="button" onClick={this.view.bind(null, 'week')}>{strings.weekLabel}</button>
 					<button type="button" onClick={this.view.bind(null, 'day')}>{strings.dayLable}</button>
-					<button type="button" onClick={this.view.bind(null, 'year')}>{"YEAR"}</button>
+					<button type="button" onClick={this.view.bind(null, 'year')}>{strings.yearHeaderlabel}</button>
 					<button type="button" onClick={this.view.bind(null, 'agenda')}>{strings.agenda}</button>
 				</div>
 			</div>
 		);
 	}
-}
-//module.export = CalendarToolbar;
+}
\ No newline at end of file

From d1782fd28661f9b9cc7b4f3fbd6826550fa0d621 Mon Sep 17 00:00:00 2001
From: Abderahman88 <rags_place@hotmail.com>
Date: Wed, 21 Oct 2020 22:11:46 +0100
Subject: [PATCH 6/6] change tsconfig

---
 .../src/webparts/calendar/components/Calendar.tsx             | 4 ++--
 samples/react-calendar/tsconfig.json                          | 1 -
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/samples/react-calendar/src/webparts/calendar/components/Calendar.tsx b/samples/react-calendar/src/webparts/calendar/components/Calendar.tsx
index c511c767f..544afe704 100644
--- a/samples/react-calendar/src/webparts/calendar/components/Calendar.tsx
+++ b/samples/react-calendar/src/webparts/calendar/components/Calendar.tsx
@@ -3,13 +3,13 @@ import styles from './Calendar.module.scss';
 import { ICalendarProps } from './ICalendarProps';
 import { ICalendarState } from './ICalendarState';
 import { escape } from '@microsoft/sp-lodash-subset';
-import BigCalendar from 'react-big-calendar';
+//import BigCalendar from 'react-big-calendar';
 import * as moment from 'moment';
 import * as strings from 'CalendarWebPartStrings';
 import 'react-big-calendar/lib/css/react-big-calendar.css';
 require('./calendar.css');
 import { CommunicationColors ,  FluentCustomizations, FluentTheme  } from '@uifabric/fluent-theme';
-import CalendarToolbar from './CustomToolbar';
+//import CalendarToolbar from './CustomToolbar';
 import Year from './Year';
 
 import { Calendar as MyCalendar, momentLocalizer  } from 'react-big-calendar';
diff --git a/samples/react-calendar/tsconfig.json b/samples/react-calendar/tsconfig.json
index 055b483cd..8c1f9524c 100644
--- a/samples/react-calendar/tsconfig.json
+++ b/samples/react-calendar/tsconfig.json
@@ -15,7 +15,6 @@
     "strictNullChecks": false,
     "noUnusedLocals": false,
     "allowSyntheticDefaultImports":true,
-    //"allowJs": true,
     "typeRoots": [
       "./node_modules/@types",
       "./node_modules/@microsoft"