Merge pull request #1628 from Abderahman88/CalendarImprov

calendar improvements and clean up
2020-12-04 21:59:29 -05:00 · 2020-12-04 21:59:29 -05:00 · 4f3b3464e3
parent eb5869e045 af5086c032
commit 4f3b3464e3
14 changed files with 331 additions and 258 deletions
--- a/samples/react-calendar/README.md
+++ b/samples/react-calendar/README.md
@ -126,6 +126,7 @@ Version|Date|Comments
 1.0.4|October 18, 2020|Added support for all-day events
 1.0.5|October 21, 2020|Added Year view
 1.0.6|December 3, 2020|Fixed all-day events (#1623)
+1.0.7|December 4, 2020|Fixed styling Year view + Dutch localization

 ## Disclaimer

--- a/samples/react-calendar/config/config.json
+++ b/samples/react-calendar/config/config.json
@ -16,7 +16,6 @@
  "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",
-    "CalendarToolbar": "lib/webparts/calendar/components/Toolbar.jsx"
+    "PropertyControlStrings": "node_modules/@pnp/spfx-property-controls/lib/loc/{locale}.js"
  }
 }
--- 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.6.0",
+    "version": "1.0.7.0",
    "includeClientSideAssets": true,
    "skipFeatureDeployment": true,
    "isDomainIsolated": false
--- a/samples/react-calendar/src/webparts/calendar/components/Calendar.tsx
+++ b/samples/react-calendar/src/webparts/calendar/components/Calendar.tsx
@ -3,16 +3,14 @@ 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 * 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 { CommunicationColors, FluentCustomizations, FluentTheme } from '@uifabric/fluent-theme';
 import Year from './Year';

