You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
434 lines
8.4 KiB
434 lines
8.4 KiB
import moment from "jalali-moment"; |
|
import React, { useEffect, useState } from "react"; |
|
|
|
let daysList = [ |
|
{ |
|
id: 1, |
|
dayNumber: "", |
|
isToday: false, |
|
events: [], |
|
}, |
|
{ |
|
id: 2, |
|
dayNumber: "", |
|
isToday: false, |
|
events: [], |
|
}, |
|
{ |
|
id: 3, |
|
dayNumber: "", |
|
isToday: false, |
|
events: [], |
|
}, |
|
{ |
|
id: 4, |
|
dayNumber: "", |
|
isToday: false, |
|
events: [], |
|
}, |
|
{ |
|
id: 5, |
|
dayNumber: "", |
|
isToday: false, |
|
events: [], |
|
}, |
|
{ |
|
id: 6, |
|
dayNumber: "", |
|
isToday: false, |
|
events: [], |
|
}, |
|
{ |
|
id: 7, |
|
dayNumber: "", |
|
isToday: false, |
|
events: [], |
|
}, |
|
{ |
|
id: 8, |
|
dayNumber: "", |
|
isToday: false, |
|
events: [], |
|
}, |
|
{ |
|
id: 9, |
|
dayNumber: "", |
|
isToday: false, |
|
events: [], |
|
}, |
|
{ |
|
id: 10, |
|
dayNumber: "", |
|
isToday: false, |
|
events: [], |
|
}, |
|
{ |
|
id: 11, |
|
dayNumber: "", |
|
isToday: false, |
|
events: [], |
|
}, |
|
{ |
|
id: 12, |
|
dayNumber: "", |
|
isToday: false, |
|
events: [], |
|
}, |
|
{ |
|
id: 13, |
|
dayNumber: "", |
|
isToday: false, |
|
events: [], |
|
}, |
|
{ |
|
id: 14, |
|
dayNumber: "", |
|
isToday: false, |
|
events: [], |
|
}, |
|
{ |
|
id: 15, |
|
dayNumber: "", |
|
isToday: false, |
|
events: [], |
|
}, |
|
{ |
|
id: 16, |
|
dayNumber: "", |
|
isToday: false, |
|
events: [], |
|
}, |
|
{ |
|
id: 17, |
|
dayNumber: "", |
|
isToday: false, |
|
events: [], |
|
}, |
|
{ |
|
id: 18, |
|
dayNumber: "", |
|
isToday: false, |
|
events: [], |
|
}, |
|
{ |
|
id: 19, |
|
dayNumber: "", |
|
isToday: false, |
|
events: [], |
|
}, |
|
{ |
|
id: 20, |
|
dayNumber: "", |
|
isToday: false, |
|
events: [], |
|
}, |
|
{ |
|
id: 21, |
|
dayNumber: "", |
|
isToday: false, |
|
events: [], |
|
}, |
|
{ |
|
id: 22, |
|
dayNumber: "", |
|
isToday: false, |
|
events: [], |
|
}, |
|
{ |
|
id: 23, |
|
dayNumber: "", |
|
isToday: false, |
|
events: [], |
|
}, |
|
{ |
|
id: 24, |
|
dayNumber: "", |
|
isToday: false, |
|
events: [], |
|
}, |
|
{ |
|
id: 25, |
|
dayNumber: "", |
|
isToday: false, |
|
events: [], |
|
}, |
|
{ |
|
id: 26, |
|
dayNumber: "", |
|
isToday: false, |
|
events: [], |
|
}, |
|
{ |
|
id: 27, |
|
dayNumber: "", |
|
isToday: false, |
|
events: [], |
|
}, |
|
{ |
|
id: 28, |
|
dayNumber: "", |
|
isToday: false, |
|
events: [], |
|
}, |
|
{ |
|
id: 29, |
|
dayNumber: "", |
|
isToday: false, |
|
events: [], |
|
}, |
|
{ |
|
id: 30, |
|
dayNumber: "", |
|
isToday: false, |
|
events: [], |
|
}, |
|
{ |
|
id: 31, |
|
dayNumber: "", |
|
isToday: false, |
|
events: [], |
|
}, |
|
{ |
|
id: 32, |
|
dayNumber: "", |
|
isToday: false, |
|
events: [], |
|
}, |
|
{ |
|
id: 33, |
|
dayNumber: "", |
|
isToday: false, |
|
events: [], |
|
}, |
|
{ |
|
id: 34, |
|
dayNumber: "", |
|
isToday: false, |
|
events: [], |
|
}, |
|
{ |
|
id: 35, |
|
dayNumber: "", |
|
isToday: false, |
|
events: [], |
|
}, |
|
{ |
|
id: 36, |
|
dayNumber: "", |
|
isToday: false, |
|
events: [], |
|
}, |
|
{ |
|
id: 37, |
|
dayNumber: "", |
|
isToday: false, |
|
events: [], |
|
}, |
|
{ |
|
id: 38, |
|
dayNumber: "", |
|
isToday: false, |
|
events: [], |
|
}, |
|
{ |
|
id: 39, |
|
dayNumber: "", |
|
isToday: false, |
|
events: [], |
|
}, |
|
{ |
|
id: 40, |
|
dayNumber: "", |
|
isToday: false, |
|
events: [], |
|
}, |
|
{ |
|
id: 41, |
|
dayNumber: "", |
|
isToday: false, |
|
events: [], |
|
}, |
|
{ |
|
id: 42, |
|
dayNumber: "", |
|
isToday: false, |
|
events: [], |
|
}, |
|
]; |
|
//--------------- |
|
let dotsColor = ["#249D8C", "#F4C84B"]; |
|
//======================================================= |
|
const Days = ({ |
|
findFirstDayWeekDay, |
|
year, |
|
month, |
|
currentYear, |
|
currentMonth, |
|
currentDay, |
|
primaryColor, |
|
eventList, |
|
activeDay, |
|
selectDay, |
|
eventBoxisRight, |
|
eventBoxTop, |
|
eventBoxRight, |
|
showEvent, |
|
}) => { |
|
const [Daylist, setDayList] = useState(daysList); |
|
const [fake, setFake] = useState(0); |
|
//create month days---------------------------- |
|
useEffect(() => { |
|
let list = daysList; |
|
let w1 = findFirstDayWeekDay(year, month); |
|
let m = 31; |
|
if (month > 6) { |
|
m = 30; |
|
} |
|
if (month === 12) { |
|
m = 29; |
|
} |
|
let dayCounter = 0; |
|
for (let i = 0; i < list.length; i++) { |
|
if (i >= w1 && dayCounter < m) { |
|
dayCounter++; |
|
list[i].dayNumber = dayCounter; |
|
//tody check--------------- |
|
if ( |
|
year === currentYear && |
|
month === currentMonth && |
|
dayCounter === currentDay |
|
) { |
|
list[i].isToday = true; |
|
} else { |
|
list[i].isToday = false; |
|
} |
|
//events check------------ |
|
list[i].events = []; |
|
for (let p = 0; p < eventList.length; p++) { |
|
moment.locale("en"); |
|
let a = moment(eventList[p].date); |
|
a.locale("fa"); |
|
let eventDay = Number(a.format("DD")); |
|
let eventMonth = Number(a.format("MM")); |
|
let eventYear = Number(a.format("YYYY/M/D").split("/")[0]); |
|
if ( |
|
year === eventYear && |
|
month === eventMonth && |
|
dayCounter === eventDay |
|
) { |
|
list[i].events.push(eventList[p]); |
|
} |
|
} |
|
} else { |
|
list[i].dayNumber = ""; |
|
list[i].isToday = false; |
|
} |
|
} |
|
console.log(daysList); |
|
setDayList(list); |
|
setFake(fake + 1); |
|
}, [month]); |
|
|
|
//============== |
|
const [eventData, setEventData] = useState([]); |
|
const selectDayHandler=(index)=>{ |
|
setEventData(Daylist[index].events); |
|
selectDay(index); |
|
} |
|
return ( |
|
<div |
|
className="Days w-full flex flex-row-reverse items-start justify-between flex-wrap gap-y-[2%] relative" |
|
style={{ height: "calc(100% - 80px)" }} |
|
> |
|
{Daylist.map((item, index) => ( |
|
<div |
|
key={index} |
|
className="w-[13%] h-[15%] rounded-lg cursor-pointer flex flex-col items-center justify-center text-sm relative" |
|
style={ |
|
activeDay === index |
|
? { |
|
backgroundColor: primaryColor, |
|
color: "#fff", |
|
} |
|
: item.isToday |
|
? { |
|
border: `1px solid ${primaryColor}`, |
|
color: `${primaryColor}`, |
|
} |
|
: index % 7 === 6 |
|
? { color: "#C94E2A" } |
|
: null |
|
} |
|
onClick={() => selectDayHandler(index)} |
|
> |
|
<div>{item.dayNumber}</div> |
|
<div className="w-[90%] flex items-center justify-center gap-x-1 absolute bottom-1"> |
|
{item?.events?.map((event, Index) => ( |
|
<React.Fragment key={Index}> |
|
{Index < 2 && ( |
|
<div |
|
key={Index} |
|
className="w-1 h-1 rounded-full bg-black" |
|
style={ |
|
event?.type |
|
? { backgroundColor: dotsColor[event.type - 1] } |
|
: { backgroundColor: dotsColor[Index] } |
|
} |
|
></div> |
|
)} |
|
</React.Fragment> |
|
))} |
|
</div> |
|
</div> |
|
))} |
|
{/* ----------events-box---------------- */} |
|
{showEvent && ( |
|
<div |
|
className="w-2/3 rounded bg-[#343234] absolute top-4 p-2" |
|
style={ |
|
eventBoxisRight |
|
? { |
|
top: `${eventBoxTop}%`, |
|
right: `calc(${eventBoxRight}% - 1px)`, |
|
} |
|
: { |
|
top: `${eventBoxTop}%`, |
|
left: `calc(${eventBoxRight}% - 1px)`, |
|
} |
|
} |
|
> |
|
<div className="w-full flex items-center justify-between"> |
|
{/* <div className="w-1/3 h-[2px] bg-white rounded-lg"></div> */} |
|
<div className="w-full text-right text text-white">:رویدادها</div> |
|
{/* <div className="w-1/3 h-[2px] bg-white rounded-lg"></div> */} |
|
</div> |
|
<div className="w-full mt-1"> |
|
{eventData?.map((item, index) => ( |
|
<div |
|
key={index} |
|
className="w-full flex flex-row-reverse items-center mb-2" |
|
> |
|
<div |
|
className="w-2 h-2 rounded-full bg-white ml-2" |
|
style={ |
|
item?.type |
|
? { backgroundColor: dotsColor[item.type] } |
|
: { backgroundColor: dotsColor[index%2] } |
|
} |
|
></div> |
|
<div className="text-sm text-right text-[#999]"> |
|
{item?.title} |
|
</div> |
|
</div> |
|
))} |
|
</div> |
|
</div> |
|
)} |
|
</div> |
|
); |
|
}; |
|
|
|
export default Days; |
|
|
|
|
|
// bg-[rgba(0,0,0,0.2)]
|