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

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)]