@shakthillc/components
Version:
React generic components for shakthi products
316 lines (307 loc) • 10.9 kB
JavaScript
import React from "react";
import style from "./Calendar.module.css";
import _ from "lodash";
import Icon from "@material-ui/core/Icon";
export default class Calendar extends React.Component {
constructor(props) {
super(props);
this.type = "hdrCont_" + this.props.type;
this.getCurrentMonth = function () {
this.date = new Date();
return this.date.getMonth();
};
this.full_month_name = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];
this.date = new Date();
this.current_month = this.date.getMonth();
this.current_year = this.date.getFullYear();
this.constMonth = this.date.getMonth();
this.constYear = this.date.getFullYear();
this.state = {
dateProperty: {
cDate: this.date.getDate(),
cMonth: this.full_month_name[this.getCurrentMonth()],
cYear: this.current_year,
},
selectedDate: {
sDate: "",
sMonth: this.full_month_name[this.getCurrentMonth()],
sYear: this.current_year,
// sDate: this.date.getDate(),
// sMonth: this.full_month_name[this.getCurrentMonth()],
// sYear: this.current_year,
},
};
let tempDate = new Date(this.current_year, this.current_month + 1, 0);
this.number_of_days = tempDate.getDate();
this.firstDayOfMonth =
new Date(this.current_year, this.current_month, 1).getDay() + 1;
this.handleDate = this.handleDate.bind(this);
this.handleClass = this.handleClass.bind(this);
}
static getDerivedStateFromProps(props, current_state) {
if (props.selectDate != "" && props.selectDate != null) {
if (props.selectDate["date"]) {
var { date, month, year } = props.selectDate;
let selectedDate = { sDate: date, sMonth: month, sYear: year };
return { selectedDate };
}
} else {
return null;
}
}
handleClass(row, day, presentDay) {
let days = [1, 2, 3, 4, 5, 6, 7];
var { disablePastDate } = this.props;
//console.log(disablePastDate)
const { selectedDate, dateProperty } = this.state;
//console.log("testing",presentDay == dateProperty.cDate)
var tempDate = new Date();
var dayCalc = row * 7 + day - this.firstDayOfMonth + 1;
if (
dayCalc == tempDate.getDate() &&
selectedDate["sDate"] != tempDate.getDate() &&
dateProperty["cMonth"] == this.full_month_name[tempDate.getMonth()] &&
dateProperty["cYear"] == tempDate.getFullYear()
) {
return style.current_date_highlight;
} else {
//console.log(selectedDate['sDate'] == dayCalc)
//console.log(dayCalc,dateProperty['cMonth'], dateProperty["cYear"])
//console.log("add", selectedDate['sDate'], selectedDate['sMonth'], selectedDate["sYear"] )
//console.log(selectedDate['sYear'] ,"dei",this.current_year )
if (
disablePastDate &&
this.full_month_name[this.getCurrentMonth()] ==
dateProperty["cMonth"] &&
selectedDate["sYear"] == this.current_year
) {
if (dayCalc < dateProperty.cDate) {
//console.log("inpo",selectedDate['sMonth'])
return style.data_past;
}
}
var returnClass =
selectedDate["sDate"] == dayCalc &&
selectedDate["sMonth"] === dateProperty["cMonth"] &&
selectedDate["sYear"] === dateProperty["cYear"]
? style.date_highlight
: style.date;
//console.log(returnClass)
return returnClass;
}
}
handleDate(e) {
var { onSelectDate, disablePastDate } = this.props;
const dateProperty = { ...this.state.dateProperty };
const selectedDate = { ...this.state.selectedDate };
selectedDate["sDate"] = e;
selectedDate["sMonth"] = dateProperty["cMonth"];
selectedDate["sYear"] = dateProperty["cYear"];
this.setState({ selectedDate });
if (disablePastDate) {
if (
selectedDate["sDate"] >= dateProperty.cDate ||
selectedDate["sMonth"] !== this.full_month_name[this.getCurrentMonth()]
) {
onSelectDate && onSelectDate(selectedDate);
}
} else {
onSelectDate && onSelectDate(selectedDate);
}
}
getInnerCalendar() {
let innerHtml = null;
let { disableDate = [] } = this.props;
let rows = [0, 1, 2, 3, 4, 5];
let days = [1, 2, 3, 4, 5, 6, 7];
innerHtml = rows.map((row, index) => {
return (
<div className={style.w100} key={index}>
{days.map((day, index) => {
let paraClass = this.handleClass(
row,
day,
row * 7 + day - this.firstDayOfMonth + 1
);
if (
row * 7 + day >= this.firstDayOfMonth &&
row * 7 + day - this.firstDayOfMonth + 1 <= this.number_of_days
) {
return (
<p
className={
disableDate.includes(day)
? paraClass === style.current_date_highlight
? style.data_past_current
: style.data_past
: paraClass
}
key={index}
onClick={(e) =>
!disableDate.includes(day) &&
paraClass !== style.data_past &&
this.handleDate(row * 7 + day - this.firstDayOfMonth + 1)
}
data-id={
this.full_month_name[this.current_month].toLowerCase() +
(row * 7 + day - this.firstDayOfMonth + 1)
}
>
<span
className={
paraClass === style.date
? style.innerdate
: style["innerdate--disabled"]
}
>
{row * 7 + day - this.firstDayOfMonth + 1 < 10 ? "0" : ""}
{row * 7 + day - this.firstDayOfMonth + 1}
</span>
</p>
);
} else {
return (
<p className={style.emptyDate} key={index}>
<span className={style["innerdate--disabled"]}>
{/* {row * 7 + day - this.firstDayOfMonth + 1 < 10 ? "0" : ""}
{row * 7 + day - this.firstDayOfMonth + 1} */}
</span>
</p>
);
}
})}
</div>
);
});
// for (let row of rows) {
// for (let day of days) {
// if (
// row * 7 + day >= this.firstDayOfMonth &&
// row * 7 + day - this.firstDayOfMonth + 1 <= this.number_of_days
// ) {
// console.log(row * 7 + day - this.firstDayOfMonth + 1);
// }
// }
// }
return innerHtml;
}
setDateProperty(month, year) {
const dateProperty = { ...this.state.dateProperty };
dateProperty["cMonth"] = month;
dateProperty["cYear"] = year;
this.setState({ dateProperty });
}
monthChanged(isNext) {
if (isNext) {
this.current_month++;
if (this.current_month < 12) {
this.setDateProperty(
this.full_month_name[this.current_month],
this.current_year
);
} else {
this.current_month = this.current_month % 12;
this.current_year++;
this.setDateProperty(
this.full_month_name[this.current_month],
this.current_year
);
}
} else {
if (
this.current_month === this.constMonth &&
this.current_year === this.constYear
) {
return;
}
this.current_month--;
if (this.current_month < 0) {
this.current_month += 12;
this.current_year--;
this.setDateProperty(
this.full_month_name[this.current_month],
this.current_year
);
} else {
this.setDateProperty(
this.full_month_name[this.current_month],
this.current_year
);
}
}
let tempDate = new Date(this.current_year, this.current_month + 1, 0);
this.number_of_days = tempDate.getDate();
this.firstDayOfMonth =
new Date(this.current_year, this.current_month, 1).getDay() + 1;
}
render() {
//console.log(this.full_month_name[this.current_month].toLowerCase());
const { dateProperty, selectedDate } = this.state;
//add year check in later update
let disablePrev =
this.full_month_name[this.constMonth] === dateProperty.cMonth
? true
: false;
// console.log(disablePrev,dateProperty.cMonth)
let innerHtml = this.getInnerCalendar();
return (
<React.Fragment>
<section className={style.mainCont}>
<section style={{ height: "20%" }}>
<div className={style.divHeader}>
<div className={style.dym}>
<strong>
{dateProperty.cMonth} {dateProperty.cYear}
</strong>
</div>
<div style={{ display: "flex" }}>
<div
className={style.nxtNforw}
onClick={this.monthChanged.bind(this, false)}
data-id="arrow_left"
>
<Icon style={{ color: disablePrev ? "#dadada" : "#005397" }}>
keyboard_arrow_left
</Icon>
</div>
<div
className={style.nxtNprev}
onClick={this.monthChanged.bind(this, true)}
data-id="arrow_right"
>
<Icon style={{ color: "#005397" }}>keyboard_arrow_right</Icon>
</div>
</div>
</div>
<div className={style.days_row}>
<div className={style.internal_day_row}>
<div className={style.days}>S</div>
<div className={style.days}>M</div>
<div className={style.days}>T</div>
<div className={style.days}>W</div>
<div className={style.days}>T</div>
<div className={style.days}>F</div>
<div className={style.days}>S</div>
</div>
</div>
</section>
<hr className={style.lineBreak} />
<div class={style.innerdiv}>{innerHtml}</div>
</section>
</React.Fragment>
);
}
}