add resource and events to headRenderer

Author: aldabil21

src/App.tsx

@@ -1,5 +1,5 @@
 import { Scheduler } from "./lib";
-import { EVENTS } from "./events";
+import { EVENTS, RESOURCES } from "./events";
 import { useRef } from "react";
 import { SchedulerRef } from "./lib/types";
 import { Link } from "react-router-dom";
@@ -16,6 +16,21 @@ function App() {
       <Scheduler
         ref={calendarRef}
         events={EVENTS}
+        resources={RESOURCES}
+        week={{
+          weekStartOn: 0,
+          weekDays: [0, 1, 2, 3, 4, 5, 6],
+          startHour: 8,
+          endHour: 20,
+          step: 30,
+        }}
+        resourceFields={{
+          idField: "admin_id",
+          textField: "title",
+          subTextField: "mobile",
+          avatarField: "title",
+          colorField: "color",
+        }}
         // events={generateRandomEvents(200)}
       />
     </>

src/lib/components/month/MonthTable.tsx

@@ -92,7 +92,9 @@ const MonthTable = ({ daysList, resource, eachWeekStart }: Props) => {
               />
               <Fragment>
                 {typeof headRenderer === "function" ? (
-                  <div style={{ position: "absolute", top: 0 }}>{headRenderer(today)}</div>
+                  <div style={{ position: "absolute", top: 0 }}>
+                    {headRenderer({ day: today, events: resourcedEvents, resource })}
+                  </div>
                 ) : (
                   <Avatar
                     style={{

src/lib/components/week/WeekTable.tsx

@@ -142,7 +142,7 @@ const WeekTable = ({
             style={{ height: headerHeight }}
           >
             {typeof headRenderer === "function" ? (
-              <div>{headRenderer(date)}</div>
+              <div>{headRenderer({ day: date, events: resourcedEvents, resource })}</div>
             ) : (
               <TodayTypo
                 date={date}

src/lib/types.ts

@@ -48,7 +48,11 @@ interface CommonViewProps {
   startHour: DayHours;
   endHour: DayHours;
   cellRenderer?(props: CellRenderedProps): JSX.Element;
-  headRenderer?(day: Date): JSX.Element;
+  headRenderer?(props: {
+    day: Date;
+    events: ProcessedEvent[];
+    resource?: DefaultResource;
+  }): JSX.Element;
   navigation?: boolean;
   step: number;
 }

src/lib/views/Day.tsx

@@ -132,7 +132,7 @@ const Day = () => {
       }
 
       if (agenda) {
-        return <DayAgenda events={resourcedEvents} />;
+        return <DayAgenda resource={resource} events={resourcedEvents} />;
       }
 
       // Equalizing multi-day section height
@@ -153,7 +153,7 @@ const Day = () => {
               style={{ height: headerHeight }}
             >
               {typeof headRenderer === "function" ? (
-                <div>{headRenderer(selectedDate)}</div>
+                <div>{headRenderer({ day: selectedDate, events: resourcedEvents, resource })}</div>
               ) : (
                 <TodayTypo date={selectedDate} locale={locale} />
               )}

src/lib/views/DayAgenda.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from "react";
 import { format } from "date-fns";
 import { AgendaDiv } from "../styles/styles";
-import { ProcessedEvent } from "../types";
+import { DefaultResource, ProcessedEvent } from "../types";
 import useStore from "../hooks/useStore";
 import { Typography } from "@mui/material";
 import { filterTodayAgendaEvents } from "../helpers/generals";
@@ -10,8 +10,9 @@ import EmptyAgenda from "../components/events/EmptyAgenda";
 
 type Props = {
   events: ProcessedEvent[];
+  resource?: DefaultResource;
 };
-const DayAgenda = ({ events }: Props) => {
+const DayAgenda = ({ events, resource }: Props) => {
   const { day, locale, selectedDate, translations, alwaysShowAgendaDays } = useStore();
   const { headRenderer } = day!;
 
@@ -28,7 +29,7 @@ const DayAgenda = ({ events }: Props) => {
       <div className="rs__agenda_row rs__today_cell">
         <div className="rs__cell rs__agenda__cell">
           {typeof headRenderer === "function" ? (
-            <div>{headRenderer(selectedDate)}</div>
+            <div>{headRenderer({ day: selectedDate, events, resource })}</div>
           ) : (
             <Typography variant="body2">{format(selectedDate, "dd E", { locale })}</Typography>
           )}

src/lib/views/Month.tsx

@@ -68,7 +68,7 @@ const Month = () => {
           resourcedEvents = getResourcedEvents(events, resource, resourceFields, fields);
         }
 
-        return <MonthAgenda events={resourcedEvents} />;
+        return <MonthAgenda resource={resource} events={resourcedEvents} />;
       }
 
       return <MonthTable daysList={daysList} eachWeekStart={eachWeekStart} resource={resource} />;

src/lib/views/MonthAgenda.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from "react";
 import { format, isSameMonth, getDaysInMonth, isToday } from "date-fns";
 import { AgendaDiv } from "../styles/styles";
-import { ProcessedEvent } from "../types";
+import { DefaultResource, ProcessedEvent } from "../types";
 import useStore from "../hooks/useStore";
 import { Typography } from "@mui/material";
 import { filterTodayAgendaEvents, isTimeZonedToday } from "../helpers/generals";
@@ -10,8 +10,9 @@ import EmptyAgenda from "../components/events/EmptyAgenda";
 
 type Props = {
   events: ProcessedEvent[];
+  resource?: DefaultResource;
 };
-const MonthAgenda = ({ events }: Props) => {
+const MonthAgenda = ({ events, resource }: Props) => {
   const {
     month,
     handleGotoDay,
@@ -46,7 +47,7 @@ const MonthAgenda = ({ events }: Props) => {
           <div key={i} className={`rs__agenda_row ${isToday(day) ? "rs__today_cell" : ""}`}>
             <div className="rs__cell rs__agenda__cell">
               {typeof headRenderer === "function" ? (
-                <div>{headRenderer(day)}</div>
+                <div>{headRenderer({ day, events, resource })}</div>
               ) : (
                 <Typography
                   sx={{ fontWeight: today ? "bold" : "inherit" }}

src/lib/views/Week.tsx

@@ -71,7 +71,7 @@ const Week = () => {
     }
 
     if (agenda) {
-      return <WeekAgenda daysList={daysList} events={resourcedEvents} />;
+      return <WeekAgenda daysList={daysList} resource={resource} events={resourcedEvents} />;
     }
 
     return (

src/lib/views/WeekAgenda.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from "react";
 import { format, isToday } from "date-fns";
 import { AgendaDiv } from "../styles/styles";
-import { ProcessedEvent } from "../types";
+import { DefaultResource, ProcessedEvent } from "../types";
 import useStore from "../hooks/useStore";
 import { Typography } from "@mui/material";
 import { filterTodayAgendaEvents, isTimeZonedToday } from "../helpers/generals";
@@ -10,9 +10,10 @@ import EmptyAgenda from "../components/events/EmptyAgenda";
 
 type Props = {
   daysList: Date[];
+  resource?: DefaultResource;
   events: ProcessedEvent[];
 };
-const WeekAgenda = ({ daysList, events }: Props) => {
+const WeekAgenda = ({ daysList, resource, events }: Props) => {
   const { week, handleGotoDay, locale, timeZone, translations, alwaysShowAgendaDays } = useStore();
   const { disableGoToDay, headRenderer } = week!;
 
@@ -36,7 +37,7 @@ const WeekAgenda = ({ daysList, events }: Props) => {
           <div key={i} className={`rs__agenda_row ${isToday(day) ? "rs__today_cell" : ""}`}>
             <div className="rs__cell rs__agenda__cell">
               {typeof headRenderer === "function" ? (
-                <div>{headRenderer(day)}</div>
+                <div>{headRenderer({ day, events, resource })}</div>
               ) : (
                 <Typography
                   sx={{ fontWeight: today ? "bold" : "inherit" }}