Cant create custom event design for month view

[jees47]

I want to create custom ui design for events in the month view of react-big-calender. I tried using "dateHeader" . but it is only able to change the header part of the day component. but I want to change the event listing in month view to the design I mentioned in the above attachment. I was able to change the design of weekView check the below code.

`import React from 'react'

import * as dates from 'date-arithmetic'
import moment from 'moment';
import { Calendar, Views, Navigate } from 'react-big-calendar'
import TimeGrid from 'react-big-calendar/lib/TimeGrid'
import {CustomWeekView} from "./custom-week-view"

class MyWeek extends React.Component {
  render() {
    const today = new Date();
    let { date } = this.props
    let range = MyWeek.range(date)

return <CustomWeekView range={range} {...this.props}></CustomWeekView>
  }
}


MyWeek.range = date => {
  let start = moment(date).startOf('week').toDate()
  let end =    moment(date).endOf('week').toDate()


  let current = start
  let range = []

  while (dates.lte(current, end, 'day')) {
    range.push(current)
    current = dates.add(current, 1, 'day')
  }

  return range
}

MyWeek.navigate = (date, action) => {
  switch (action) {
    case Navigate.PREVIOUS:
      return dates.add(date, -1, 'week')

    case Navigate.NEXT:
      return dates.add(date,1, 'week')

    default:
      return date
  }
}

MyWeek.title = date => {
  return ` ${date.toLocaleDateString()}`
}

export default MyWeek;`

this it the output

But for month i have tried with the same logic. but the month view is not looking correctly. i want to use the same structure of the current default month view . but with some modification on how the events are shown. currently its shown as a iist. but i want to show events by icons grouped with number