From af5086c0327c000ac5ab9b50506c86b3a3c04ea7 Mon Sep 17 00:00:00 2001 From: Abderahman88 Date: Fri, 4 Dec 2020 03:09:15 +0100 Subject: [PATCH] calendar improvements and clean up --- samples/react-calendar/README.md | 1 + samples/react-calendar/config/config.json | 3 +- .../config/package-solution.json | 2 +- .../webparts/calendar/components/Calendar.tsx | 180 +++++++++--------- .../calendar/components/CustomToolbar.tsx | 68 ------- .../webparts/calendar/components/Toolbar.jsx | 31 --- .../calendar/components/Year.module.scss | 8 +- .../src/webparts/calendar/components/Year.tsx | 92 ++++----- .../src/webparts/calendar/loc/en-us.js | 4 +- .../src/webparts/calendar/loc/mystrings.d.ts | 1 - .../src/webparts/calendar/loc/nl-nl.js | 143 ++++++++++++++ .../src/webparts/calendar/loc/pt-pt.js | 50 +++-- .../src/webparts/calendar/loc/sv-se.js | 3 +- samples/react-calendar/tsconfig.json | 3 +- 14 files changed, 331 insertions(+), 258 deletions(-) delete mode 100644 samples/react-calendar/src/webparts/calendar/components/CustomToolbar.tsx delete mode 100644 samples/react-calendar/src/webparts/calendar/components/Toolbar.jsx create mode 100644 samples/react-calendar/src/webparts/calendar/loc/nl-nl.js diff --git a/samples/react-calendar/README.md b/samples/react-calendar/README.md index 0f0a40f36..d9cb21790 100644 --- 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 diff --git a/samples/react-calendar/config/config.json b/samples/react-calendar/config/config.json index 609a25130..2acf37ba9 100644 --- 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" } } diff --git a/samples/react-calendar/config/package-solution.json b/samples/react-calendar/config/package-solution.json index 406edd09a..0c7ee7ad7 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.6.0", + "version": "1.0.7.0", "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 544afe704..03d86829d 100644 --- 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
- +
{ 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 @@ -297,15 +295,15 @@ export default class Calendar extends React.Component -
- - { - (!this.props.list || !this.props.eventStartDate.value || !this.props.eventEndDate.value) ? - - : - // test if has errors - this.state.hasError ? - - {this.state.errorMessage} - +
+ + { + (!this.props.list || !this.props.eventStartDate.value || !this.props.eventEndDate.value) ? + : - // show Calendar - // Test if is loading Events -
- {this.state.isloading ? : -
- `+${total} ${strings.showMore}`, - 'work_week': strings.yearHeaderLabel + // test if has errors + this.state.hasError ? + + {this.state.errorMessage} + + : + // show Calendar + // Test if is loading Events +
+ {this.state.isloading ? : +
+ `+${total} ${strings.showMore}`, + 'work_week': strings.yearHeaderLabel + } } - } - /> -
- } -
- } - { - this.state.showDialog && - - } -
+ /> +
+ } +
+ } + { + this.state.showDialog && + + } +
); } diff --git a/samples/react-calendar/src/webparts/calendar/components/CustomToolbar.tsx b/samples/react-calendar/src/webparts/calendar/components/CustomToolbar.tsx deleted file mode 100644 index 70504bd10..000000000 --- a/samples/react-calendar/src/webparts/calendar/components/CustomToolbar.tsx +++ /dev/null @@ -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 { - 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 ( -
-
- - - -
- {this.props.label} -
- - - - - -
-
- ); - } -} - diff --git a/samples/react-calendar/src/webparts/calendar/components/Toolbar.jsx b/samples/react-calendar/src/webparts/calendar/components/Toolbar.jsx deleted file mode 100644 index 0d4d85c84..000000000 --- a/samples/react-calendar/src/webparts/calendar/components/Toolbar.jsx +++ /dev/null @@ -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 ( -
-
- - - -
-
{this.props.label}
-
- - - - - -
-
- ); - } -} \ No newline at end of file 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 2b2896eb3..63e6412b7 100644 --- 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 { diff --git a/samples/react-calendar/src/webparts/calendar/components/Year.tsx b/samples/react-calendar/src/webparts/calendar/components/Year.tsx index d8cfa856d..0e46de469 100644 --- 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 { - 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
{this.state.calendar.currentDate.format('MMMM').toUpperCase()}
- {['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((day, index) => ( + {weekdays.map((day, index) => ( {day} @@ -127,14 +129,14 @@ class YearCalendar extends React.Component { + onClick={(e, obj) => { this.openView(obj.toDate(), "day", e); //open day-view - } + } } /> ))} - ))} + ))} ); } @@ -147,35 +149,35 @@ class YearCalendar extends React.Component void; + date: string; + onDrillDown: (date: any, view?: string) => void; } class Year extends React.Component { - 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 { for (let i = 0; i < 12; i++) { months.push( - 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 6fac872a5..2d048f44e 100644 --- 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", 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 c136ec137..88d4470f9 100644 --- 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; diff --git a/samples/react-calendar/src/webparts/calendar/loc/nl-nl.js b/samples/react-calendar/src/webparts/calendar/loc/nl-nl.js new file mode 100644 index 000000000..444fdd96f --- /dev/null +++ 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}" + } + }); + \ No newline at end of file diff --git a/samples/react-calendar/src/webparts/calendar/loc/pt-pt.js b/samples/react-calendar/src/webparts/calendar/loc/pt-pt.js index a2496a2dd..42394caa8 100644 --- 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}" } }); 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 19a75685c..15c9558eb 100644 --- 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", diff --git a/samples/react-calendar/tsconfig.json b/samples/react-calendar/tsconfig.json index 8c1f9524c..031abd6ba 100644 --- 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",