diff --git a/src/components/Calendar/Calendar.css b/src/components/Calendar/Calendar.css index 9a7ee62..9fbd9c1 100644 --- a/src/components/Calendar/Calendar.css +++ b/src/components/Calendar/Calendar.css @@ -8,7 +8,7 @@ main { height: 100%; } -.sidebar{ +.sidebar { border-right: 2px gray; } @@ -182,3 +182,13 @@ main { .calendar-list li.personal::before { background-color: #d93025; } + +.event-dot { + margin-top: 2px; + width: 6px; + height: 6px; + background-color: #d93025; /* adjust to your theme */ + border-radius: 50%; + margin-left: auto; + margin-right: auto; +} diff --git a/src/components/Calendar/Calendar.tsx b/src/components/Calendar/Calendar.tsx index 061cc2e..720cef0 100644 --- a/src/components/Calendar/Calendar.tsx +++ b/src/components/Calendar/Calendar.tsx @@ -18,6 +18,7 @@ import { formatDateToYYYYMMDDTHHMMSS, getCalendarRange, } from "../../utils/dateUtils"; +import { Calendars } from "../../features/Calendars/CalendarTypes"; export default function CalendarApp() { const calendarRef = useRef(null); @@ -28,6 +29,22 @@ export default function CalendarApp() { const pending = useAppSelector((state) => state.calendars.pending); const userId = useAppSelector((state) => state.user.userData.openpaasId); + const userPersonnalCalendars: Calendars[] = useAppSelector((state) => + Object.keys(state.calendars.list).map((id) => { + if (id.split("/")[0] === userId) { + return state.calendars.list[id]; + } + return {} as Calendars; + }) + ); + let personnalEvents: CalendarEvent[] = []; + Object.keys(userPersonnalCalendars).forEach((value, id) => { + if (userPersonnalCalendars[id].events) { + personnalEvents = personnalEvents.concat( + userPersonnalCalendars[id].events + ); + } + }); const [selectedCalendars, setSelectedCalendars] = useState( Object.keys(calendars).filter((id) => id.split("/")[0] === userId) ); @@ -130,6 +147,18 @@ export default function CalendarApp() { prevLabel={null} nextLabel={null} showNavigation={false} + tileContent={({ date }) => { + const hasEvents = personnalEvents.some((event) => { + const eventDate = new Date(event.start); + return ( + eventDate.getFullYear() === date.getFullYear() && + eventDate.getMonth() === date.getMonth() && + eventDate.getDate() === date.getDate() + ); + }); + console.log(date, hasEvents); + return hasEvents ?
: null; + }} />