Client - display WE days with different BG color on calendar - fix #43

This commit is contained in:
Sam 2019-12-29 10:42:01 +01:00
parent 038610e7f6
commit 40edbe19ce
2 changed files with 47 additions and 38 deletions

View File

@ -330,10 +330,6 @@ label {
color: lightgrey; color: lightgrey;
} }
.img-disabled {
opacity: .4;
}
.leaflet-container { .leaflet-container {
height: 400px; height: 400px;
} }
@ -578,3 +574,11 @@ label {
flex-basis: calc(100%/7); flex-basis: calc(100%/7);
width: calc(100%/7); width: calc(100%/7);
} }
.calendar .body .img-disabled {
opacity: .4;
}
.calendar .body .weekend {
background: #f5f5f5;
}

View File

@ -92,7 +92,7 @@ class Calendar extends React.Component {
} }
renderCells() { renderCells() {
const { currentMonth, startDate, endDate } = this.state const { currentMonth, startDate, endDate, weekStartOnMonday } = this.state
const { sports } = this.props const { sports } = this.props
const dateFormat = 'd' const dateFormat = 'd'
@ -106,9 +106,13 @@ class Calendar extends React.Component {
for (let i = 0; i < 7; i++) { for (let i = 0; i < 7; i++) {
formattedDate = format(day, dateFormat) formattedDate = format(day, dateFormat)
const dayActivities = this.filterActivities(day) const dayActivities = this.filterActivities(day)
const isDisabled = isSameMonth(day, currentMonth) ? '' : 'disabled' const isDisabled = isSameMonth(day, currentMonth) ? '' : '-disabled'
const isWeekEnd = weekStartOnMonday
? [5, 6].includes(i)
: [0, 6].includes(i)
days.push( days.push(
<div className={`col cell img-${isDisabled}`} key={day}> <div className={`col cell ${isWeekEnd ? ' weekend' : ''}`} key={day}>
<div className={`img${isDisabled}`}>
<span className="number">{formattedDate}</span> <span className="number">{formattedDate}</span>
{dayActivities.map(act => ( {dayActivities.map(act => (
<Link key={act.id} to={`/activities/${act.id}`}> <Link key={act.id} to={`/activities/${act.id}`}>
@ -141,6 +145,7 @@ class Calendar extends React.Component {
</Link> </Link>
))} ))}
</div> </div>
</div>
) )
day = addDays(day, 1) day = addDays(day, 1)
} }