@abbl/material-calendar
Version:
Calendar component build with React and Material-UI
62 lines • 3.24 kB
JavaScript
var __spreadArrays = (this && this.__spreadArrays) || function () {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
};
import { addDays, eachDayOfInterval, endOfMonth, startOfMonth, subDays } from 'date-fns';
import React from 'react';
import CalendarEventUtils from '../../../common/tools/CalendarEventUtils';
import MonthGridElement from './MonthGridElement';
function MonthGrid(props) {
var monthStart = startOfMonth(props.date);
var monthEnd = endOfMonth(props.date);
var monthDays = __spreadArrays(eachDayOfInterval({ start: monthStart, end: monthEnd }));
function renderGrid() {
//Each grid row(week) is stored in that array.
var gridRow = [];
//Every day is stored here before pushing it to gridRow,
//array is set to empty after pushing a row into gridRow array
var gridColumns = [];
fillOutMissingDaysOfMonth();
monthDays.forEach(function (day, index) {
gridColumns.push(React.createElement("div", { key: index, style: { display: 'flex', flex: 1 } },
React.createElement(MonthGridElement, { date: day, key: day.toLocaleString(), displayDayOfWeekIndication: index < 7, indicatePreviousMonth: day.getMonth() !== props.date.getMonth(), dayEvents: CalendarEventUtils.getDayEvents(props.eventStorage, day) })));
//If (index + 1) is divided by 7 we push a gridColumns into gridRow.
if ((index + 1) % 7 === 0) {
gridRow.push(gridColumns);
//Emptying the array to insert days from next week into it.
gridColumns = [];
}
});
return gridRow.map(function (grid, index) {
return (React.createElement("div", { key: 'grid-' + index, style: { flexDirection: 'row', display: 'flex', flexGrow: 1, flexBasis: 0 } }, grid));
});
}
/**
* Since we display 35 days in our calendar we have to
* fill out missing days with days from previous and next month.
*/
function fillOutMissingDaysOfMonth() {
if (monthStart.getDay() !== 0) {
insertDaysFromPreviousMonth();
}
if (monthEnd.getDay() !== 6) {
insertDaysFromNextMonth();
}
}
function insertDaysFromPreviousMonth() {
var daysBeforeStartDate = subDays(monthStart, monthStart.getDay());
monthDays = __spreadArrays(eachDayOfInterval({ start: daysBeforeStartDate, end: subDays(monthStart, 1) }), monthDays);
}
function insertDaysFromNextMonth() {
var missingDays = 6 - monthEnd.getDay();
var daysAferEndDate = addDays(monthEnd, missingDays);
monthDays = __spreadArrays(monthDays, eachDayOfInterval({ start: addDays(monthEnd, 1), end: daysAferEndDate }));
}
return (React.createElement("div", { style: { height: 'calc(100vh - 64px)' } },
React.createElement("div", { style: { display: 'flex', flexDirection: 'column', height: '100%' } }, renderGrid())));
}
export default MonthGrid;
//# sourceMappingURL=MonthGrid.js.map