Alexander/FitTrackee
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Client - display calendar according to first day of week - #23

Browse Source
This commit is contained in:
Sam 2019-08-31 17:07:54 +02:00
parent a797568b2a
commit eb81c63714
2 changed files with 12 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
fittrackee_client/src/components/Dashboard/Calendar.jsx
View File

@ -20,11 +20,12 @@ import { getMonthActivities } from '../../actions/activities'
import { getDateWithTZ } from '../../utils' import { getDateWithTZ } from '../../utils'
import { recordsLabels } from '../../utils/activities' import { recordsLabels } from '../../utils/activities'
const getStartAndEndMonth = date => { const getStartAndEndMonth = (date, weekStartOnMonday) => {
const monthStart = startOfMonth(date) const monthStart = startOfMonth(date)
const monthEnd = endOfMonth(date) const monthEnd = endOfMonth(date)
const weekStartsOn = weekStartOnMonday ? 1 : 0
return { return {
start: startOfWeek(monthStart), start: startOfWeek(monthStart, { weekStartsOn }),
end: endOfWeek(monthEnd), end: endOfWeek(monthEnd),
} }
} }
@ -35,8 +36,9 @@ class Calendar extends React.Component {
const calendarDate = new Date() const calendarDate = new Date()
this.state = { this.state = {
currentMonth: calendarDate, currentMonth: calendarDate,
startDate: getStartAndEndMonth(calendarDate).start, startDate: getStartAndEndMonth(calendarDate, props.weekm).start,
endDate: getStartAndEndMonth(calendarDate).end, endDate: getStartAndEndMonth(calendarDate, props.weekm).end,
weekStartOnMonday: props.weekm,
} }
} }
@ -62,7 +64,7 @@ class Calendar extends React.Component {
} }
renderDays() { renderDays() {
const dateFormat = 'ddd' const dateFormat = 'EEE'
const days = [] const days = []
const { startDate } = this.state const { startDate } = this.state
@ -150,7 +152,10 @@ class Calendar extends React.Component {
} }
updateStateDate(calendarDate) { updateStateDate(calendarDate) {
const { start, end } = getStartAndEndMonth(calendarDate) const { start, end } = getStartAndEndMonth(
calendarDate,
this.state.weekStartOnMonday
)
this.setState({ this.setState({
currentMonth: calendarDate, currentMonth: calendarDate,
startDate: start, startDate: start,

2
fittrackee_client/src/components/Dashboard/index.jsx
View File

@ -55,7 +55,7 @@ class DashBoard extends React.Component {
<Records records={records} sports={sports} user={user} /> <Records records={records} sports={sports} user={user} />
</div> </div>
<div className="col-md-8"> <div className="col-md-8">
<Calendar /> <Calendar weekm={user.weekm} />
{activities.length > 0 ? ( {activities.length > 0 ? (
activities.map(activity => ( activities.map(activity => (
<ActivityCard <ActivityCard