= 1; i--) {
- var dayMoment = lastMonth.clone().date(lastMonthDayCount + 1 - i);
+ var diff = Math.abs(firstDayOfWeek - (startOfMonth + 7)) % 7;
+ for (var i = diff; i >= 1; i--) {
+ var dayMoment = lastMonth.clone().date(lastMonthDayCount - i);
days.push({ dayMoment: dayMoment, isPassive: true });
}
@@ -295,6 +299,7 @@ Calendar.propTypes = {
}),
date: _react.PropTypes.oneOfType([_react.PropTypes.object, _react.PropTypes.string, _react.PropTypes.func]),
format: _react.PropTypes.string.isRequired,
+ firstDayOfWeek: _react.PropTypes.oneOfType([_react.PropTypes.number, _react.PropTypes.string]),
onChange: _react.PropTypes.func,
onInit: _react.PropTypes.func,
link: _react.PropTypes.oneOfType([_react.PropTypes.shape({
diff --git a/lib/DateRange.js b/lib/DateRange.js
index e93a46a99..1a2c2ac8a 100644
--- a/lib/DateRange.js
+++ b/lib/DateRange.js
@@ -170,6 +170,7 @@ var DateRange = (function (_Component) {
var linkedCalendars = _props.linkedCalendars;
var style = _props.style;
var calendars = _props.calendars;
+ var firstDayOfWeek = _props.firstDayOfWeek;
var _state = this.state;
var range = _state.range;
var link = _state.link;
@@ -193,6 +194,7 @@ var DateRange = (function (_Component) {
linkCB: _this.handleLinkChange.bind(_this),
range: range,
format: format,
+ firstDayOfWeek: firstDayOfWeek,
theme: styles,
onChange: _this.handleSelect.bind(_this) }));
}
@@ -214,6 +216,7 @@ DateRange.defaultProps = {
DateRange.propTypes = {
format: _react.PropTypes.string,
+ firstDayOfWeek: _react.PropTypes.number,
calendars: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.number]),
startDate: _react.PropTypes.oneOfType([_react.PropTypes.func, _react.PropTypes.string]),
endDate: _react.PropTypes.oneOfType([_react.PropTypes.func, _react.PropTypes.string]),
diff --git a/src/Calendar.js b/src/Calendar.js
index 03e0646af..8d4219140 100644
--- a/src/Calendar.js
+++ b/src/Calendar.js
@@ -25,13 +25,13 @@ class Calendar extends Component {
constructor(props, context) {
super(props, context);
- const { format, range, theme, offset } = props;
+ const { format, range, theme, offset, firstDayOfWeek } = props;
const date = parseInput(props.date, format)
-
const state = {
date,
shownDate : (range && range['endDate'] || date).clone().add(offset, 'months'),
+ firstDayOfWeek: (firstDayOfWeek || moment.localeData().firstDayOfWeek()),
}
this.state = state;
@@ -107,7 +107,7 @@ class Calendar extends Component {
}
renderWeekdays() {
- const dow = moment.localeData().firstDayOfWeek();
+ const dow = this.state.firstDayOfWeek;
const weekdays = [];
const { styles } = this;
@@ -124,30 +124,31 @@ class Calendar extends Component {
renderDays() {
// TODO: Split this logic into smaller chunks
- const { styles } = this;
+ const { styles } = this;
- const { range } = this.props;
+ const { range } = this.props;
- const shownDate = this.getShownDate();
- const { date } = this.state;
- const dateUnix = date.unix();
+ const shownDate = this.getShownDate();
+ const { date, firstDayOfWeek } = this.state;
+ const dateUnix = date.unix();
- const monthNumber = shownDate.month();
- const dayCount = shownDate.daysInMonth();
- const startOfMonth = shownDate.clone().startOf('month').weekday();
+ const monthNumber = shownDate.month();
+ const dayCount = shownDate.daysInMonth();
+ const startOfMonth = shownDate.clone().startOf('month').isoWeekday();
- const lastMonth = shownDate.clone().month(monthNumber - 1);
- const lastMonthNumber = lastMonth.month();
- const lastMonthDayCount = lastMonth.daysInMonth();
+ const lastMonth = shownDate.clone().month(monthNumber - 1);
+ const lastMonthNumber = lastMonth.month();
+ const lastMonthDayCount = lastMonth.daysInMonth();
- const nextMonth = shownDate.clone().month(monthNumber + 1);
- const nextMonthNumber = nextMonth.month();
+ const nextMonth = shownDate.clone().month(monthNumber + 1);
+ const nextMonthNumber = nextMonth.month();
- const days = [];
+ const days = [];
// Previous month's days
- for (let i = startOfMonth; i >= 1; i--) {
- const dayMoment = lastMonth.clone().date(lastMonthDayCount + 1 - i);
+ const diff = (Math.abs(firstDayOfWeek - (startOfMonth + 7)) % 7);
+ for (let i = diff; i >= 1; i--) {
+ const dayMoment = lastMonth.clone().date(lastMonthDayCount - i);
days.push({ dayMoment, isPassive : true });
}
@@ -202,21 +203,22 @@ Calendar.defaultProps = {
}
Calendar.propTypes = {
- sets : PropTypes.string,
- range : PropTypes.shape({
- startDate : PropTypes.object,
- endDate : PropTypes.object
+ sets : PropTypes.string,
+ range : PropTypes.shape({
+ startDate : PropTypes.object,
+ endDate : PropTypes.object
}),
- date : PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.func]),
- format : PropTypes.string.isRequired,
- onChange : PropTypes.func,
- onInit : PropTypes.func,
- link : PropTypes.oneOfType([PropTypes.shape({
- startDate : PropTypes.object,
- endDate : PropTypes.object,
+ date : PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.func]),
+ format : PropTypes.string.isRequired,
+ firstDayOfWeek : PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+ onChange : PropTypes.func,
+ onInit : PropTypes.func,
+ link : PropTypes.oneOfType([PropTypes.shape({
+ startDate : PropTypes.object,
+ endDate : PropTypes.object,
}), PropTypes.bool]),
- linkCB : PropTypes.func,
- theme : PropTypes.object,
+ linkCB : PropTypes.func,
+ theme : PropTypes.object,
}
export default Calendar;
diff --git a/src/DateRange.js b/src/DateRange.js
index b24ef8c07..01976584d 100644
--- a/src/DateRange.js
+++ b/src/DateRange.js
@@ -88,7 +88,7 @@ class DateRange extends Component {
link : link.clone().add(direction, 'months')
});
}
-
+
componentWillReceiveProps(newProps) {
// Whenever date props changes, update state with parsed variant
if (newProps.startDate || newProps.endDate) {
@@ -108,7 +108,7 @@ class DateRange extends Component {
}
render() {
- const { ranges, format, linkedCalendars, style, calendars } = this.props;
+ const { ranges, format, linkedCalendars, style, calendars, firstDayOfWeek } = this.props;
const { range, link } = this.state;
const { styles } = this;
@@ -133,6 +133,7 @@ class DateRange extends Component {
linkCB={ this.handleLinkChange.bind(this) }
range={ range }
format={ format }
+ firstDayOfWeek={ firstDayOfWeek }
theme={ styles }
onChange={ this.handleSelect.bind(this) } />
);
@@ -152,18 +153,19 @@ DateRange.defaultProps = {
}
DateRange.propTypes = {
- format : PropTypes.string,
- calendars : PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
- startDate : PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
- endDate : PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
- minDate : PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
- maxDate : PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
- dateLimit : PropTypes.func,
- ranges : PropTypes.object,
+ format : PropTypes.string,
+ firstDayOfWeek : PropTypes.number,
+ calendars : PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+ startDate : PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+ endDate : PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+ minDate : PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+ maxDate : PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+ dateLimit : PropTypes.func,
+ ranges : PropTypes.object,
linkedCalendars : PropTypes.bool,
- theme : PropTypes.object,
- onInit : PropTypes.func,
- onChange : PropTypes.func,
+ theme : PropTypes.object,
+ onInit : PropTypes.func,
+ onChange : PropTypes.func,
}
export default DateRange;