From 8a12f697f8164e04f476503ce43c0767235886a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Anders=20M=C3=B6rtsell?= <anders.mortsell@sogeti.se>
Date: Mon, 19 Aug 2019 14:13:58 +0200
Subject: [PATCH] Fixed localization where missing

---
 .../src/controls/Event/event.tsx              | 27 +++++--
 .../EventRecurrenceInfo.tsx                   | 10 +--
 .../EventRecurrenceInfoDaily.tsx              | 28 +++++--
 .../EventRecurrenceInfoMonthly.tsx            | 14 +++-
 .../EventRecurrenceInfoWeekly.tsx             | 34 ++++++---
 .../EventRecurrenceInfoYearly.tsx             | 16 +++-
 samples/react-calendar/src/utils/dateUtils.ts |  9 +++
 .../src/webparts/calendar/loc/en-us.js        | 66 ++++++++++-------
 .../src/webparts/calendar/loc/mystrings.d.ts  | 19 ++++-
 .../src/webparts/calendar/loc/sv-se.js        | 74 +++++++++++--------
 10 files changed, 207 insertions(+), 90 deletions(-)
 create mode 100644 samples/react-calendar/src/utils/dateUtils.ts

diff --git a/samples/react-calendar/src/controls/Event/event.tsx b/samples/react-calendar/src/controls/Event/event.tsx
index 6a32afecd..ec2b132fd 100644
--- a/samples/react-calendar/src/controls/Event/event.tsx
+++ b/samples/react-calendar/src/controls/Event/event.tsx
@@ -43,12 +43,13 @@ import spservices from '../../services/spservices';
 import { Map, ICoordinates, MapType } from "@pnp/spfx-controls-react/lib/Map";
 import { EventRecurrenceInfo } from '../../controls/EventRecurrenceInfo/EventRecurrenceInfo';
 import { getGUID } from '@pnp/common';
