From 47ca0da8fc372885840c53b1586da472a680aa43 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Norbert=20Kal=C3=A1cska?= Date: Tue, 15 Oct 2019 15:48:33 +0200 Subject: [PATCH 1/8] Added prop to give possibility to start week on Sunday or Monday. --- src/api/layout.js | 35 ++++++++++++++++++++++++---- src/dayz.js | 2 ++ src/x-labels.js | 22 +++++++++++++---- test/__snapshots__/dayz.spec.js.snap | 2 +- 4 files changed, 51 insertions(+), 10 deletions(-) diff --git a/src/api/layout.js b/src/api/layout.js index 31453dd..683fdfc 100644 --- a/src/api/layout.js +++ b/src/api/layout.js @@ -54,17 +54,44 @@ export default class Layout { if (this.range) { return; } + + const start = moment(this.date); + const end = moment(this.date); + + if ('week' === this.display) { + if (this.weekStartsOn !== undefined) { + start.startOf('isoWeek'); + end.endOf('isoWeek'); + if (0 === this.weekStartsOn && 1 === start.isoWeekday()) { + start.subtract(1, 'day'); + end.subtract(1, 'day'); + } + } else { + start.startOf(this.display); + end.endOf(this.display); + } + } else { + start.startOf(this.display); + end.endOf(this.display); + } + this.range = moment.range( - moment(this.date).startOf(this.display), - moment(this.date).endOf(this.display), + start, + end, ); if (this.isDisplayingAsMonth) { + let startWeekday = this.range.start.weekday(); + let maxWeekday = 6; + if (this.weekStartsOn && 1 === this.weekStartsOn) { + startWeekday -= 1; + maxWeekday += 1; + } this.range.start.subtract( - this.range.start.weekday(), 'days', + startWeekday, 'days', ); this.range.end.add( - 6 - this.range.end.weekday(), 'days', + maxWeekday - this.range.end.isoWeekday(), 'days', ); } } diff --git a/src/dayz.js b/src/dayz.js index f4420cf..5b0b208 100644 --- a/src/dayz.js +++ b/src/dayz.js @@ -25,6 +25,7 @@ export default class Dayz extends React.Component { highlightDays: PropTypes.oneOfType( [PropTypes.array, PropTypes.func], ), + weekStartsOn: PropTypes.number, } static defaultProps = { @@ -95,6 +96,7 @@ export default class Dayz extends React.Component { display={this.props.display} dateFormat={this.props.dateFormat} locale={this.props.locale} + weekStartsOn={this.props.weekStartsOn} />
- +
Sun, Nov 11th From 7dc1aff62a5eca43450776e5b1394fa0d08992ed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Norbert=20Kal=C3=A1cska?= Date: Tue, 15 Oct 2019 15:49:06 +0200 Subject: [PATCH 2/8] Restricted prop to accept either 0 or 1 --- src/dayz.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/dayz.js b/src/dayz.js index 5b0b208..cbb2368 100644 --- a/src/dayz.js +++ b/src/dayz.js @@ -25,7 +25,7 @@ export default class Dayz extends React.Component { highlightDays: PropTypes.oneOfType( [PropTypes.array, PropTypes.func], ), - weekStartsOn: PropTypes.number, + weekStartsOn: PropTypes.oneOf([0, 1]), } static defaultProps = { From add6ac7dadf6ba11ce7bac607e22da82d263fb60 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Norbert=20Kal=C3=A1cska?= Date: Tue, 15 Oct 2019 15:49:31 +0200 Subject: [PATCH 3/8] Updated readme to contain prop --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index e58a9c5..987cc25 100644 --- a/README.md +++ b/README.md @@ -77,6 +77,8 @@ The Dayz component accepts these properties: * **onEventClick**, **onEventDoubleClick** (optional): A function that will be called whenever an event is clicked, it's passed two variables, the event and the layout information for the event. The layout has an `event` subkey that includes the event itself. * **displayHours** (optional): defaults to 7am to 7pm or the earliest/latest event's hour. * **timeFormat** (optional): defaults to `ha` configures y labels time format + * **locale** (optional): defaults to `en`. A string to determine the localization. + * **weekStartsOn** (optional): defaults to `undefined`. Determines whether the week should start on Monday or Sunday. By default it uses what the localization offers (see `locale` prop). It can accept either `0` to start the week on Sunday or `1` to start the week on Monday. Dayz applies these css classes: * The reference **date** prop will have a css class "current" From 346eaa6b7cbc7ea6703f43a3a87abf470b32e5ca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Norbert=20Kal=C3=A1cska?= Date: Tue, 15 Oct 2019 21:03:19 +0200 Subject: [PATCH 4/8] Added locale to layout. Fixed some bugs --- src/api/layout.js | 17 +++++++++++------ src/x-labels.js | 2 +- 2 files changed, 12 insertions(+), 7 deletions(-) diff --git a/src/api/layout.js b/src/api/layout.js index 683fdfc..f71e75a 100644 --- a/src/api/layout.js +++ b/src/api/layout.js @@ -55,8 +55,8 @@ export default class Layout { return; } - const start = moment(this.date); - const end = moment(this.date); + const start = moment(this.date).locale(this.locale); + const end = moment(this.date).locale(this.locale); if ('week' === this.display) { if (this.weekStartsOn !== undefined) { @@ -81,11 +81,16 @@ export default class Layout { ); if (this.isDisplayingAsMonth) { - let startWeekday = this.range.start.weekday(); + let startWeekday; let maxWeekday = 6; - if (this.weekStartsOn && 1 === this.weekStartsOn) { - startWeekday -= 1; - maxWeekday += 1; + if (this.weekStartsOn !== undefined) { + startWeekday = this.range.start.isoWeekday(); + if (1 === this.weekStartsOn) { + startWeekday -= 1; + maxWeekday += 1; + } + } else { + startWeekday = this.range.start.weekday(); } this.range.start.subtract( startWeekday, 'days', diff --git a/src/x-labels.js b/src/x-labels.js index 0f86c81..cb18e71 100644 --- a/src/x-labels.js +++ b/src/x-labels.js @@ -20,7 +20,7 @@ export default class XLabels extends React.Component { } else { let startOfType = 'week'; const day = moment(this.props.date).locale(this.props.locale); - if (this.props.weekStartsOn) { + if (this.props.weekStartsOn !== undefined) { startOfType = 'isoWeek'; day.startOf(startOfType); if (0 === this.props.weekStartsOn && 1 === day.isoWeekday()) { From 284728bfcd000aa000a929605259896d1a79206d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Norbert=20Kal=C3=A1cska?= Date: Tue, 15 Oct 2019 21:03:38 +0200 Subject: [PATCH 5/8] Added test cases for starting on Monday or Sunday --- test/layout.spec.js | 56 ++++++++++++++++++++++++++++++++++++++++- test/testing-layouts.js | 10 ++++++++ 2 files changed, 65 insertions(+), 1 deletion(-) diff --git a/test/layout.spec.js b/test/layout.spec.js index 8588d8f..8f96fe7 100644 --- a/test/layout.spec.js +++ b/test/layout.spec.js @@ -1,6 +1,6 @@ import React from 'react'; // eslint-disable-line no-unused-vars import moment from '../src/moment-range'; -import { testEventMonth, testEventRange, testEventDay } from './testing-layouts'; +import { testEventMonth, testEventRange, testEventDay, testWeekStartsOn } from './testing-layouts'; describe('Layout calculations', () => { describe('day layout', () => { @@ -160,4 +160,58 @@ describe('Layout calculations', () => { })).toMatchObject({ className: 'day after tenth' }); }); }); + + describe('weekStartsOn', () => { + describe('month layout', () => { + describe('default', () => { + it('starts the week on Sunday for "en" locale', () => { + const layout = testWeekStartsOn({ locale: 'en' }); + expect(layout.range.start.isoWeekday()).toBe(7); + }); + + it('starts the week on Monday for "de" locale', () => { + const layout = testWeekStartsOn({ locale: 'de' }); + expect(layout.range.start.isoWeekday()).toBe(1); + }); + }); + + describe('weekStartsOn set', () => { + it('starts the week on Sunday when 0', () => { + const layout = testWeekStartsOn({ locale: 'de', weekStartsOn: 0 }); + expect(layout.range.start.isoWeekday()).toBe(7); + }); + + it('starts the week on Monday when 1', () => { + const layout = testWeekStartsOn({ locale: 'en', weekStartsOn: 1 }); + expect(layout.range.start.isoWeekday()).toBe(1); + }); + }); + }); + + describe('week layout', () => { + describe('default', () => { + it('starts the week on Sunday for "en" locale', () => { + const layout = testWeekStartsOn({ locale: 'en' }); + expect(layout.range.start.isoWeekday()).toBe(7); + }); + + it('starts the week on Monday for "de" locale', () => { + const layout = testWeekStartsOn({ locale: 'de' }); + expect(layout.range.start.isoWeekday()).toBe(1); + }); + }); + + describe('weekStartsOn set', () => { + it('starts the week on Sunday when 0', () => { + const layout = testWeekStartsOn({ locale: 'de', weekStartsOn: 0 }); + expect(layout.range.start.isoWeekday()).toBe(7); + }); + + it('starts the week on Monday when 1', () => { + const layout = testWeekStartsOn({ locale: 'en', weekStartsOn: 1 }); + expect(layout.range.start.isoWeekday()).toBe(1); + }); + }); + }); + }); }); diff --git a/test/testing-layouts.js b/test/testing-layouts.js index 9e9aa04..f499a31 100644 --- a/test/testing-layouts.js +++ b/test/testing-layouts.js @@ -67,3 +67,13 @@ const testEventMonth = (options = {}) => { }, options)); return layout; }; + +export +const testWeekStartsOn = (options = {}, display = 'month', events = new EventsCollection([])) => { + const layout = new Layout(Object.assign({ + date: '2019-10-15', + display, + events, + }, options)); + return layout; +}; From 73c449dff87f0c5f3ae9dfe41e75a1631eeb253e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Norbert=20Kal=C3=A1cska?= Date: Tue, 15 Oct 2019 21:05:03 +0200 Subject: [PATCH 6/8] Formatted render function of XLabels component --- src/x-labels.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/x-labels.js b/src/x-labels.js index cb18e71..11b4096 100644 --- a/src/x-labels.js +++ b/src/x-labels.js @@ -43,9 +43,10 @@ export default class XLabels extends React.Component { render() { return ( -
{this.days.map(day =>
- {day.locale(this.props.locale).format(this.dateFormat)} -
)} +
+ {this.days.map(day =>
+ {day.locale(this.props.locale).format(this.dateFormat)} +
)}
); } From 6b717883d9e9e2a224825212be0b55ed742b96a0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Norbert=20Kal=C3=A1cska?= Date: Tue, 15 Oct 2019 21:05:53 +0200 Subject: [PATCH 7/8] Restricted XLabels to only accept 0 or 1 for weekStartsOn prop --- src/x-labels.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/x-labels.js b/src/x-labels.js index 11b4096..3033282 100644 --- a/src/x-labels.js +++ b/src/x-labels.js @@ -9,7 +9,7 @@ export default class XLabels extends React.Component { date: PropTypes.object.isRequired, dateFormat: PropTypes.string, locale: PropTypes.string.isRequired, - weekStartsOn: PropTypes.number, + weekStartsOn: PropTypes.oneOf([0, 1]), } get days() { From 255b7a0807db72478dc06c142ee5cce4433ac00d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Norbert=20Kal=C3=A1cska?= Date: Tue, 15 Oct 2019 22:39:03 +0200 Subject: [PATCH 8/8] Updated snapshots --- test/__snapshots__/dayz.spec.js.snap | 85 +++++++++++----------------- 1 file changed, 34 insertions(+), 51 deletions(-) diff --git a/test/__snapshots__/dayz.spec.js.snap b/test/__snapshots__/dayz.spec.js.snap index 8c9e967..e665d0c 100644 --- a/test/__snapshots__/dayz.spec.js.snap +++ b/test/__snapshots__/dayz.spec.js.snap @@ -223,23 +223,6 @@ exports[`Dayz localizes to specified locale 1`] = `
-
-
- 30 -
-
@@ -264,7 +247,7 @@ exports[`Dayz localizes to specified locale 1`] = ` onDoubleClick={[Function]} style={ Object { - "order": 2, + "order": 1, } } > @@ -281,7 +264,7 @@ exports[`Dayz localizes to specified locale 1`] = ` onDoubleClick={[Function]} style={ Object { - "order": 3, + "order": 2, } } > @@ -298,7 +281,7 @@ exports[`Dayz localizes to specified locale 1`] = ` onDoubleClick={[Function]} style={ Object { - "order": 4, + "order": 3, } } > @@ -315,7 +298,7 @@ exports[`Dayz localizes to specified locale 1`] = ` onDoubleClick={[Function]} style={ Object { - "order": 5, + "order": 4, } } > @@ -332,7 +315,7 @@ exports[`Dayz localizes to specified locale 1`] = ` onDoubleClick={[Function]} style={ Object { - "order": 6, + "order": 5, } } > @@ -349,7 +332,7 @@ exports[`Dayz localizes to specified locale 1`] = ` onDoubleClick={[Function]} style={ Object { - "order": 7, + "order": 6, } } > @@ -366,7 +349,7 @@ exports[`Dayz localizes to specified locale 1`] = ` onDoubleClick={[Function]} style={ Object { - "order": 8, + "order": 7, } } > @@ -383,7 +366,7 @@ exports[`Dayz localizes to specified locale 1`] = ` onDoubleClick={[Function]} style={ Object { - "order": 9, + "order": 8, } } > @@ -400,7 +383,7 @@ exports[`Dayz localizes to specified locale 1`] = ` onDoubleClick={[Function]} style={ Object { - "order": 10, + "order": 9, } } > @@ -417,7 +400,7 @@ exports[`Dayz localizes to specified locale 1`] = ` onDoubleClick={[Function]} style={ Object { - "order": 11, + "order": 10, } } > @@ -434,7 +417,7 @@ exports[`Dayz localizes to specified locale 1`] = ` onDoubleClick={[Function]} style={ Object { - "order": 12, + "order": 11, } } > @@ -451,7 +434,7 @@ exports[`Dayz localizes to specified locale 1`] = ` onDoubleClick={[Function]} style={ Object { - "order": 13, + "order": 12, } } > @@ -468,7 +451,7 @@ exports[`Dayz localizes to specified locale 1`] = ` onDoubleClick={[Function]} style={ Object { - "order": 14, + "order": 13, } } > @@ -485,7 +468,7 @@ exports[`Dayz localizes to specified locale 1`] = ` onDoubleClick={[Function]} style={ Object { - "order": 15, + "order": 14, } } > @@ -502,7 +485,7 @@ exports[`Dayz localizes to specified locale 1`] = ` onDoubleClick={[Function]} style={ Object { - "order": 16, + "order": 15, } } > @@ -519,7 +502,7 @@ exports[`Dayz localizes to specified locale 1`] = ` onDoubleClick={[Function]} style={ Object { - "order": 17, + "order": 16, } } > @@ -536,7 +519,7 @@ exports[`Dayz localizes to specified locale 1`] = ` onDoubleClick={[Function]} style={ Object { - "order": 18, + "order": 17, } } > @@ -553,7 +536,7 @@ exports[`Dayz localizes to specified locale 1`] = ` onDoubleClick={[Function]} style={ Object { - "order": 19, + "order": 18, } } > @@ -570,7 +553,7 @@ exports[`Dayz localizes to specified locale 1`] = ` onDoubleClick={[Function]} style={ Object { - "order": 20, + "order": 19, } } > @@ -587,7 +570,7 @@ exports[`Dayz localizes to specified locale 1`] = ` onDoubleClick={[Function]} style={ Object { - "order": 21, + "order": 20, } } > @@ -604,7 +587,7 @@ exports[`Dayz localizes to specified locale 1`] = ` onDoubleClick={[Function]} style={ Object { - "order": 22, + "order": 21, } } > @@ -621,7 +604,7 @@ exports[`Dayz localizes to specified locale 1`] = ` onDoubleClick={[Function]} style={ Object { - "order": 23, + "order": 22, } } > @@ -638,7 +621,7 @@ exports[`Dayz localizes to specified locale 1`] = ` onDoubleClick={[Function]} style={ Object { - "order": 24, + "order": 23, } } > @@ -655,7 +638,7 @@ exports[`Dayz localizes to specified locale 1`] = ` onDoubleClick={[Function]} style={ Object { - "order": 25, + "order": 24, } } > @@ -672,7 +655,7 @@ exports[`Dayz localizes to specified locale 1`] = ` onDoubleClick={[Function]} style={ Object { - "order": 26, + "order": 25, } } > @@ -689,7 +672,7 @@ exports[`Dayz localizes to specified locale 1`] = ` onDoubleClick={[Function]} style={ Object { - "order": 27, + "order": 26, } } > @@ -706,7 +689,7 @@ exports[`Dayz localizes to specified locale 1`] = ` onDoubleClick={[Function]} style={ Object { - "order": 28, + "order": 27, } } > @@ -723,7 +706,7 @@ exports[`Dayz localizes to specified locale 1`] = ` onDoubleClick={[Function]} style={ Object { - "order": 29, + "order": 28, } } > @@ -740,7 +723,7 @@ exports[`Dayz localizes to specified locale 1`] = ` onDoubleClick={[Function]} style={ Object { - "order": 30, + "order": 29, } } > @@ -757,7 +740,7 @@ exports[`Dayz localizes to specified locale 1`] = ` onDoubleClick={[Function]} style={ Object { - "order": 31, + "order": 30, } } > @@ -774,7 +757,7 @@ exports[`Dayz localizes to specified locale 1`] = ` onDoubleClick={[Function]} style={ Object { - "order": 32, + "order": 31, } } > @@ -791,7 +774,7 @@ exports[`Dayz localizes to specified locale 1`] = ` onDoubleClick={[Function]} style={ Object { - "order": 33, + "order": 32, } } > @@ -808,7 +791,7 @@ exports[`Dayz localizes to specified locale 1`] = ` onDoubleClick={[Function]} style={ Object { - "order": 34, + "order": 33, } } >