Skip to content

[scheduler][styled] Add more events popover #19880

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 10 commits into
base: master
Choose a base branch
from
Open

[scheduler][styled] Add more events popover #19880

wants to merge 10 commits into from
+726 −255

Conversation

noraleonte
Copy link
Contributor

closes #17722

image

In this PR:

  • extracted shared logic between popovers
  • implemented a MoreEventsPopover (naming debatable) to show hidden events in the month view

Not in this PR

@noraleonte noraleonte added type: new feature Expand the scope of the product to solve a new problem. design This is about UI or UX design, please involve a designer. scope: scheduler Changes related to the scheduler. labels Oct 9, 2025
@mui-bot
Copy link

mui-bot commented Oct 9, 2025 •
edited
Loading

Deploy preview: https://deploy-preview-19880--material-ui-x.netlify.app/

Bundle size report

Bundle Parsed size Gzip size
@mui/x-data-grid 0B(0.00%) 0B(0.00%)
@mui/x-data-grid-pro 0B(0.00%) 0B(0.00%)
@mui/x-data-grid-premium 0B(0.00%) 0B(0.00%)
@mui/x-charts 0B(0.00%) 0B(0.00%)
@mui/x-charts-pro 0B(0.00%) 0B(0.00%)
@mui/x-charts-premium 0B(0.00%) 0B(0.00%)
@mui/x-date-pickers 0B(0.00%) 0B(0.00%)
@mui/x-date-pickers-pro 0B(0.00%) 0B(0.00%)
@mui/x-tree-view 0B(0.00%) 0B(0.00%)
@mui/x-tree-view-pro 0B(0.00%) 0B(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against 0e9273a

@noraleonte noraleonte marked this pull request as ready for review October 9, 2025 14:30
flaviendelangle
flaviendelangle reviewed Oct 10, 2025
View reviewed changes
packages/x-scheduler/src/month-view/MonthView.tsx
className={clsx('MonthViewContainer', 'mui-x-scheduler', className)}
{...other}
>
<EventPopoverProvider containerRef={containerRef}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we have a 3rd provider in the future, we should create a single <ViewProvider /> component to wrap them.
I'm fine keeping the explicit 2 provider for now 👍

packages/x-scheduler/src/internals/components/event-popover/EventPopover.tsx Outdated
import { createPopoverComponents } from '../popover';
import './EventPopover.css';

const EventPopoverComponents = createPopoverComponents<CalendarEventOccurrence>({
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
const EventPopoverComponents = createPopoverComponents<CalendarEventOccurrence>({
const EventPopover = createPopover<CalendarEventOccurrence>({

WDYT? Since there is also a hook inside the returned value

packages/x-scheduler/src/internals/components/more-events-popover/MoreEventsPopover.tsx Outdated
</div>
<div className="MoreEventsPopoverContent">
{occurrences.map((occurrence) => (
<AgendaEvent
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should rename this component if we use it outside of AgendaView 👍

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree. I would imagine this component used in a lot of places - since it does not care who its parent component is, and does not care about positioning.

What would you name it? A few suggestions:

EventItem
EventCard (We are calling the class of all the events .EventCard so not sure)
EventListItem

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm fine starting with <EventItem /> with a good JSDoc.

EventCard (We are calling the class of all the events .EventCard so not sure)

Side note, I think we should remove any code that is inside a specific event CSS file but targeting a generic class (like .EventCard) because it makes CSS side effect super easy to do by mistake.

@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Oct 10, 2025
@github-actions GitHub Actions
Copy link

This pull request has conflicts, please resolve those before we can evaluate the pull request.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@flaviendelangle flaviendelangle flaviendelangle left review comments

@rita-codes rita-codes Awaiting requested review from rita-codes

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

design This is about UI or UX design, please involve a designer. PR: out-of-date The pull request has merge conflicts and can't be merged. scope: scheduler Changes related to the scheduler. type: new feature Expand the scope of the product to solve a new problem.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[scheduler][styled] Add a Popover to render the "X more events" in the Day Grid

3 participants

@noraleonte @mui-bot @flaviendelangle