feat(calendar): add callback for clicking plus events button (#367)

packages/calendar/src/views/month-grid/components/__test__/month-day.spec.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable max-lines */
 import {
   afterEach,
   describe,
@@ -13,6 +14,7 @@ import MonthGridDay from '../month-grid-day'
 import { AppContext } from '../../../../utils/stateful/app-context'
 import { getTestEvent } from './test-events'
 import { InternalViewName } from '@schedule-x/shared/src/enums/calendar/internal-view.enum'
+import { vi } from 'vitest'
 
 const renderComponent = ($app: CalendarAppSingleton, day: MonthDayType) => {
   render(
@@ -95,7 +97,12 @@ describe('MonthDay component', () => {
   })
 
   describe('displaying 2 more events than the limit', () => {
-    const $app = __createAppWithViews__()
+    const onClickPlusEvents = vi.fn()
+    const $app = __createAppWithViews__({
+      callbacks: {
+        onClickPlusEvents,
+      },
+    })
     const dayWithEventLimitPlus2: MonthDayType = {
       date: '2020-01-01',
       events: {
@@ -117,6 +124,22 @@ describe('MonthDay component', () => {
       expect(screen.getByText('+ 2 events')).not.toBeNull()
     })
 
+    it('should call the callback for clicking the "+ N events"-button', () => {
+      renderComponent($app, dayWithEventLimitPlus2)
+      const moreEventsButton = document.querySelector(
+        '.sx__month-grid-day__events-more'
+      )
+
+      expect(onClickPlusEvents).not.toHaveBeenCalled()
+      moreEventsButton?.dispatchEvent(
+        new MouseEvent('click', { bubbles: true })
+      )
+
+      expect(onClickPlusEvents).toHaveBeenCalledWith(
+        dayWithEventLimitPlus2.date
+      )
+    })
+
     it('should navigate to day view when clicking on the more events button', async () => {
       renderComponent($app, dayWithEventLimitPlus2)
       expect($app.calendarState.view.value).toBe(InternalViewName.Week)

packages/calendar/src/views/month-grid/components/month-grid-day.tsx

@@ -28,6 +28,8 @@ export default function MonthGridDay({ day, isFirstWeek }: props) {
   }
 
   const handleClickAdditionalEvents = () => {
+    if ($app.config.callbacks.onClickPlusEvents)
+      $app.config.callbacks.onClickPlusEvents(day.date)
     if (!$app.config.views.find((view) => view.name === InternalViewName.Day))
       return
 

packages/shared/src/interfaces/calendar/listeners.interface.ts

@@ -7,4 +7,5 @@ export interface CalendarCallbacks {
   onRangeUpdate?: (range: DateRange) => void
   onClickDate?: (date: string) => void
   onClickDateTime?: (dateTime: string) => void
+  onClickPlusEvents?: (date: string) => void
 }