-import { Calendar as MyCalendar, momentLocalizer  } from 'react-big-calendar';
+import { Calendar as MyCalendar, momentLocalizer } from 'react-big-calendar';

 import {
  Customizer,
@ -177,7 +175,7 @@ export default class Calendar extends React.Component<ICalendarProps, ICalendarS
      previewImages: [
        {
          // previewImageSrc: event.ownerPhoto,
-          previewIconProps: { iconName: event.fRecurrence === '0' ? 'Calendar': 'RecurringEvent', styles: { root: { color: event.color } }, className: styles.previewEventIcon },
+          previewIconProps: { iconName: event.fRecurrence === '0' ? 'Calendar' : 'RecurringEvent', styles: { root: { color: event.color } }, className: styles.previewEventIcon },
          height: 43,
        }
      ]
@ -200,7 +198,7 @@ export default class Calendar extends React.Component<ICalendarProps, ICalendarS
            </div>
            <DocumentCardDetails>
              <div className={styles.DocumentCardDetails}>
-                <DocumentCardTitle title={event.title} shouldTruncate={true} className={styles.DocumentCardTitle} styles={{ root: { color: event.color} }} />
+                <DocumentCardTitle title={event.title} shouldTruncate={true} className={styles.DocumentCardTitle} styles={{ root: { color: event.color } }} />
              </div>
              {
                moment(event.EventDate).format('YYYY/MM/DD') !== moment(event.EndDate).format('YYYY/MM/DD') ?
@ -219,7 +217,7 @@ export default class Calendar extends React.Component<ICalendarProps, ICalendarS
              <div style={{ marginTop: 20 }}>
                <DocumentCardActivity
                  activity={strings.EventOwnerLabel}
-                  people={[{ name: event.ownerName, profileImageSrc: event.ownerPhoto, initialsColor:event.color}]}
+                  people={[{ name: event.ownerName, profileImageSrc: event.ownerPhoto, initialsColor: event.color }]}
                />
              </div>
            </DocumentCardDetails>
@ -297,15 +295,15 @@ export default class Calendar extends React.Component<ICalendarProps, ICalendarS
  }


-   /**
-     *
-     * @param {*} date
-     * @memberof Calendar
-     */
-    public dayPropGetter(date: Date) {
-      return {
-          className: styles.dayPropGetter
-      };
+  /**
+    *
+    * @param {*} date
+    * @memberof Calendar
+    */
+  public dayPropGetter(date: Date) {
+    return {
+      className: styles.dayPropGetter
+    };
  }

  /**
@ -318,83 +316,83 @@ export default class Calendar extends React.Component<ICalendarProps, ICalendarS
      <Customizer {...FluentCustomizations}>


-      <div className={styles.calendar} style={{backgroundColor: 'white', padding: '20px'}}>
-        <WebPartTitle displayMode={this.props.displayMode}
-          title={this.props.title}
-          updateProperty={this.props.updateProperty} />
-        {
-          (!this.props.list || !this.props.eventStartDate.value || !this.props.eventEndDate.value) ?
-            <Placeholder iconName='Edit'
-              iconText={strings.WebpartConfigIconText}
-              description={strings.WebpartConfigDescription}
-              buttonLabel={strings.WebPartConfigButtonLabel}
-              hideButton={this.props.displayMode === DisplayMode.Read}
-              onConfigure={this.onConfigure.bind(this)} />
-            :
-            // test if has errors
-            this.state.hasError ?
-              <MessageBar messageBarType={MessageBarType.error}>
-                {this.state.errorMessage}
-              </MessageBar>
+        <div className={styles.calendar} style={{ backgroundColor: 'white', padding: '20px' }}>
+          <WebPartTitle displayMode={this.props.displayMode}
+            title={this.props.title}
+            updateProperty={this.props.updateProperty} />
+          {
+            (!this.props.list || !this.props.eventStartDate.value || !this.props.eventEndDate.value) ?
+              <Placeholder iconName='Edit'
+                iconText={strings.WebpartConfigIconText}
+                description={strings.WebpartConfigDescription}
+                buttonLabel={strings.WebPartConfigButtonLabel}
+                hideButton={this.props.displayMode === DisplayMode.Read}
+                onConfigure={this.onConfigure.bind(this)} />
              :
-              // show Calendar
-              // Test if is loading Events
-              <div>
-                {this.state.isloading ? <Spinner size={SpinnerSize.large} label={strings.LoadingEventsLabel} /> :
-                  <div className={styles.container}>
-                    <MyCalendar
-                      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
+              // test if has errors
+              this.state.hasError ?
+                <MessageBar messageBarType={MessageBarType.error}>
+                  {this.state.errorMessage}
+                </MessageBar>
+                :
+                // show Calendar
+                // Test if is loading Events
+                <div>
+                  {this.state.isloading ? <Spinner size={SpinnerSize.large} label={strings.LoadingEventsLabel} /> :
+                    <div className={styles.container}>
+                      <MyCalendar
+                        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
+                          }
                        }
-                      }
-                    />
-                  </div>
-                }
-              </div>
-        }
-        {
-          this.state.showDialog &&
-          <Event
-            event={this.state.selectedEvent}
-            panelMode={this.state.panelMode}
-            onDissmissPanel={this.onDismissPanel}
-            showPanel={this.state.showDialog}
-            startDate={this.state.startDateSlot}
-            endDate={this.state.endDateSlot}
-            context={this.props.context}
-            siteUrl={this.props.siteUrl}
-            listId={this.props.list}
-          />
-        }
-      </div>
+                      />
+                    </div>
+                  }
+                </div>
+          }
+          {
+            this.state.showDialog &&
+            <Event
+              event={this.state.selectedEvent}
+              panelMode={this.state.panelMode}
+              onDissmissPanel={this.onDismissPanel}
+              showPanel={this.state.showDialog}
+              startDate={this.state.startDateSlot}
+              endDate={this.state.endDateSlot}
+              context={this.props.context}
+              siteUrl={this.props.siteUrl}
+              listId={this.props.list}
+            />
+          }
+        </div>
      </Customizer>
    );
  }
--- a/samples/react-calendar/src/webparts/calendar/components/CustomToolbar.tsx
+++ b/samples/react-calendar/src/webparts/calendar/components/CustomToolbar.tsx
@ -1,68 +0,0 @@
-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';
-
-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});
-    }
-
-    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('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')}>{strings.yearHeaderLabel}</button>
-                        <button type="button" className={css({ 'rbc-active': activeView === "agenda" })} onClick={() => this.view('agenda')}>{strings.agenda}</button>
-                    </div>
-                </div>
-            );
-    }
-}
-
--- a/samples/react-calendar/src/webparts/calendar/components/Toolbar.jsx
+++ b/samples/react-calendar/src/webparts/calendar/components/Toolbar.jsx
@ -1,31 +0,0 @@
-import React from 'react';
-import Toolbar from 'react-big-calendar/lib/Toolbar';
-import * as strings from 'CalendarWebPartStrings';
-
-export default class CalendarToolbar extends Toolbar {
-
-	componentDidMount() {
-		const view = this.props.view;
-		console.log(view)
-	}
-
-	render() {
-		return (
-			<div>
-				<div className="rbc-btn-group">
-					<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>
-				<div className="rbc-toolbar-label">{this.props.label}</div>
-				<div className="rbc-btn-group">
-					<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')}>{strings.yearHeaderlabel}</button>
-					<button type="button" onClick={this.view.bind(null, 'agenda')}>{strings.agenda}</button>
-				</div>
-			</div>
-		);
-	}
-}
--- a/samples/react-calendar/src/webparts/calendar/components/Year.module.scss
+++ b/samples/react-calendar/src/webparts/calendar/components/Year.module.scss
@ -3,16 +3,17 @@
 .year {
  display: flex;
  flex-wrap: wrap;
-  justify-content: space-between;
+  //justify-content: space-between;
 }

 .month {
-  margin: 5px 5px 15px 5px;
+  margin: 5px 10px 15px 10px;
 }

 .monthName {
  color: $ms-color-themeDark;
  font-weight: bold;
+  margin-bottom: 10px;
 }

 .day {
@ -21,6 +22,9 @@
  height: 30px;
  text-align: center;
  line-height: 30px;
+  border: dotted 1px;
+  border-radius: 50%;
+  transform: scale(0.9, 0.9);
 }

 .date {
--- a/samples/react-calendar/src/webparts/calendar/components/Year.tsx
+++ b/samples/react-calendar/src/webparts/calendar/components/Year.tsx
@ -15,7 +15,7 @@ function createCalendar(currentDate) {
  const first = currentDate.clone().startOf('month');
  const last = currentDate.clone().endOf('month');
  const weeksCount = Math.ceil((first.day() + last.date()) / 7);
-  let calendar:any = [];
+  let calendar: any = [];
  calendar.currentDate = currentDate;
  calendar.last = last;
  calendar.first = first;
@ -68,31 +68,31 @@ function CalendarDate(props) {
 }

 export interface IYearCalendarProps {
-    date: Date;
-    onDrillDown: (date: any, view?: string) => void;
+  date: Date;
+  onDrillDown: (date: any, view?: string) => void;
 }

 export interface IYearCalendarState {
-    calendar: any;
+  calendar: any;
 }

 export interface ICalendar {
-    currentDate: any;
-    first: any;
-    last: any;
-    year: any;
-    month: any;
+  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
-        };
-         
-        this.openView = this.openView.bind(this);
+  public constructor(props) {
+    super(props);
+
+    this.state = {
+      calendar: undefined
+    };
+
+    this.openView = this.openView.bind(this);
  }

  public componentDidMount() {
@ -110,12 +110,14 @@ class YearCalendar extends React.Component<IYearCalendarProps, IYearCalendarStat
      return null;
    }

+    const weekdays: string[] = this.state.calendar.currentDate.localeData().weekdaysMin();
+
    return (
      <div className={styles.month}>
        <div className={styles.monthName}>
          {this.state.calendar.currentDate.format('MMMM').toUpperCase()}
        </div>
-        {['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((day, index) => (
+        {weekdays.map((day, index) => (
          <span key={index} className={styles.day}>
            {day}
          </span>
@ -127,14 +129,14 @@ class YearCalendar extends React.Component<IYearCalendarProps, IYearCalendarStat
                key={date.date()}
                dateToRender={date}
                dateOfMonth={this.state.calendar.currentDate}
-                onClick={(e,obj) => {
+                onClick={(e, obj) => {
                  this.openView(obj.toDate(), "day", e); //open day-view
-                  }
+                }
                }
              />
            ))}
          </div>
-              ))}
+        ))}
      </div>
    );
  }
@ -147,35 +149,35 @@ class YearCalendar extends React.Component<IYearCalendarProps, IYearCalendarStat
 }

 export interface IYearProps {
-   date: string;
-   onDrillDown: (date: any, view?: string) => void;
+  date: string;
+  onDrillDown: (date: any, view?: string) => void;
 }


 class Year extends React.Component<IYearProps> {
-    private range = date => {
-      return [dates.startOf(date, 'year')];
-    }
-    
-    public static 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 range = date => {
+    return [dates.startOf(date, 'year')];
+  }

-  public static title = (date, calendar ) => {
-      return calendar.localizer.format(date, "YYYY");
+  public static 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;
    }
-  
+  }
+
+  public static title = (date, calendar) => {
+    return calendar.localizer.format(date, "YYYY");
+  }
+
  private handleHeadingClick = (date, view) => {
-      this.props.onDrillDown(date, view);
+    this.props.onDrillDown(date, view);
  }

  public render() {
@ -186,8 +188,8 @@ class Year extends React.Component<IYearProps> {

    for (let i = 0; i < 12; i++) {
      months.push(
-        <YearCalendar 
-          key={i + 1} 
+        <YearCalendar
+          key={i + 1}
          date={dates.add(firstMonth, i, 'month')}
          onDrillDown={this.handleHeadingClick}
        />
--- a/samples/react-calendar/src/webparts/calendar/loc/en-us.js
+++ b/samples/react-calendar/src/webparts/calendar/loc/en-us.js
@ -104,11 +104,11 @@ define([], function () {
    BasicGroupName: "Properties",
    SiteUrlFieldLabel: "Site Url",
    ListFieldLabel: "Calendar List name",
+    yearHeaderLabel: "Year",
+    monthLabel: "Month",
    weekLabel: "Week",
    dayLable: "Day",
    agenda: "Agenda",
-    monthLabel: "Month",
-    yearHeaderLabel: "Year",
    todayLabel: "Today",
    previousLabel: "Previous",
    nextLabel: "Next",
--- a/samples/react-calendar/src/webparts/calendar/loc/mystrings.d.ts
+++ b/samples/react-calendar/src/webparts/calendar/loc/mystrings.d.ts
@ -101,7 +101,6 @@ declare interface ICalendarWebPartStrings {
  EventPanelTitle: string;
  PropertyPaneDescription: string;
  BasicGroupName: string;
-  DescriptionFieldLabel: string;
  SiteUrlFieldLabel: string;
  ListFieldLabel: string;
  yearHeaderLabel: string;
--- a/samples/react-calendar/src/webparts/calendar/loc/nl-nl.js
+++ b/samples/react-calendar/src/webparts/calendar/loc/nl-nl.js
@ -0,0 +1,143 @@
+define([], function () {
+    return {
+      WeeksOnLabel: "Weken op",
+      PaternLabel: "Patroon",
+      OcurrencesLabel: "Gebeurtenissen",
+      dateRangeLabel: "Datumbereik",
+      weekEndDay: "Weekenddag",
+      weekDayLabel: "Weekdag",
+      lastLabel: "laatst",
+      fourthLabel: "vierde",
+      thirdLabel: "derde",
+      secondLabel: "tweede",
+      firstLabel: "eerste",
+      theLabel: "de",
+      MonthsLabel: "maand(-en)",
+      ofEveryLabel: "van elke ",
+      AllowedValues1to12Label: "Toegelaten waarden 1 tot 12",
+      noEndDate: "geen einddatum",
+      everyweekdays: "elke weekdagen",
+      days: "dagen",
+      every: "elke",
+      EndByLabel: "einde door",
+      EndAfterLabel: "einde na",
+      HttpErrorMessage: "Fout tijdens lezen van gebeurtenissen:",
+      CategoryPlaceHolder: "Selecteer categorie",
+      CategoryLabel: "Categorie",
+      EnDateValidationMessage: "startdatum is groter dan einddatum",
+      SartDateValidationMessage: "startdatum is groter dan einddatum",
+      eventSelectDatesLabel: "Toon enkel evenementen tussen volgende data",
+      ConfirmeDeleteMessage: "Evenement zeker verwijderen ? Bij recurrente evenementen worden alle gekoppelde evenementen ook verwijderd. ",
+      DialogConfirmDeleteTitle: "Verwijder evenement",
+      SpinnerDeletingLabel: "Bezig met verwijderen...",
+      DialogCloseButtonLabel: "Annuleren",
+      DialogConfirmDeleteLabel: "Verwijderen",
+      SaveButtonLabel: "Opslaan",
+      DeleteButtonLabel: "Verwijderen",
+      CancelButtonLabel: "Annuleren",
+      LoadingEventsLabel: "Laden evenementen...",
+      WebPartConfigButtonLabel: "Configureer",
+      WebpartConfigDescription: "Configureer lijst kalendar ",
+      WebpartConfigIconText: "Configureer uw Calendar Web Part",
+      EventOwnerLabel: "evenement-eigenaar",
+      InvalidDateFormat: "Ongeldig datumformaat.",
+      IsRequired: "Veld is verplicht.",
+      CloseDate: "Sluit date picker",
+      NextYear: "Ga naar volgend jaar",
+      PrevYear: "Ga naar vorig jaar",
+      NextMonth: "Ga naar volgende maand",
+      PrevMonth: "Ga naar vorige maand",
+      GoToDay: "Ga naar vandaag",
+      ShortDay_Saunday: "Z",
+      ShortDay_Friday: "V",
+      ShortDay_Tursday: "D",
+      ShortDay_W: "W",
+      ShortDay_T: "D",
+      ShortDay_M: "M",
+      ShortDay_S: "Z",
+      Saturday: "Zaterdag",
+      Friday: "Vrijdag",
+      Thursday: "Donderdag",
+      Wednesday: "Woensdag",
+      Tuesday: "Dinsdag",
+      Monday: "Maandag",
+      Sunday: "Zondag",
+      Jan:"Jan",
+      Feb:"Feb",
+      Mar:"Maa",
+      Apr:"Apr",
+      May:"Mei",
+      Jun:"Jun",
+      Jul:"Jul",
+      Aug:"Aug",
+      Sep:"Sep",
+      Oct:"Okt",
+      Nov:"Nov",
+      Dez:"Dec",
+      December: "December",
+      November: "November",
+      October: "Oktober",
+      September: "September",
+      August: "Augustus",
+      July: "Juli",
+      June: "Juni",
+      May: "Mei",
+      April: "April",
+      March: "Maart",
+      February: "Februari",
+      January: "Januari",
+      LocationLabel: "Locatie zoeken en map",
+      LocationTextLabel: "Locatie",
+      AttendeesLabel: "Deelnemers",
+      EndMinLabel: "Min",
+      EndHourLabel: "Uur",
+      EndDateLabel: "Einddatum",
+      EndDatePlaceHolder: "Selecteer een datum...",
+      StartMinLabel: "Min",
+      StartHourLabel: "Uur",
+      StartDateLabel: "Startdatum",
+      StartDatePlaceHolder: "Selecteer een datum...",
+      EventTitleErrorMessage: "Titel v/h evenement is verplicht.",
+      EventTitleLabel: "Evenement titel",
+      EventPanelTitle: "Evenement toevoegen/editeren",
+      PropertyPaneDescription: "Kalender",
+      BasicGroupName: "Eigenschappen",
+      SiteUrlFieldLabel: "Site Url",
+      ListFieldLabel: "Kalenderlijst",
+      yearHeaderLabel: "Jaar",
+      monthLabel: "Maand",
+      weekLabel: "Week",
+      dayLable: "Dag",
+      agenda: "Agenda",
+      todayLabel: "Vandaag",
+      previousLabel: "Vorige",
+      nextLabel: "Volgende",
+      showMore: "meer",
+      recurrenceEventLabel: "Recurrent evenement",
+      editRecurrenceSeries: "Edit Recurrence Series",
+      allDayEventLabel: "Hele dag evenement ?",
+      ifRecurrenceLabel: "Recurrentie ?",
+      onLabel: "Aan",
+      offLabel: "Uit",
+      eventDescriptionLabel: "Event beschrijving",
+      recurrenceInformationLabel: "Recurrentie informatie",
+      dailyLabel: "Dagelijks",
+      weeklyLabel: "Wekelijks",
+      monthlyLabel: "Maandelijks",
+      yearlyLabel: "Jaarlijks",
+      patternLabel: "Patroon",
+      dateRangeLabel: "Datumbereik",
+      occurrencesLabel: "gebeurtenissen",
+      ofMonthLabel: "van",
+      everyFormat: "Elke {0} ",
+      everySecondFormat: "Elke {0} ",
+      everyNthFormat: "Elke {0} ",
+      onTheDayFormat: "op de {0}de dag",
+      onTheLabel: "op de",
+      theSuffix: "",
+      yearLabel: "jaar",
+      theNthOfMonthFormat: "op {0} {1}",
+      onTheDayTypeFormat: "op de {0} {1}"
+    }
+  });
+  
--- a/samples/react-calendar/src/webparts/calendar/loc/pt-pt.js
+++ b/samples/react-calendar/src/webparts/calendar/loc/pt-pt.js
@ -100,17 +100,43 @@ define([], function() {
    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'
+    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',
+    yearLabel: "Ano",
+    monthLabel: 'Mês',
+    weekLabel: 'Semana',
+    dayLable: 'Dia',
+    agenda: 'Agenda',
+    todayLabel: 'Hoje',
+    previousLabel: 'Anterior',
+    nextLabel: "Seguinte",
+    showMore: 'mais',
+    recurrenceEventLabel: "Recurrence Event",
+    editRecurrenceSeries: "Edit Recurrence Series",
+    allDayEventLabel: "All Day Event ?",
+    ifRecurrenceLabel: "Recurrence ?",
+    onLabel: "On",
+    offLabel: "Off",
+    eventDescriptionLabel: "Event Description",
+    recurrenceInformationLabel: "Recurrence Information",
+    dailyLabel: "Daily",
+    weeklyLabel: "Weekly",
+    monthlyLabel: "Monthly",
+    yearlyLabel: "Yearly",
+    patternLabel: "Pattern",
+    dateRangeLabel: "Date Range",
+    occurrencesLabel: "occurrences",
+    ofMonthLabel: "of",
+    everyFormat: "Every {0} ",
+    everySecondFormat: "Every {0} ",
+    everyNthFormat: "Every {0} ",
+    onTheDayFormat: "on the {0}th day",
+    onTheLabel: "on the",
+    theSuffix: "",
+    yearLabel: "year",
+    theNthOfMonthFormat: "on {0} {1}",
+    onTheDayTypeFormat: "on the {0} {1}"
  }
 });
--- a/samples/react-calendar/src/webparts/calendar/loc/sv-se.js
+++ b/samples/react-calendar/src/webparts/calendar/loc/sv-se.js
@ -104,10 +104,11 @@ define([], function () {
      BasicGroupName: "Egenskaper",
      SiteUrlFieldLabel: "Site Url",
      ListFieldLabel: "Kalenderlista",
+      yearLabel: "År",
+      monthLabel: "Månad",
      weekLabel: "Vecka",
      dayLable: "Dag",
      agenda: "Agenda",
-      monthLabel: "Månad",
      todayLabel: "Idag",
      previousLabel: "Föregående",
      nextLabel: "Nästa",
--- a/samples/react-calendar/tsconfig.json
+++ b/samples/react-calendar/tsconfig.json
@ -30,8 +30,7 @@
    ]
  },
  "include": [
-    "src/**/*.ts",
-    "src/**/*.jsx"
+    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules",