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 { 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 { { (this.state.eventData && (this.state.eventData.EventType !== "0" && this.state.showRecurrenceSeriesInfo !== true)) ?
-

Recurrence Event

+

{ strings.recurrenceEventLabel }

- Edit Recurrence Series + { strings.editRecurrenceSeries }
@@ -658,6 +669,7 @@ export class Event extends React.Component { 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 { 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 { { ev.preventDefault(); this.setState({ showRecurrenceSeriesInfo: checked, newRecurrenceEvent: checked }); @@ -827,7 +840,7 @@ export class Event extends React.Component { ) } - < Label > Event Description + < Label > {strings.eventDescriptionLabel }
, option: IChoiceGroupOption): void { + private onPatternChange(ev: React.SyntheticEvent, option: IChoiceGroupOption): void { ev.preventDefault(); this.setState({ selectPatern: option.key, @@ -294,7 +305,7 @@ export class EventRecurrenceInfoDaily extends React.Component
- +
- +
@@ -368,8 +380,10 @@ export class EventRecurrenceInfoDaily extends React.Component
); @@ -390,7 +404,7 @@ export class EventRecurrenceInfoDaily extends React.Component - +
); } 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 @@ -606,6 +617,7 @@ export class EventRecurrenceInfoMonthly extends React.Component 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 @@ -433,6 +446,7 @@ export class EventRecurrenceInfoWeekly extends React.Component 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
- +
@@ -598,6 +609,7 @@ export class EventRecurrenceInfoYearly extends React.Component 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