+import { toLocaleShortDateString } from '../../utils/dateUtils';
 
 const DayPickerStrings: IDatePickerStrings = {
   months: [strings.January, strings.February, strings.March, strings.April, strings.May, strings.June, strings.July, strings.August, strings.September, strings.October, strings.November, strings.December],
   shortMonths: [strings.Jan, strings.Feb, strings.Mar, strings.Apr, strings.May, strings.Jun, strings.Jul, strings.Aug, strings.Sep, strings.Oct, strings.Nov, strings.Dez],
   days: [strings.Sunday, strings.Monday, strings.Tuesday, strings.Wednesday, strings.Thursday, strings.Friday, strings.Saturday],
-  shortDays: [strings.ShortDay_S, strings.ShortDay_M, strings.ShortDay_T, strings.ShortDay_W, strings.ShortDay_Tursday, strings.ShortDay_Friday, strings.ShortDay_Saunday],
+  shortDays: [strings.ShortDay_S, strings.ShortDay_M, strings.ShortDay_T, strings.ShortDay_W, strings.ShortDay_Thursday, strings.ShortDay_Friday, strings.ShortDay_Sunday],
   goToToday: strings.GoToDay,
   prevMonthAriaLabel: strings.PrevMonth,
   nextMonthAriaLabel: strings.NextMonth,
@@ -527,6 +528,16 @@ export class Event extends React.Component<IEventProps, IEventState> {
     this.setState({ startDate: newDate });
   }
 
+  /**
+   * 
+   * @private
+   * @param date 
+   * @memberof Event
+   */
+  private formatDate(date: Date) {
+    return toLocaleShortDateString(date);
+  }
+
   /**
    * @private
    * @param {Date} newDate
@@ -615,14 +626,14 @@ export class Event extends React.Component<IEventProps, IEventState> {
                 {
                   (this.state.eventData && (this.state.eventData.EventType !== "0" && this.state.showRecurrenceSeriesInfo !== true)) ?
                   <div>
-                      <h2 style={{ display: 'inline-block', verticalAlign: 'top' }}>Recurrence Event</h2>
+                      <h2 style={{ display: 'inline-block', verticalAlign: 'top' }}>{ strings.recurrenceEventLabel }</h2>
                       <DefaultButton
                         style={{ display: 'inline-block', marginLeft: '330px', verticalAlign: 'top', width: 'auto' }}
                         iconProps={{ iconName: 'RecurringEvent' }}
                         allowDisabledFocus={true}
                         onClick={this.onEditRecurrence}
                       >
-                        Edit Recurrence Series
+                        { strings.editRecurrenceSeries }
                      </DefaultButton>
 
                     </div>
@@ -658,6 +669,7 @@ export class Event extends React.Component<IEventProps, IEventState> {
                     value={this.state.startDate}
                     label={strings.StartDateLabel}
                     onSelectDate={this.onSelectDateStart}
+                    formatDate={this.formatDate}
                     disabled={this.state.userPermissions.hasPermissionAdd || this.state.userPermissions.hasPermissionEdit ? false : true}
                     hidden={this.state.showRecurrenceSeriesInfo}
                   />
@@ -729,6 +741,7 @@ export class Event extends React.Component<IEventProps, IEventState> {
                     value={this.state.endDate}
                     label={strings.EndDateLabel}
                     onSelectDate={this.onSelectDateEnd}
+                    formatDate={this.formatDate}
                     disabled={this.state.userPermissions.hasPermissionAdd || this.state.userPermissions.hasPermissionEdit ? false : true}
                     hidden={this.state.showRecurrenceSeriesInfo}
                   />
@@ -799,9 +812,9 @@ export class Event extends React.Component<IEventProps, IEventState> {
                       <Toggle
                         defaultChecked={false}
                         inlineLabel={true}
-                        label="Recurrence ?"
-                        onText="On"
-                        offText="Off"
+                        label={ strings.ifRecurrenceLabel }
+                        onText={ strings.onLabel }
+                        offText={ strings.offLabel }
                         onChange={(ev, checked: boolean) => {
                           ev.preventDefault();
                           this.setState({ showRecurrenceSeriesInfo: checked, newRecurrenceEvent: checked });
@@ -827,7 +840,7 @@ export class Event extends React.Component<IEventProps, IEventState> {
                   )
                 }
 
-                < Label > Event Description</Label>
+                < Label > {strings.eventDescriptionLabel }</Label>
 
                 <div className={styles.description}>
                   <Editor
diff --git a/samples/react-calendar/src/controls/EventRecurrenceInfo/EventRecurrenceInfo.tsx b/samples/react-calendar/src/controls/EventRecurrenceInfo/EventRecurrenceInfo.tsx
index cab70400c..b2e545fcf 100644
--- a/samples/react-calendar/src/controls/EventRecurrenceInfo/EventRecurrenceInfo.tsx
+++ b/samples/react-calendar/src/controls/EventRecurrenceInfo/EventRecurrenceInfo.tsx
@@ -84,29 +84,29 @@ export class EventRecurrenceInfo extends React.Component<IEventRecurrenceInfoPro
 
         <div style={{ display: 'inline-block', verticalAlign: 'top' }}>
           <ChoiceGroup
-            label="Recurrence Information"
+            label={ strings.recurrenceInformationLabel }
             selectedKey={this.state.selectedRecurrenceRule}
             options={[
               {
                 key: 'daily',
                 iconProps: { iconName: 'CalendarDay' },
-                text: 'Daily'
+                text: strings.dailyLabel
               },
               {
                 key: 'weekly',
                 iconProps: { iconName: 'CalendarWeek' },
-                text: 'Weekly'
+                text: strings.weeklyLabel
               },
               {
                 key: 'monthly',
                 iconProps: { iconName: 'Calendar' },
-                text: 'Monthly',
+                text: strings.monthlyLabel,
 
               },
               {
                 key: 'yearly',
                 iconProps: { iconName: 'Calendar' },
-                text: 'Yearly',
+                text: strings.yearlyLabel,
               }
             ]}
             onChange={this._onRecurrenceFrequenceChange}
diff --git a/samples/react-calendar/src/controls/EventRecurrenceInfoDaily/EventRecurrenceInfoDaily.tsx b/samples/react-calendar/src/controls/EventRecurrenceInfoDaily/EventRecurrenceInfoDaily.tsx
index a4b9e97d5..5aa366576 100644
--- a/samples/react-calendar/src/controls/EventRecurrenceInfoDaily/EventRecurrenceInfoDaily.tsx
+++ b/samples/react-calendar/src/controls/EventRecurrenceInfoDaily/EventRecurrenceInfoDaily.tsx
@@ -13,6 +13,7 @@ import {
   MaskedTextField,
 } from 'office-ui-fabric-react';
 import { DatePicker, DayOfWeek, IDatePickerStrings } from 'office-ui-fabric-react/lib/DatePicker';
+import { toLocaleShortDateString } from '../../utils/dateUtils';
 
 import spservices from '../../services/spservices';
 
@@ -20,7 +21,7 @@ const DayPickerStrings: IDatePickerStrings = {
   months: [strings.January, strings.February, strings.March, strings.April, strings.May, strings.June, strings.July, strings.August, strings.September, strings.October, strings.November, strings.December],
   shortMonths: [strings.Jan, strings.Feb, strings.Mar, strings.Apr, strings.May, strings.Jun, strings.Jul, strings.Aug, strings.Sep, strings.Oct, strings.Nov, strings.Dez],
   days: [strings.Sunday, strings.Monday, strings.Tuesday, strings.Wednesday, strings.Thursday, strings.Friday, strings.Saturday],
-  shortDays: [strings.ShortDay_S, strings.ShortDay_M, strings.ShortDay_T, strings.ShortDay_W, strings.ShortDay_Tursday, strings.ShortDay_Friday, strings.ShortDay_Saunday],
+  shortDays: [strings.ShortDay_S, strings.ShortDay_M, strings.ShortDay_T, strings.ShortDay_W, strings.ShortDay_Thursday, strings.ShortDay_Friday, strings.ShortDay_Sunday],
   goToToday: strings.GoToDay,
   prevMonthAriaLabel: strings.PrevMonth,
   nextMonthAriaLabel: strings.NextMonth,
@@ -44,7 +45,7 @@ export class EventRecurrenceInfoDaily extends React.Component<IEventRecurrenceIn
     super(props);
 
 
-    this.onPaternChange = this.onPaternChange.bind(this);
+    this.onPatternChange = this.onPatternChange.bind(this);
     this.state = {
       selectedKey: 'daily',
       selectPatern: 'every',
@@ -85,6 +86,16 @@ export class EventRecurrenceInfoDaily extends React.Component<IEventRecurrenceIn
     this.applyRecurrence();
   }
 
+  /**
+   * 
+   * @private
+   * @param date 
+   * @memberof EventRecurrenceInfoDaily
+   */
+  private formatDate(date: Date) {
+    return toLocaleShortDateString(date);
+  }
+
   /**
    *
    *
@@ -162,7 +173,7 @@ export class EventRecurrenceInfoDaily extends React.Component<IEventRecurrenceIn
     });
     this.applyRecurrence();
   }
-  private onPaternChange(ev: React.SyntheticEvent<HTMLElement>, option: IChoiceGroupOption): void {
+  private onPatternChange(ev: React.SyntheticEvent<HTMLElement>, option: IChoiceGroupOption): void {
     ev.preventDefault();
     this.setState({
       selectPatern: option.key,
@@ -294,7 +305,7 @@ export class EventRecurrenceInfoDaily extends React.Component<IEventRecurrenceIn
 
             </div>
             <div style={{ width: '100%', paddingTop: '10px' }}>
-              <Label>Patern</Label>
+              <Label>{ strings.patternLabel }</Label>
               <ChoiceGroup
                 selectedKey={this.state.selectPatern}
                 options={[
@@ -325,13 +336,13 @@ export class EventRecurrenceInfoDaily extends React.Component<IEventRecurrenceIn
                     text: strings.everyweekdays,
                   }
                 ]}
-                onChange={this.onPaternChange}
+                onChange={this.onPatternChange}
                 required={true}
               />
             </div>
 
             <div style={{ paddingTop: '22px' }}>
-              <Label>Date Range</Label>
+              <Label>{ strings.dateRangeLabel }</Label>
               <div style={{ display: 'inline-block', verticalAlign: 'top', paddingRight: '35px', paddingTop: '10px' }}>
 
                 <DatePicker
@@ -342,6 +353,7 @@ export class EventRecurrenceInfoDaily extends React.Component<IEventRecurrenceIn
                   label={strings.StartDateLabel}
                   value={this.state.startDate}
                   onSelectDate={this.onStartDateChange}
+                  formatDate={this.formatDate}
                 />
 
               </div>
@@ -368,8 +380,10 @@ export class EventRecurrenceInfoDaily extends React.Component<IEventRecurrenceIn
                               ariaLabel="Select a date"
                               style={{ display: 'inline-block', verticalAlign: 'top', paddingLeft: '22px', }}
                               onSelectDate={this.onEndDateChange}
+                              formatDate={this.formatDate}
                               value={this.state.endDate}
                               disabled={this.state.disableEndDate}
+
                             />
                           </div>
                         );
@@ -390,7 +404,7 @@ export class EventRecurrenceInfoDaily extends React.Component<IEventRecurrenceIn
                               disabled={this.state.disableNumberOcurrences}
                               errorMessage={this.state.errorMessageNumberOcurrences}
                               onChange={this.onNumberOfOcurrencesChange} />
-                            <Label styles={{ root: { display: 'inline-block', verticalAlign: 'top', paddingLeft: '10px' } }}>Ocurrences</Label>
+                            <Label styles={{ root: { display: 'inline-block', verticalAlign: 'top', paddingLeft: '10px' } }}>{ strings.occurrencesLabel }</Label>
                           </div>
                         );
                       }
diff --git a/samples/react-calendar/src/controls/EventRecurrenceInfoMonthly/EventRecurrenceInfoMonthly.tsx b/samples/react-calendar/src/controls/EventRecurrenceInfoMonthly/EventRecurrenceInfoMonthly.tsx
index 20076e51d..fe6895ed7 100644
--- a/samples/react-calendar/src/controls/EventRecurrenceInfoMonthly/EventRecurrenceInfoMonthly.tsx
+++ b/samples/react-calendar/src/controls/EventRecurrenceInfoMonthly/EventRecurrenceInfoMonthly.tsx
@@ -16,6 +16,7 @@ import {
 } from 'office-ui-fabric-react';
 
 import { DatePicker, DayOfWeek, IDatePickerStrings } from 'office-ui-fabric-react/lib/DatePicker';
+import { toLocaleShortDateString } from '../../utils/dateUtils';
 
 import spservices from '../../services/spservices';
 import { string } from 'prop-types';
@@ -24,7 +25,7 @@ const DayPickerStrings: IDatePickerStrings = {
   months: [strings.January, strings.February, strings.March, strings.April, strings.May, strings.June, strings.July, strings.August, strings.September, strings.October, strings.November, strings.December],
   shortMonths: [strings.Jan, strings.Feb, strings.Mar, strings.Apr, strings.May, strings.Jun, strings.Jul, strings.Aug, strings.Sep, strings.Oct, strings.Nov, strings.Dez],
   days: [strings.Sunday, strings.Monday, strings.Tuesday, strings.Wednesday, strings.Thursday, strings.Friday, strings.Saturday],
-  shortDays: [strings.ShortDay_S, strings.ShortDay_M, strings.ShortDay_T, strings.ShortDay_W, strings.ShortDay_Tursday, strings.ShortDay_Friday, strings.ShortDay_Saunday],
+  shortDays: [strings.ShortDay_S, strings.ShortDay_M, strings.ShortDay_T, strings.ShortDay_W, strings.ShortDay_Thursday, strings.ShortDay_Friday, strings.ShortDay_Sunday],
   goToToday: strings.GoToDay,
   prevMonthAriaLabel: strings.PrevMonth,
   nextMonthAriaLabel: strings.NextMonth,
@@ -111,6 +112,15 @@ export class EventRecurrenceInfoMonthly extends React.Component<IEventRecurrence
     this.applyRecurrence();
   }
 
+  /**
+   * 
+   * @private
+   * @param date 
+   * @memberof EventRecurrenceInfoMonthly
+   */
+  private formatDate(date: Date) : string {
+    return toLocaleShortDateString(date);
+  }
   /**
    *
    *
@@ -580,6 +590,7 @@ export class EventRecurrenceInfoMonthly extends React.Component<IEventRecurrence
                   label={strings.StartDateLabel}
                   value={this.state.startDate}
                   onSelectDate={this.onStartDateChange}
+                  formatDate= {this.formatDate}
                 />
 
               </div>
@@ -606,6 +617,7 @@ export class EventRecurrenceInfoMonthly extends React.Component<IEventRecurrence
                               ariaLabel={strings.StartDatePlaceHolder}
                               style={{ display: 'inline-block', verticalAlign: 'top', paddingLeft: '22px', }}
                               onSelectDate={this.onEndDateChange}
+                              formatDate={this.formatDate}
                               value={this.state.endDate}
                               disabled={this.state.disableEndDate}
                             />
diff --git a/samples/react-calendar/src/controls/EventRecurrenceInfoWeekly/EventRecurrenceInfoWeekly.tsx b/samples/react-calendar/src/controls/EventRecurrenceInfoWeekly/EventRecurrenceInfoWeekly.tsx
index 862bbe661..520d5fc85 100644
--- a/samples/react-calendar/src/controls/EventRecurrenceInfoWeekly/EventRecurrenceInfoWeekly.tsx
+++ b/samples/react-calendar/src/controls/EventRecurrenceInfoWeekly/EventRecurrenceInfoWeekly.tsx
@@ -14,24 +14,25 @@ import {
   Checkbox,
 } from 'office-ui-fabric-react';
 import { DatePicker, DayOfWeek, IDatePickerStrings } from 'office-ui-fabric-react/lib/DatePicker';
+import { toLocaleShortDateString } from '../../utils/dateUtils';
 
 import spservices from '../../services/spservices';
 
 const DayPickerStrings: IDatePickerStrings = {
-  months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+  months: [strings.January, strings.February, strings.March, strings.April, strings.May, strings.June, strings.July, strings.August, strings.September, strings.October, strings.November, strings.December],
 
-  shortMonths: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+  shortMonths: [strings.Jan, strings.Feb, strings.Mar, strings.Apr, strings.May, strings.Jun, strings.Jul, strings.Aug, strings.Sep, strings.Oct, strings.Nov, strings.Dez],
 
-  days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+  days: [strings.Sunday, strings.Monday, strings.Tuesday, strings.Wednesday, strings.Thursday, strings.Friday, strings.Saturday],
 
-  shortDays: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
+  shortDays: [strings.ShortDay_Sunday, strings.ShortDay_M, strings.ShortDay_T, strings.ShortDay_W, strings.ShortDay_Thursday, strings.ShortDay_Friday, strings.ShortDay_S],
 
-  goToToday: 'Go to today',
-  prevMonthAriaLabel: 'Go to previous month',
-  nextMonthAriaLabel: 'Go to next month',
-  prevYearAriaLabel: 'Go to previous year',
-  nextYearAriaLabel: 'Go to next year',
-  closeButtonAriaLabel: 'Close date picker'
+  goToToday: strings.GoToDay,
+  prevMonthAriaLabel: strings.PrevMonth,
+  nextMonthAriaLabel: strings.NextMonth,
+  prevYearAriaLabel: strings.PrevYear,
+  nextYearAriaLabel: strings.NextYear,
+  closeButtonAriaLabel: strings.CloseDate
 };
 
 /**
@@ -100,6 +101,17 @@ export class EventRecurrenceInfoWeekly extends React.Component<IEventRecurrenceI
     this.applyRecurrence();
   }
 
+  /**
+   * 
+   * 
+   * @private
+   * @param date 
+   * @memberof EventRecurrenceInfoDaily
+   */
+  private formatDate(date: Date): string {
+    return toLocaleShortDateString(date);
+  }
+
   /**
    *
    *
@@ -407,6 +419,7 @@ export class EventRecurrenceInfoWeekly extends React.Component<IEventRecurrenceI
                   label={strings.StartDateLabel}
                   value={this.state.startDate}
                   onSelectDate={this.onStartDateChange}
+                  formatDate={this.formatDate}    
                 />
 
               </div>
@@ -433,6 +446,7 @@ export class EventRecurrenceInfoWeekly extends React.Component<IEventRecurrenceI
                               ariaLabel={strings.StartDatePlaceHolder}
                               style={{ display: 'inline-block', verticalAlign: 'top', paddingLeft: '22px', }}
                               onSelectDate={this.onEndDateChange}
+                              formatDate={this.formatDate}
                               value={this.state.endDate}
                               disabled={this.state.disableEndDate}
                             />
diff --git a/samples/react-calendar/src/controls/EventRecurrenceInfoYearly/EventRecurrenceInfoYearly.tsx b/samples/react-calendar/src/controls/EventRecurrenceInfoYearly/EventRecurrenceInfoYearly.tsx
index 4098acf59..36403f158 100644
--- a/samples/react-calendar/src/controls/EventRecurrenceInfoYearly/EventRecurrenceInfoYearly.tsx
+++ b/samples/react-calendar/src/controls/EventRecurrenceInfoYearly/EventRecurrenceInfoYearly.tsx
@@ -15,7 +15,7 @@ import {
   MaskedTextField
 } from 'office-ui-fabric-react';
 import { DatePicker, DayOfWeek, IDatePickerStrings } from 'office-ui-fabric-react/lib/DatePicker';
-
+import { toLocaleShortDateString }  from '../../utils/dateUtils';
 import spservices from '../../services/spservices';
 
 const DayPickerStrings: IDatePickerStrings = {
@@ -109,6 +109,16 @@ export class EventRecurrenceInfoYearly extends React.Component<IEventRecurrenceI
     this.applyRecurrence();
   }
 
+  /**
+   * 
+   * @private
+   * @param date 
+   * @memberof EventRecurrenceInfoDaily
+   */
+  private formatDate(date: Date): string {
+    return toLocaleShortDateString(date);
+  }
+
   /**
    *
    *
@@ -561,7 +571,7 @@ export class EventRecurrenceInfoYearly extends React.Component<IEventRecurrenceI
             </div>
 
             <div style={{ paddingTop: '22px' }}>
-              <Label>Date Range</Label>
+              <Label>{ strings.dateRangeLabel }</Label>
               <div style={{ display: 'inline-block', verticalAlign: 'top', paddingRight: '35px', paddingTop: '10px' }}>
 
                 <DatePicker
@@ -572,6 +582,7 @@ export class EventRecurrenceInfoYearly extends React.Component<IEventRecurrenceI
                   label={strings.StartDateLabel}
                   value={this.state.startDate}
                   onSelectDate={this.onStartDateChange}
+                  formatDate={this.formatDate}
                 />
 
               </div>
@@ -598,6 +609,7 @@ export class EventRecurrenceInfoYearly extends React.Component<IEventRecurrenceI
                               ariaLabel={strings.StartDatePlaceHolder}
                               style={{ display: 'inline-block', verticalAlign: 'top', paddingLeft: '22px', }}
                               onSelectDate={this.onEndDateChange}
+                              formatDate={this.formatDate}
                               value={this.state.endDate}
                               disabled={this.state.disableEndDate}
                             />
diff --git a/samples/react-calendar/src/utils/dateUtils.ts b/samples/react-calendar/src/utils/dateUtils.ts
new file mode 100644
index 000000000..7c7220342
--- /dev/null
+++ b/samples/react-calendar/src/utils/dateUtils.ts
@@ -0,0 +1,9 @@
+import * as moment from 'moment';
+
+export function toLocaleLongDateString(date: Date) {
+    return moment(date).format('LL');
+}
+
+export function toLocaleShortDateString(date: Date) {
+    return moment(date).format('ll');
+}
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 bc6ce0085..08926903b 100644
--- a/samples/react-calendar/src/webparts/calendar/loc/en-us.js
+++ b/samples/react-calendar/src/webparts/calendar/loc/en-us.js
@@ -62,23 +62,23 @@ define([], function () {
     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',
+    Jan:"Jan",
+    Feb:"Feb",
+    Mar:"Mar",
+    Apr:"Apr",
+    May:"May",
+    Jun:"Jun",
+    Jul:"Jul",
+    Aug:"Aug",
+    Sep:"Sep",
+    Oct:"Oct",
+    Nov:"Nov",
+    Dez:"Dez",
     December: "December",
-    November: " 'November'",
+    November: "November",
     October: "October",
     September: "September",
-    August: " 'August'",
+    August: "August",
     July: "July",
     June: "June",
     May: "May",
@@ -100,17 +100,31 @@ define([], function () {
     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'
+    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",
+    recurrenceEventLabel: "Recurrence Event",
+    editRecurrenceSeries: "Edit Recurrence Series",
+    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"
   }
 });
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 bfe940504..6b7597c6c 100644
--- a/samples/react-calendar/src/webparts/calendar/loc/mystrings.d.ts
+++ b/samples/react-calendar/src/webparts/calendar/loc/mystrings.d.ts
@@ -47,9 +47,9 @@ declare interface ICalendarWebPartStrings {
   NextMonth: string;
   PrevMonth: string;
   GoToDay: string;
-  ShortDay_Saunday: string;
+  ShortDay_Sunday: string;
   ShortDay_Friday: string;
-  ShortDay_Tursday: string;
+  ShortDay_Thursday: string;
   ShortDay_W: string;
   ShortDay_T: string;
   ShortDay_M: string;
@@ -112,6 +112,21 @@ declare interface ICalendarWebPartStrings {
   previousLabel: string;
   nextLabel: string;
   showMore: string;
+  recurrenceEventLabel: string;
+  editRecurrenceSeries: string;
+  ifRecurrenceLabel: string;
+  onLabel: string;
+  offLabel: string;
+  eventDescriptionLabel: string;
+  recurrenceInformationLabel: string;
+  dailyLabel: string;
+  weeklyLabel: string;
+  monthlyLabel: string;
+  yearlyLabel: string;
+  patternLabel: string;
+  dateRangeLabel: string;
+  occurrencesLabel: string;
+
 }
 
 declare module 'CalendarWebPartStrings' {
diff --git a/samples/react-calendar/src/webparts/calendar/loc/sv-se.js b/samples/react-calendar/src/webparts/calendar/loc/sv-se.js
index 3e40b54de..5e07d34f7 100644
--- a/samples/react-calendar/src/webparts/calendar/loc/sv-se.js
+++ b/samples/react-calendar/src/webparts/calendar/loc/sv-se.js
@@ -1,7 +1,7 @@
 define([], function () {
     return {
-      WeeksOnLabel: "veckor på",
-      PaternLabel: "Mönster",
+      WeeksOnLabel: "vecka på",
+      PaternLabel: "Schema",
       OcurrencesLabel: "Tillfällen",
       dateRangeLabel: "Datumintervall",
       weekEndDay: "Helgdag",
@@ -17,8 +17,8 @@ define([], function () {
       AllowedValues1to12Label: "Tillåtna värder 1 till 12",
       noEndDate: "inget slutdatum",
       everyweekdays: "alla veckodagar",
-      days: "dagar",
-      every: "varje",
+      days: "dag",
+      every: "var",
       EndByLabel: "slutar den",
       EndAfterLabel: "slutar efter",
       HttpErrorMessage: "Fel vid inläsning av kalenderhändelser:",
@@ -62,23 +62,23 @@ define([], function () {
       Tuesday: "Tisdag",
       Monday: "Måndag",
       Sunday: "Söndag",
-      Jan:'Jan',
-      Feb:'Feb',
-      Mar:'Mar',
-      Apr:'Apr',
-      May:'Maj',
-      Jun:'Jun',
-      Jul:'Jul',
-      Aug:'Aug',
-      Sep:'Sep',
-      Oct:'Okt',
-      Nov:'Nov',
-      Dez:'Dec',
+      Jan:"Jan",
+      Feb:"Feb",
+      Mar:"Mar",
+      Apr:"Apr",
+      May:"Maj",
+      Jun:"Jun",
+      Jul:"Jul",
+      Aug:"Aug",
+      Sep:"Sep",
+      Oct:"Okt",
+      Nov:"Nov",
+      Dez:"Dec",
       December: "December",
-      November: " 'November'",
+      November: "November",
       October: "Oktober",
       September: "September",
-      August: " 'Augusti'",
+      August: "Augusti",
       July: "Juli",
       June: "Juni",
       May: "Maj",
@@ -100,18 +100,32 @@ define([], function () {
       EventTitleErrorMessage: "Titel på händelsen är obligatoriskt.",
       EventTitleLabel: "Titel",
       EventPanelTitle: "Redigera/Lägg till händelse",
-      "PropertyPaneDescription": "Kalender",
-      "BasicGroupName": "Egenskaper",
-      SiteUrlFieldLabel: 'Site Url',
-      ListFieldLabel: 'Kalenderlista',
-      weekLabel: 'Vecka',
-      dayLable: 'Dag',
-      agenda: 'Agenda',
-      monthLabel: 'Månad',
-      "todayLabel": 'Idag',
-      "previousLabel": 'Föregående',
-      "nextLabel": "Nästa",
-      "showMore": 'mer'
+      PropertyPaneDescription: "Kalender",
+      BasicGroupName: "Egenskaper",
+      SiteUrlFieldLabel: "Site Url",
+      ListFieldLabel: "Kalenderlista",
+      weekLabel: "Vecka",
+      dayLable: "Dag",
+      agenda: "Agenda",
+      monthLabel: "Månad",
+      todayLabel: "Idag",
+      previousLabel: "Föregående",
+      nextLabel: "Nästa",
+      showMore: "mer",
+      recurrenceEventLabel: "Återkommande händelse",
+      editRecurrenceSeries: "Redigera återkommande händelse",
+      ifRecurrenceLabel: "Återkommande ?",
+      onLabel: "På",
+      offLabel: "Av",
+      eventDescriptionLabel: "Beskrivning",
+      recurrenceInformationLabel: "Intervall",
+      dailyLabel: "Dagligen",
+      weeklyLabel: "Veckovis",
+      monthlyLabel: "Månatligen",
+      yearlyLabel: "Årligen",
+      patternLabel: "Schema",
+      dateRangeLabel: "Datumintervall",
+      occurrencesLabel: "tillfällen"
     }
   });
   
\ No newline at end of file