JSFiddle - React, Tailwind, and code Playground
JavaScript
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { SelectableGroup } from 'react-selectable-fast';
import time from '../../lib/standardTime';
import { makeDatestamp } from '../../lib/timeFormatting';
import Cell from './Cell';
import './month.css';
function getTime(month) {
return time({ month });
}
export default class Month extends PureComponent {
constructor(props) {
super(props);
this.onSelectionFinish = this.onSelectionFinish.bind(this);
this.renderDayCell = this.renderDayCell.bind(this);
}
// TODO: re-introduce duringSelection
onSelectionFinish(selection) {
if (selection.length === 0) return;
const { onSelect } = this.props;
const selectedEvents = selection.map(component => component.props.event);
onSelect(selectedEvents);
}
grabEvent(date) {
const { events } = this.props;
const datestamp = makeDatestamp(date);
const event = events[datestamp] || {};
return { ...event, datestamp };
}
renderDayHeaderCells() {
return (
<thead>
<tr>
{[0, 1, 2, 3, 4, 5, 6].map(dayOfWeek => (
<td key={dayOfWeek}>
<span styleName="desktop">
{time()
.day(dayOfWeek)
.format('dddd')}
</span>
<span styleName="mobile">
{time()
.day(dayOfWeek)
.format('ddd')}
</span>
</td>
))}
</tr>
</thead>
);
}
renderDayCell(date) {
const { visibleMonth } = this.props;
const event = this.grabEvent(date);
return <Cell key={event.datestamp} visibleMonth={visibleMonth} event={event} />;
}
renderPrevMonthDays() {
const { visibleMonth } = this.props;
const month = getTime(visibleMonth);
const firstDayOfWeek = month.day();
if (firstDayOfWeek === 0) return null;
const prevMonth = time(month)
.subtract(1,...