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