diff --git a/src/routes/Calendar/Calendar.js b/src/routes/Calendar/Calendar.js
index 2e780cead..ab9a8bf57 100644
--- a/src/routes/Calendar/Calendar.js
+++ b/src/routes/Calendar/Calendar.js
@@ -91,9 +91,7 @@ class Calendar extends Component {
};
}
- renderMonthButton(month) {
- const date = new Date(new Date(month).setDate(1));
-
+ renderMonthButton(date) {
return (
date.getMonth() === this.state.date.getMonth() ?
{months[date.getMonth()]}
@@ -102,9 +100,63 @@ class Calendar extends Component {
);
}
- render() {
+ renderMonthRows = () => {
const { padsCount, daysCount, rowsCount } = this.getMonthInfo(this.state.date);
+ var rows = [];
+ for (let row = 0; row < rowsCount; row++) {
+ rows.push(
+
+ {this.renderMonthDays(row, rowsCount, padsCount, daysCount)}
+
+ )
+ }
+ return rows;
+ }
+
+ renderMonthDays = (row, rowsCount, padsCount, daysCount) => {
+ var days = [];
+
+ for (let day = 0; day < 7; day++) {
+ days.push(
+ day < padsCount && row === 0
+ ?
+
+ :
+ (row * 7) + (day - padsCount) < daysCount
+ ?
+
+
+
{(row * 7) + (day - padsCount + 1)}
+
+
+ {this.props.metaItems
+ .map((metaitem) => metaitem.videos
+ .filter((video) => video.released.getFullYear() === this.state.date.getFullYear() && video.released.getMonth() === this.state.date.getMonth() && video.released.getDate() === (row * 7) + (day - padsCount + 1))
+ .map((video) =>
+
+ )
+ )}
+
+
+ :
+ null
+ )
+ }
+ return days;
+ }
+
+ render() {
const videosDates = this.props.metaItems
.map((metaitem) => metaitem.videos
.filter((video) => video.released.getFullYear() === this.state.date.getFullYear() && video.released.getMonth() === this.state.date.getMonth()))
@@ -119,70 +171,15 @@ class Calendar extends Component {
- {this.renderMonthButton(new Date((new Date(this.state.date)).setMonth(this.state.date.getMonth() - 1)))}
+ {this.renderMonthButton(new Date(this.state.date.getFullYear(), this.state.date.getMonth() - 1), 1)}
{this.renderMonthButton(this.state.date)}
- {this.renderMonthButton(new Date((new Date(this.state.date)).setMonth(this.state.date.getMonth() + 1)))}
+ {this.renderMonthButton(new Date(this.state.date.getFullYear(), this.state.date.getMonth() + 1), 1)}
{days.map((day) =>
{day}
)}
- {
- (() => {
- var rows = [];
-
- for (let row = 0; row < rowsCount; row++) {
- rows.push(
-
- {
- (() => {
- var days = [];
-
- for (let day = 0; day < 7; day++) {
- days.push(
- day < padsCount && row === 0
- ?
-
- :
- (row * 7) + (day - padsCount) < daysCount
- ?
-
-
-
{(row * 7) + (day - padsCount + 1)}
-
-
- {this.props.metaItems
- .map((metaitem) => metaitem.videos
- .filter((video) => video.released.getFullYear() === this.state.date.getFullYear() && video.released.getMonth() === this.state.date.getMonth() && video.released.getDate() === (row * 7) + (day - padsCount + 1))
- .map((video) =>
-
- )
- )}
-
-
- :
- null
- )
- }
- return days;
- })()
- }
-
- )
- }
- return rows;
- })()
- }
+ {this.renderMonthRows()}