|
|
import moment from "jalali-moment"; |
|
|
import { useEffect, useState } from "react"; |
|
|
import Days from "./Days"; |
|
|
import MobileEventBox from "./MobileEventBox"; |
|
|
import Title from "./Title"; |
|
|
import Week from "./Week"; |
|
|
|
|
|
let weekList = [ |
|
|
"شنبه", |
|
|
"یکشنبه", |
|
|
"دوشنبه", |
|
|
"سهشنبه", |
|
|
"چهارشنبه", |
|
|
"پنجشنبه", |
|
|
"جمعه", |
|
|
]; |
|
|
//--- |
|
|
let monthList = [ |
|
|
"فروردین", |
|
|
"اردیبهشت", |
|
|
"خرداد", |
|
|
"تیر", |
|
|
"مرداد", |
|
|
"شهریور", |
|
|
"مهر", |
|
|
"آبان", |
|
|
"آذر", |
|
|
"دی", |
|
|
"بهمن", |
|
|
"اسفند", |
|
|
]; |
|
|
//--- |
|
|
let eventList = [ |
|
|
{ |
|
|
id: 1, |
|
|
title: "رویداد1", |
|
|
date: "2022-05-12 10:12:19.693+04:30", |
|
|
type: 1, |
|
|
}, |
|
|
{ |
|
|
id: 2, |
|
|
title: "رویداد2", |
|
|
date: "2022-05-16 10:12:19.693+04:30", |
|
|
type: 1, |
|
|
}, |
|
|
{ |
|
|
id: 3, |
|
|
title: "رویداد3", |
|
|
date: "2022-05-16 18:12:19.693+04:30", |
|
|
type: 2, |
|
|
}, |
|
|
]; |
|
|
//-- |
|
|
let rightDay =[0,1,7,8,14,15,21,22,28,29,35,36] |
|
|
let eventBoxTop =84; |
|
|
let eventBoxRight=8; |
|
|
let eventBoxisRight=true; |
|
|
//find current date-------------- |
|
|
let now = moment(); |
|
|
now.locale("fa"); |
|
|
console.log("now:"); |
|
|
console.log(now.format("YYYY/M/D")); |
|
|
let currentYear = Number(now.format("YYYY/M/D").split("/")[0]); |
|
|
console.log("Y:"); |
|
|
console.log(currentYear); |
|
|
console.log("M:"); |
|
|
console.log(Number(now.format("MM"))); |
|
|
let currentMonth = Number(now.format("MM")); |
|
|
console.log("D:"); |
|
|
console.log(Number(now.format("DD"))); |
|
|
let currentDay = Number(now.format("DD")); |
|
|
console.log(now.weekday()); |
|
|
console.log("----------------------------------------1"); |
|
|
|
|
|
//========================================================================== |
|
|
const Calendar2 = ({ primaryColor }) => { |
|
|
const [year, setYear] = useState(currentYear); |
|
|
const [month, setMonth] = useState(currentMonth); |
|
|
|
|
|
//NextMonth-------------------------- |
|
|
const NextMonth = () => { |
|
|
if (month !== 12) { |
|
|
setMonth(month + 1); |
|
|
} else { |
|
|
setMonth(1); |
|
|
setYear(year + 1); |
|
|
} |
|
|
}; |
|
|
|
|
|
//NextMonth-------------------------- |
|
|
const previousMonth = () => { |
|
|
if (month !== 1) { |
|
|
setMonth(month - 1); |
|
|
} else { |
|
|
setMonth(12); |
|
|
setYear(year - 1); |
|
|
} |
|
|
}; |
|
|
|
|
|
//findFirstDayWeekDay---------------------------- |
|
|
const findFirstDayWeekDay = (y, m) => { |
|
|
console.log("findFirstDayWeekDay-----------------------"); |
|
|
moment.locale("fa"); |
|
|
let date = moment(`${y}/${m}/01`, "YYYY/M/D"); |
|
|
if (m < 10) { |
|
|
date = moment(`${y}/0${m}/01`, "YYYY/M/D"); |
|
|
} |
|
|
console.log("date:"); |
|
|
console.log(date.format("YYYY/M/D")); |
|
|
console.log("w_d:"); |
|
|
console.log(date.weekday()); |
|
|
return date.weekday(); |
|
|
}; |
|
|
|
|
|
//day select ------------------------------------------- |
|
|
const [activeDay, setActiveDay] = useState(null); |
|
|
const [showEvent, setShowEvents] = useState(false); |
|
|
const selectDay = (index) => { |
|
|
if (activeDay !== index) { |
|
|
//set eventBox position--------------- |
|
|
if (rightDay.includes(index)) { |
|
|
eventBoxisRight = true; |
|
|
} else { |
|
|
eventBoxisRight = false; |
|
|
} |
|
|
eventBoxTop = Math.floor(index / 7) * 15; |
|
|
if (Math.floor(index / 7) > 0) { |
|
|
eventBoxTop += Math.floor(index / 7) * 2; |
|
|
} |
|
|
if (eventBoxisRight){ |
|
|
eventBoxRight = ((index%7)+1) * 13; |
|
|
eventBoxRight += ((index % 7) + 1) * 1.5; |
|
|
|
|
|
}else{ |
|
|
let Index = 6 - (index % 7); |
|
|
eventBoxRight = (Index+1) * 13; |
|
|
eventBoxRight += (Index + 1) * 1.5; |
|
|
} |
|
|
//---------------------------- |
|
|
setActiveDay(index); |
|
|
setShowEvents(true); |
|
|
} else { |
|
|
setActiveDay(null); |
|
|
setShowEvents(false); |
|
|
} |
|
|
}; |
|
|
//======================== |
|
|
|
|
|
return ( |
|
|
<div className="Calendar2 w-full h-full rounded-lg border border-[#E0E0E0] pt-1 pb-2 px-2 relative"> |
|
|
<div |
|
|
className="w-full h-full" |
|
|
// style={window.innerWidth < 1000 ? { height: "80%" } : null} |
|
|
> |
|
|
{/* ----title---------------- */} |
|
|
<Title |
|
|
primaryColor={primaryColor} |
|
|
year={year} |
|
|
month={month} |
|
|
monthList={monthList} |
|
|
NextMonth={NextMonth} |
|
|
previousMonth={previousMonth} |
|
|
selectDay={selectDay} |
|
|
setShowEvents={setShowEvents} |
|
|
/> |
|
|
{/* ----------week---------------- */} |
|
|
<Week /> |
|
|
{/* ----------days---------------- */} |
|
|
<Days |
|
|
findFirstDayWeekDay={findFirstDayWeekDay} |
|
|
year={year} |
|
|
month={month} |
|
|
currentYear={currentYear} |
|
|
currentMonth={currentMonth} |
|
|
currentDay={currentDay} |
|
|
primaryColor={primaryColor} |
|
|
eventList={eventList} |
|
|
activeDay={activeDay} |
|
|
selectDay={selectDay} |
|
|
eventBoxRight={eventBoxRight} |
|
|
eventBoxTop={eventBoxTop} |
|
|
eventBoxisRight={eventBoxisRight} |
|
|
showEvent={showEvent} |
|
|
/> |
|
|
</div> |
|
|
{/* {(showEvent && window.innerWidth<1000)&& <MobileEventBox/>} */} |
|
|
</div> |
|
|
); |
|
|
}; |
|
|
|
|
|
export default Calendar2;
|
|
|
|