How to render multiple events in one cell in React-big-calender month view?

Desired Calendar View

Suppose, we have icons as events in React-Big Calendar. I would like to know the way in which multiple icons can be displayed in one cell as shown in the attached image.

The default way to display events in row which increases the cell height if we have more than 3 events (is not desired in this case.)

Any lead will be helpful. Thanks in advance!

I am understanding your need and I have a similar one in one project and I came to achieve this view till now.

the code for it is below.

import React from 'react';
import { Calendar } from 'react-big-calendar';
import dayjs from 'dayjs';
import '../styles/calendar.css';
import { Typography, Box } from '@mui/material';

export function MyCalendar({
  views,
  events,
  localizer,
  defaultDate,
  defaultView,
  onSelectSlot,
  height,
  width,
  margin,
  className,
}) {
  dayjs.locale('en');

  const eventPropGetter = (event) => {
    const backgroundColor = '#' + event.hexColor;
    return {
      className: 'event-dot',
      style: {
        backgroundColor: backgroundColor,
        display: 'inline-block !important',
      },
    };
  };

  return (
    <Calendar
      views={views}
      events={events}
      selectable
      localizer={localizer}
      defaultDate={defaultDate}
      defaultView={defaultView}
      style={{ height: height, width: width, margin: margin }}
      onSelectSlot={onSelectSlot}
      className={className}
      eventPropGetter={eventPropGetter} //this is what you need
    />
  );
}

the css is:

.rbc-header {
  background: #331e6d;
  color: white !important;
  padding: 3px !important;
  font-size: 20px !important;
  height: 30px;
  text-align: center;
  font-weight: 300 !important;
}

.event-dot {
  position: relative;
  display: flex !important;
  display: inline-block;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50%;
  margin: 1.4px 0 0.4px 5px !important;
}