From f61406a77789238d30bb24e731116d9e8faa8fd1 Mon Sep 17 00:00:00 2001 From: MVN Date: Fri, 20 Aug 2021 11:54:16 +0400 Subject: [PATCH 1/2] try own bike --- src/index.js | 159 ++++++++++++++++++++++++++++----------------------- 1 file changed, 89 insertions(+), 70 deletions(-) diff --git a/src/index.js b/src/index.js index ebd513c..fe43433 100644 --- a/src/index.js +++ b/src/index.js @@ -5,68 +5,89 @@ import moment from "moment"; import "./index.css"; import "./calendar.css"; +class Calendar extends Component { + weekdayshort = ["Вс", "Пн", "Вт", "Ср", "Чт", "Пт", "Сб"]; + weekdayshortEng = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]; - - -class Calendar extends Component { - // weekdayshort = moment.weekdaysShort(); - weekdayshort = [ "Вс", "Пн", "Вт", "Ср", "Чт", "Пт", "Сб" ]; - weekdayshortEng = [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ]; - state = { + activeDate: new Date(), showYearTable: false, showMonthTable: false, showDateTable: true, dateObject: moment(), - allmonths: [ "Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь" ], - selectedDay: null + allmonths: [ + "Январь", + "Февраль", + "Март", + "Апрель", + "Май", + "Июнь", + "Июль", + "Август", + "Сентябрь", + "Октябрь", + "Ноябрь", + "Декабрь", + ], + selectedDay: null, }; - - + daysInMonth = () => { - return this.state.dateObject.daysInMonth(); + let year = this.state.activeDate.getFullYear(); + let month = this.state.activeDate.getMonth(); + if (isNaN(year) || isNaN(month)) { + return NaN; + } + let modMonth = month % 12; + year += (month - modMonth) / 12; + return modMonth === 1 + ? (year % 4 == 0 && year % 100 != 0) || year % 400 == 0 + ? 29 + : 28 + : 31 - ((modMonth % 7) % 2); }; year = () => { - return this.state.dateObject.format("Y"); + return +this.state.activeDate.getFullYear(); }; currentDay = () => { - return this.state.dateObject.format("D"); + return +this.state.activeDate.getDate(); }; firstDayOfMonth = () => { - let dateObject = this.state.dateObject; - let firstDay = moment(dateObject) - .startOf("month") - .format("d"); - return firstDay; + let firstDay = new Date( + this.state.activeDate.getFullYear(), + this.state.activeDate.getMonth(), + 1 + ).getDay(); // Day of week 0...6 + return +firstDay; }; month = () => { - return this.state.dateObject.format("MMMM"); + return this.state.allmonths[this.state.activeDate.getMonth()]; }; showMonth = (e, month) => { this.setState({ showMonthTable: !this.state.showMonthTable, - showDateTable: !this.state.showDateTable + showDateTable: !this.state.showDateTable, }); }; - setMonth = month => { + setMonth = (month) => { let monthNo = this.state.allmonths.indexOf(month); let dateObject = Object.assign({}, this.state.dateObject); dateObject = moment(dateObject).set("month", monthNo); this.setState({ dateObject: dateObject, showMonthTable: !this.state.showMonthTable, - showDateTable: !this.state.showDateTable + showDateTable: !this.state.showDateTable, }); }; - MonthList = props => { + MonthList = (props) => { let months = []; - props.data.map(data => { + props.data.map((data) => { months.push( { + onClick={(e) => { this.setMonth(data); }} > @@ -76,7 +97,7 @@ class Calendar extends Component { }); let rows = []; let cells = []; - + months.forEach((row, i) => { if (i % 3 !== 0 || i == 0) { cells.push(row); @@ -90,7 +111,7 @@ class Calendar extends Component { let monthlist = rows.map((d, i) => { return {d}; }); - + return ( @@ -102,13 +123,13 @@ class Calendar extends Component {
); }; - showYearTable = e => { + showYearTable = (e) => { this.setState({ showYearTable: !this.state.showYearTable, - showDateTable: !this.state.showDateTable + showDateTable: !this.state.showDateTable, }); }; - + onPrev = () => { let curr = ""; if (this.state.showYearTable === true) { @@ -117,7 +138,7 @@ class Calendar extends Component { curr = "month"; } this.setState({ - dateObject: this.state.dateObject.subtract(1, curr) + dateObject: this.state.dateObject.subtract(1, curr), }); }; onNext = () => { @@ -128,20 +149,20 @@ class Calendar extends Component { curr = "month"; } this.setState({ - dateObject: this.state.dateObject.add(1, curr) + dateObject: this.state.dateObject.add(1, curr), }); }; - setYear = year => { + setYear = (year) => { // alert(year) let dateObject = Object.assign({}, this.state.dateObject); dateObject = moment(dateObject).set("year", year); this.setState({ dateObject: dateObject, showMonthTable: !this.state.showMonthTable, - showYearTable: !this.state.showYearTable + showYearTable: !this.state.showYearTable, }); }; - onYearChange = e => { + onYearChange = (e) => { this.setYear(e.target.value); }; getDates(startDate, stopDate) { @@ -154,21 +175,18 @@ class Calendar extends Component { } return dateArray; } - YearTable = props => { + YearTable = (props) => { let months = []; - let nextten = moment() - .set("year", props) - .add("year", 12) - .format("Y"); - + let nextten = moment().set("year", props).add("year", 12).format("Y"); + let tenyear = this.getDates(props, nextten); - - tenyear.map(data => { + + tenyear.map((data) => { months.push( { + onClick={(e) => { this.setYear(data); }} > @@ -178,7 +196,7 @@ class Calendar extends Component { }); let rows = []; let cells = []; - + months.forEach((row, i) => { if (i % 3 !== 0 || i == 0) { cells.push(row); @@ -192,7 +210,7 @@ class Calendar extends Component { let yearlist = rows.map((d, i) => { return {d}; }); - + return ( @@ -207,7 +225,7 @@ class Calendar extends Component { onDayClick = (e, d) => { this.setState( { - selectedDay: d + selectedDay: d, }, () => { console.log("SELECTED DAY: ", this.state.selectedDay); @@ -215,7 +233,7 @@ class Calendar extends Component { ); }; render() { - let weekdayshortname = this.weekdayshort.map(day => { + let weekdayshortname = this.weekdayshort.map((day) => { return ; }); let blanks = []; @@ -228,7 +246,7 @@ class Calendar extends Component { daysInMonth.push( {d}; }); - + return (
{ + onClick={(e) => { this.onPrev(); }} - class="calendar-button button-prev" + className="calendar-button button-prev" /> {!this.state.showMonthTable && ( { + onClick={(e) => { this.showMonth(); }} - class="calendar-label" + className="calendar-label" > {this.month()} )} - this.showYearTable()}> + this.showYearTable()} + > {this.year()} - { - this.onNext(); - }} - className="calendar-button button-next" - /> + { + this.onNext(); + }} + className="calendar-button button-next" + />
- +
{this.state.showYearTable && } {this.state.showMonthTable && ( )}
- + {this.state.showDateTable && (
{day} { + onClick={(e) => { this.onDayClick(e, d); }} > @@ -240,7 +258,7 @@ class Calendar extends Component { var totalSlots = [...blanks, ...daysInMonth]; let rows = []; let cells = []; - + totalSlots.forEach((row, i) => { if (i % 7 !== 0) { cells.push(row); @@ -254,48 +272,51 @@ class Calendar extends Component { rows.push(cells); } }); - + let daysinmonth = rows.map((d, i) => { return
@@ -309,9 +330,8 @@ class Calendar extends Component { ); } - - -/* render() { + + /* render() { return (
@@ -322,7 +342,6 @@ class Calendar extends Component { } */ } - ReactDOM.render( From 312ff6ca0d9b109675e24213d48942caf42cbcc9 Mon Sep 17 00:00:00 2001 From: ZarNizza Date: Fri, 20 Aug 2021 12:13:51 +0400 Subject: [PATCH 2/2] refactor --- src/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/index.js b/src/index.js index fe43433..f2853ef 100644 --- a/src/index.js +++ b/src/index.js @@ -4,7 +4,6 @@ import moment from "moment"; // import { range } from "moment-range"; import "./index.css"; import "./calendar.css"; - class Calendar extends Component { weekdayshort = ["Вс", "Пн", "Вт", "Ср", "Чт", "Пт", "Сб"]; weekdayshortEng = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];