2022-05-20 04:15:43 +00:00
|
|
|
import classNames from 'classnames';
|
2018-01-13 02:01:27 +00:00
|
|
|
import moment from 'moment';
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import React, { Component } from 'react';
|
|
|
|
import * as calendarViews from 'Calendar/calendarViews';
|
2022-05-20 04:15:43 +00:00
|
|
|
import getRelativeDate from 'Utilities/Date/getRelativeDate';
|
2018-01-13 02:01:27 +00:00
|
|
|
import styles from './DayOfWeek.css';
|
|
|
|
|
|
|
|
class DayOfWeek extends Component {
|
|
|
|
|
|
|
|
//
|
|
|
|
// Render
|
|
|
|
|
|
|
|
render() {
|
|
|
|
const {
|
|
|
|
date,
|
|
|
|
view,
|
|
|
|
isTodaysDate,
|
|
|
|
calendarWeekColumnHeader,
|
|
|
|
shortDateFormat,
|
|
|
|
showRelativeDates
|
|
|
|
} = this.props;
|
|
|
|
|
|
|
|
const highlightToday = view !== calendarViews.MONTH && isTodaysDate;
|
|
|
|
const momentDate = moment(date);
|
|
|
|
let formatedDate = momentDate.format('dddd');
|
|
|
|
|
|
|
|
if (view === calendarViews.WEEK) {
|
|
|
|
formatedDate = momentDate.format(calendarWeekColumnHeader);
|
|
|
|
} else if (view === calendarViews.FORECAST) {
|
2024-05-22 13:54:53 +00:00
|
|
|
formatedDate = getRelativeDate({ date, shortDateFormat, showRelativeDates });
|
2018-01-13 02:01:27 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className={classNames(
|
|
|
|
styles.dayOfWeek,
|
|
|
|
view === calendarViews.DAY && styles.isSingleDay,
|
|
|
|
highlightToday && styles.isToday
|
|
|
|
)}
|
|
|
|
>
|
|
|
|
{formatedDate}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
DayOfWeek.propTypes = {
|
|
|
|
date: PropTypes.string.isRequired,
|
|
|
|
view: PropTypes.string.isRequired,
|
|
|
|
isTodaysDate: PropTypes.bool.isRequired,
|
|
|
|
calendarWeekColumnHeader: PropTypes.string.isRequired,
|
|
|
|
shortDateFormat: PropTypes.string.isRequired,
|
|
|
|
showRelativeDates: PropTypes.bool.isRequired
|
|
|
|
};
|
|
|
|
|
|
|
|
export default DayOfWeek;
|