How can I add a small circle on a specific day if it has a data?

I’m currently working calendar using shadcn’s datepicker. What I’m trying to do is add a little circle under a name if the date has a value. I put an example date, just for to render it.


const events = [
  { date: new Date(2024, 10, 14), title: "Meeting" },
  { date: new Date(2024, 10, 15), title: "Lunch" },
  { date: new Date(2024, 10, 23), title: "Conference" },
]

const LeftCalendar = ({ date, setDate }: Props) => {

  const user = useCurrentUser()
  const [open, setOpen] = useState<boolean>(false);

  const openDialogBox = (currentDate: Date | undefined) => {
    if (currentDate) {
      setDate(currentDate);
      setOpen(true);

    } else {
      setDate(currentDate);
      setOpen(false);
    }
  };
  

  const hasEvent = (date: Date) => {
    return events.some(
      event => format(event.date, "yyyy-MM-dd") === format(date, "yyyy-MM-dd")
    )
  }


  return (

    <div className='flex flex-col  justify-center gap-y-2 h-full md:h-[800px]  relative'>
      <p className='text-lg text-left'> DATE TODAY: </p>
      <div className='flex flex-col'>
        <div className='w-full flex gap-x-2 p-4 rounded-full mb-8 border-2 text-xl font-semibold text-green-700'>
          <CalendarClock />
          <span className=''>{`${format(new Date(), 'MM/dd/yyyy')}`}</span>
        </div>


      </div>

      <div className='flex h-4/6 w-full items-center justify-center'>
        <Calendar
          mode="single"
          selected={date}
          onSelect={openDialogBox}
          //Change this according the user/ if admin, make
          //disabled={(date) => isBefore(new Date(date), startOfDay(new Date()))}
          disabled={user ? (date) => isBefore(new Date(date), startOfDay(new Date())) : (date) => new Date(date) <= new Date()}
  
          className="shadow-lg p-6 border rounded-md h-full w-full flex "
          classNames={{
            months:
              "flex w-full flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0 flex-1",
            month: "space-y-4 w-full flex flex-col",
            table: "w-full h-full border-collapse space-y-1",
            head_row: "",
            head_cell: 'text-primary w-9 font-semibold text-[0.8rem]   ',
            row: "w-full mt-2",
            caption_label: "text-2xl font-extrabold ",
            day: 'w-full font-semibold h-full',
          }}
          components={{
            Day: ({ date, ...props }) => {
              // Check if this date has an event
              const dateHasEvent = hasEvent(date)
              
              return (
                <div className="relative">
                  <button {...props} className={`${props.className} relative`}>
                    {format(date, "d")}
                  </button>
                  {dateHasEvent && (
                    <div className="absolute bottom-1 left-1/2 h-1 w-1 -translate-x-1/2 rounded-full bg-primary" />
                  )}
                </div>
              )
            }
          }}
        />
      </div>
      <CreateScheduleDialog open={open} setOpen={setOpen} pickedDate={date} />

    </div>

  )
}

export default LeftCalendar

enter image description here

Now the main problem I encounter using this code is I’m unable to select a specific day. The calendar will look like this if i remove the component under the classNames.

The reason I need this is because i have a state that will change a modal state.

enter image description here