Show total number of events per day?

Event calendars & schedulers
1

In the event calendar, I’d like a way to show the total number of events happening on each day. I also want to perform an operation which calculates the sum of the spend amount for each event that day and show that total along with the total number of events.

I understand there are no built-in methods for achieving this. I was wondering if you have any tips for going about achieving this functionality? Where to start?

I’m working in Typescript/React.

2

Hi @jack.mullinkosson

You can customize day cells by using renderDayContent option

Here’s an example:

const App: FC = () => {
  function calculateTotalSpentMinutes(events: MbscCalendarEvent[]) {
    let totalDuration = 0;
    events.forEach(event => {
        const start = new Date(event.start as Date);
        const end = new Date(event.end as Date);
        const duration = end.getTime() - start.getTime();
        totalDuration += duration;
    });
    return totalDuration / (1000 * 60);
}

  const myCustomDayContent = useCallback(
    (args: any) => {
      const events = args.events;
      const eventsCount = events.length;
      const eventsDuration = calculateTotalSpentMinutes(events);

      return (
        eventsCount > 0 && (
          <div>
            <div className="">{'Number of events: ' + eventsCount}</div>
            <div className="">{'Total minute spend: ' + eventsDuration}</div>
          </div>
        )
      );
    },
    [],
  );
  return <Eventcalendar data={myEvents} renderDayContent={myCustomDayContent}/>;
};