Skip to content

Commit

Permalink
Calendar Selection Bug Fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@peeyush-sahu
peeyush-sahu committed Jan 28, 2019
1 parent bdf9440 commit ee971ff
Show file tree
Hide file tree
Showing 3 changed files with 70 additions and 51 deletions.
2 changes: 1 addition & 1 deletion dist/index.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-pure-calendar",
"version": "1.1.1",
"version": "1.1.2",
"description": "Awesome calendar for your React App.",
"main": "dist/index.js",
"scripts": {
Expand Down
117 changes: 68 additions & 49 deletions src/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, {Component} from "react";
import moment from 'moment';
import moment from "moment";
import "./styles.css";

class Calendar extends Component {
Expand Down Expand Up @@ -45,7 +45,7 @@ class Calendar extends Component {
: currYear,
currMonth: (currMonth + 1) % 12
}, () => {
this.showCalendar()
this.showCalendar();
});
};

Expand All @@ -59,7 +59,7 @@ class Calendar extends Component {
? 11
: currMonth - 1
}, () => {
this.showCalendar()
this.showCalendar();
});
};

Expand All @@ -68,7 +68,7 @@ class Calendar extends Component {
this.setState({
currYear: currYear + 1
}, () => {
this.showCalendar()
this.showCalendar();
});
};

Expand All @@ -77,7 +77,7 @@ class Calendar extends Component {
this.setState({
currYear: currYear - 1
}, () => {
this.showCalendar()
this.showCalendar();
});
};

Expand All @@ -91,9 +91,9 @@ class Calendar extends Component {
this.setState({
yearsArr: years
}, () => {
this.showCalendar()
this.showCalendar();
});
}
};

nextYears = () => {
const {yearsArr} = this.state;
Expand All @@ -105,9 +105,9 @@ class Calendar extends Component {
this.setState({
yearsArr: years
}, () => {
this.showCalendar()
this.showCalendar();
});
}
};

