85 lines
2.3 KiB
JavaScript
85 lines
2.3 KiB
JavaScript
import Calendar from 'react-calendar'
|
|
import { getPriorityColor } from '../../utils/Colors'
|
|
import styles from './Calendar.module.css'
|
|
const CalendarMonthly = ({ chores, onDateChange }) => {
|
|
const tileContent = ({ date, view }) => {
|
|
if (view === 'month') {
|
|
const dayChores = chores.filter(chore => {
|
|
const choreDate = new Date(chore.nextDueDate).toLocaleDateString()
|
|
const tileDate = date.toLocaleDateString()
|
|
return choreDate === tileDate
|
|
})
|
|
if (dayChores.length === 0) {
|
|
return (
|
|
<div className={styles.dotContainer}>
|
|
<span className={styles.dotEmpty}></span>
|
|
</div>
|
|
)
|
|
}
|
|
if (dayChores.length > 3) {
|
|
return (
|
|
<div className={styles.dotContainer}>
|
|
<span
|
|
className={styles.dotWithLine}
|
|
style={{
|
|
backgroundColor: getPriorityColor(dayChores[0].priority),
|
|
}}
|
|
></span>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className={styles.dotContainer}>
|
|
{dayChores.map((chore, index) => {
|
|
return (
|
|
<span
|
|
key={index}
|
|
className={styles.dot}
|
|
style={{
|
|
backgroundColor: getPriorityColor(chore.priority),
|
|
}}
|
|
></span>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
}
|
|
return null
|
|
}
|
|
return (
|
|
<div className={styles.reactCalendar}>
|
|
<Calendar
|
|
tileContent={tileContent}
|
|
onChange={d => {
|
|
onDateChange(new Date(d))
|
|
}}
|
|
// format the days from MON, TUE, WED, THU, FRI, SAT, SUN to first three letters:
|
|
formatShortWeekday={(locale, date) =>
|
|
['S', 'M', 'T', 'W', 'T', 'F', 'S'][date.getDay()]
|
|
}
|
|
// format month names to show only first 3 characters
|
|
formatMonth={(locale, date) => {
|
|
const monthNames = [
|
|
'Jan',
|
|
'Feb',
|
|
'Mar',
|
|
'Apr',
|
|
'May',
|
|
'Jun',
|
|
'Jul',
|
|
'Aug',
|
|
'Sep',
|
|
'Oct',
|
|
'Nov',
|
|
'Dec',
|
|
]
|
|
return monthNames[date.getMonth()]
|
|
}}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default CalendarMonthly
|