[@mantine/schedule] MobileMonthView: Show events on outside days

packages/@mantine/schedule/src/components/MobileMonthView/MobileMonthView.test.tsx

@@ -481,6 +481,46 @@ describe('@mantine/schedule/MobileMonthView', () => {
     expect(hiddenDays).toHaveLength(0);
   });
 
+  it('shows event indicators on visible outside days', () => {
+    const events: ScheduleEventData[] = [
+      {
+        id: 'outside',
+        title: 'Outside event',
+        start: '2025-11-01 10:00:00',
+        end: '2025-11-01 11:00:00',
+        color: 'red',
+        payload: {},
+      },
+    ];
+
+    render(<MobileMonthView {...defaultProps} date="2025-10-01" events={events} withOutsideDays />);
+
+    const outsideDay = screen.getByRole('button', { name: 'November 1, 2025' });
+    expect(
+      outsideDay.querySelectorAll('.mantine-MobileMonthView-mobileMonthViewDayIndicator')
+    ).toHaveLength(1);
+  });
+
+  it('expands recurring events on visible outside days', () => {
+    const events: ScheduleEventData[] = [
+      {
+        id: 'recurring-outside',
+        title: 'Recurring outside event',
+        start: '2025-10-30 10:00:00',
+        end: '2025-10-30 11:00:00',
+        color: 'blue',
+        recurrence: { rrule: 'FREQ=DAILY;COUNT=3' },
+      },
+    ];
+
+    render(<MobileMonthView {...defaultProps} events={events} withOutsideDays />);
+
+    const outsideDay = screen.getByRole('button', { name: 'October 31, 2025' });
+    expect(
+      outsideDay.querySelectorAll('.mantine-MobileMonthView-mobileMonthViewDayIndicator')
+    ).toHaveLength(1);
+  });
+
   it('supports static mode', () => {
     const { container } = render(<MobileMonthView {...defaultProps} mode="static" />);
     const staticDays = container.querySelectorAll(

packages/@mantine/schedule/src/components/MobileMonthView/MobileMonthView.tsx

@@ -288,15 +288,6 @@ export const MobileMonthView = factory<MobileMonthViewFactory>((_props) => {
   );
   const columnsCount = 7 - hiddenColumns.size;
 
-  const expandedEvents = expandRecurringEvents({
-    events,
-    rangeStart: dayjs(date).startOf('month').toDate(),
-    rangeEnd: dayjs(date).endOf('month').toDate(),
-    expansionLimit: recurrenceExpansionLimit,
-  });
-
-  const groupedEvents = getMobileMonthViewEvents({ date, events: expandedEvents });
-
   const weekdays = withWeekDays
     ? getWeekdaysNames({
         locale: ctx.getLocale(locale),
@@ -328,6 +319,30 @@ export const MobileMonthView = factory<MobileMonthViewFactory>((_props) => {
     }),
   }));
 
+  const visibleDays = monthWeeks.flatMap(({ visibleDays }) => visibleDays);
+  const rangeStart =
+    withOutsideDays && visibleDays.length > 0
+      ? dayjs(visibleDays[0]).startOf('day')
+      : dayjs(date).startOf('month');
+  const rangeEnd =
+    withOutsideDays && visibleDays.length > 0
+      ? dayjs(visibleDays[visibleDays.length - 1]).endOf('day')
+      : dayjs(date).endOf('month');
+
+  const expandedEvents = expandRecurringEvents({
+    events,
+    rangeStart: rangeStart.toDate(),
+    rangeEnd: rangeEnd.toDate(),
+    expansionLimit: recurrenceExpansionLimit,
+  });
+
+  const groupedEvents = getMobileMonthViewEvents({
+    date,
+    events: expandedEvents,
+    rangeStart: rangeStart.toDate(),
+    rangeEnd: rangeEnd.toDate(),
+  });
+
   const firstDayPosition = (() => {
     for (let weekIndex = 0; weekIndex < monthWeeks.length; weekIndex++) {
       const { visibleDays } = monthWeeks[weekIndex];

packages/@mantine/schedule/src/components/MobileMonthView/get-mobile-month-view-events.test.ts

@@ -39,6 +39,26 @@ describe('@mantine/schedule/get-mobile-month-view-events', () => {
     expect(result).toStrictEqual({ '2025-11-15': [events[0]] });
   });
 
+  it('includes events on outside days within a visible range', () => {
+    const events: ScheduleEventData[] = [
+      testUtils.createEvent({ id: 1, start: '2025-10-31 10:00:00', end: '2025-10-31 11:00:00' }),
+      testUtils.createEvent({ id: 2, start: '2025-12-01 10:00:00', end: '2025-12-01 11:00:00' }),
+      testUtils.createEvent({ id: 3, start: '2025-12-15 10:00:00', end: '2025-12-15 11:00:00' }),
+    ];
+
+    const result = getMobileMonthViewEvents({
+      date: '2025-11-01',
+      events,
+      rangeStart: '2025-10-27',
+      rangeEnd: '2025-12-07',
+    });
+
+    expect(result).toStrictEqual({
+      '2025-10-31': [events[0]],
+      '2025-12-01': [events[1]],
+    });
+  });
+
   it('groups multiple events on the same date', () => {
     const events: ScheduleEventData[] = [
       testUtils.createEvent({ id: 1, start: '2025-11-10 09:00:00', end: '2025-11-10 10:00:00' }),

packages/@mantine/schedule/src/components/MobileMonthView/get-mobile-month-view-events.ts

@@ -42,17 +42,24 @@ function groupEventByDate(event: ScheduleEventData, groupedEvents: GroupedEvents
 interface GetMobileMonthViewEventsInput {
   date: AnyDateValue;
   events: ScheduleEventData[] | undefined;
+  rangeStart?: AnyDateValue;
+  rangeEnd?: AnyDateValue;
 }
 
-export function getMobileMonthViewEvents({ date, events }: GetMobileMonthViewEventsInput) {
+export function getMobileMonthViewEvents({
+  date,
+  events,
+  rangeStart,
+  rangeEnd,
+}: GetMobileMonthViewEventsInput) {
   const groupedEvents: GroupedEvents = {};
 
   if (events === undefined) {
     return groupedEvents;
   }
 
-  const monthStart = dayjs(date).startOf('month');
-  const monthEnd = dayjs(date).endOf('month');
+  const firstDay = rangeStart ? dayjs(rangeStart).startOf('day') : dayjs(date).startOf('month');
+  const lastDay = rangeEnd ? dayjs(rangeEnd).endOf('day') : dayjs(date).endOf('month');
 
   const ids = new Set<string | number>();
 
@@ -61,11 +68,11 @@ export function getMobileMonthViewEvents({ date, events }: GetMobileMonthViewEve
       continue;
     }
 
-    const overlapsMonth =
-      !getEventEndDay(event).isBefore(monthStart, 'day') &&
-      !dayjs(event.start).isAfter(monthEnd, 'day');
+    const overlapsRange =
+      !getEventEndDay(event).isBefore(firstDay, 'day') &&
+      !dayjs(event.start).isAfter(lastDay, 'day');
 
-    if (overlapsMonth) {
+    if (overlapsRange) {
       groupEventByDate(validateEvent(event), groupedEvents);
 
       if (!ids.has(event.id)) {