showCalendar = () => {
const {currMonth, currYear, today, selectedDate} = this.state;
Expand All @@ -128,7 +128,6 @@ class Calendar extends Component {
for (let i = 0; i < 6; i++) {
let row = document.createElement("tr");
for (let j = 0; j < 7; j++) {

if (i === 0 && j < firstDay) {
let cell = document.createElement("td");
let cellText = document.createTextNode("");
Expand Down Expand Up @@ -175,7 +174,7 @@ class Calendar extends Component {

if (disabledDates) {
for (let dd = 0; dd < disabledDates.length; dd++) {
if (this.getFormattedDate(disabledDates[dd]).dt === date && (this.getFormattedDate(disabledDates[dd]).mt - 1) === currMonth && this.getFormattedDate(disabledDates[dd]).yr === currYear) {
if (this.getFormattedDate(disabledDates[dd]).dt === date && this.getFormattedDate(disabledDates[dd]).mt - 1 === currMonth && this.getFormattedDate(disabledDates[dd]).yr === currYear) {
cellDiv
.classList
.add("disabled");
Expand All @@ -200,10 +199,9 @@ class Calendar extends Component {
.classList
.add("currDate");
}

}

if (selectedDate && date === selectedDate && (parseInt(moment(this.props.defaultDate).format("M")) - 1) === currMonth && parseInt(moment(this.props.defaultDate).format("YYYY")) === currYear) {
if (selectedDate && date === selectedDate && parseInt(moment(this.props.defaultDate).format("M")) - 1 === currMonth && parseInt(moment(this.props.defaultDate).format("YYYY")) === currYear) {
if (selectedDateClass) {
cellDiv
.classList
Expand All @@ -225,28 +223,33 @@ class Calendar extends Component {

tbl.appendChild(row);
}
}
};

getFormattedDate = (date) => {
getFormattedDate = date => {
let dt = parseInt(`${date.split("")[6]}${date.split("")[7]}`);
let mt = parseInt(`${date.split("")[4]}${date.split("")[5]}`);
let yr = parseInt(`${date.split("")[0]}${date.split("")[1]}${date.split("")[2]}${date.split("")[3]}`);
let value = {
dt,
mt,
yr
}
};
return value;
}
};

getValue = (val, format) => {
const {currMonth, currYear} = this.state;
let {currMonth, currYear} = this.state;
const {onSelect} = this.props;
if (val <= 1 || val <= 9) {
val = `0${val}`;
}
onSelect(moment(`${currYear}${currMonth + 1}${val}`).format(format));
}
if (currMonth <= 1 || currMonth <= 8) {
currMonth = `0${currMonth + 1}`;
} else {
currMonth = currMonth + 1;
}
onSelect(moment(`${currYear}${currMonth}${val}`).format(format));
};

showMonths = () => {
this.setState({showMonth: true, showYear: false});
Expand All @@ -260,27 +263,27 @@ class Calendar extends Component {
years[i] = currYear + i;
}
this.setState({yearsArr: years});
}
};

setMonth = (val) => {
setMonth = val => {
this.setState({
currMonth: val,
showMonth: false
}, () => {
this.showCalendar()
this.showCalendar();
});
}
};

setYear = (val) => {
setYear = val => {
this.setState({
currYear: val,
showMonth: false,
showYear: false,
yearsArr: []
}, () => {
this.showCalendar()
this.showCalendar();
});
}
};

showToday = () => {
this.setState({
Expand All @@ -290,9 +293,9 @@ class Calendar extends Component {
showYear: false,
yearsArr: []
}, () => {
this.showCalendar()
})
}
this.showCalendar();
});
};

render() {
const {
Expand All @@ -308,43 +311,54 @@ class Calendar extends Component {
<div className="calendarCont">
<div className="calendarHeader">
<div>
{!showYear && <button
{!showYear && (<button
title="Previous Year"
className="btn"
id="prevYearBtn"
onClick={this.previousYear}></button>}
{!showMonth && !showYear && <button
onClick={this.previousYear}/>)}
{!showMonth && !showYear && (<button
title="Previous Month"
className="btn"
id="prevMonthBtn"
onClick={this.previousMonth}></button>}
{showYear && <button
onClick={this.previousMonth}/>)}
{showYear && (<button
title="Previous Years"
className="btn"
id="prevYearsBtn"
onClick={this.previousYears}></button>}
onClick={this.previousYears}/>)}
</div>
<div className="rowEnd">
{!showMonth && !showYear && <a href="#foo" className="link monthLink" onClick={this.showMonths}>{months[currMonth]}</a>}
{!showYear && <a href="#bar" className="link yearLink" onClick={this.showYears}>{currYear}</a>}
{showYear && <a href="#bar" className="link yearLink">{`${yearsArr[0]} - ${yearsArr[11]}`}</a>}
{!showMonth && !showYear && (
<a href="#foo" className="link monthLink" onClick={this.showMonths}>
{months[currMonth]}
</a>
)}
{!showYear && (
<a href="#bar" className="link yearLink" onClick={this.showYears}>
{currYear}
</a>
)}
{showYear && (
<a href="#bar" className="link yearLink">{`${yearsArr[0]} - ${
yearsArr[11]}`}</a>
)}
</div>
<div>
{!showMonth && !showYear && <button
{!showMonth && !showYear && (<button
title="Next Month"
className="btn"
id="nextMonthBtn"
onClick={this.nextMonth}></button>}
{!showYear && <button
onClick={this.nextMonth}/>)}
{!showYear && (<button
title="Next Year"
className="btn"
id="nextYearBtn"
onClick={this.nextYear}></button>}
{showYear && <button
onClick={this.nextYear}/>)}
{showYear && (<button
title="Next Years"
className="btn"
id="nextYearsBtn"
onClick={this.nextYears}></button>}
onClick={this.nextYears}/>)}
</div>
</div>
<div className="calendarBody">
Expand All @@ -362,7 +376,8 @@ class Calendar extends Component {
onClick={() => this.setYear(y)}>
<span>{y}</span>
</a>
))}</div>
))}
</div>
<div
className={showMonth
? "monthsCont show"
Expand Down Expand Up @@ -391,13 +406,17 @@ class Calendar extends Component {
<th>Sa</th>
</tr>
</thead>
<tbody id="calendar-body"></tbody>
<tbody id="calendar-body"/>
</table>
</div>
{showToday && <div className="todayCont" onClick={this.showToday}>Today</div>}
{showToday && (
<div className="todayCont" onClick={this.showToday}>
Today
</div>
)}
</div>
);
}
}

export default Calendar;
export default Calendar;

0 comments on commit ee971ff

Please sign in to comment.