React-big-calendar: Create Custom Views based on existing ones (change rowLimit in Month view)

[driglou]

It's a question, not an issue. However it might be helpful to others who are using this module.

Let's say I want to modify the rowLimit in MonthView module
As well as I want to add more props to events and display them, like lets say owner of the task.
How do I make my custom view to copy existing MonthView and adding the changes that I want to add to meet the needs for my needed behaviour?

I am new to React and es6 so I might have missed something, but would appreciate if someone could help me understand it.

[tobiasandersen]

Have you looked at the components prop? If so, is there anything you feel is missing?

[driglou]

I've missed it at the bottom, all is clear except for one thing
How can I change rowLimit in Month.js, through BigCalendar component?

[jquense]

you can't, rowLimit is internal to the component and calculated based on the available space in each row

[tobiasandersen]

I'm a bit curious about your use case for it @driglou. Why do you want to change it? :)

[driglou]

I understand I might be trying to break the month layout but I would like to see more than 5 items per cell of day.
I would like like up to 8 events.
Not more since then it's better to use week layout.

I simply want even if there are multiple projects in same day, for person to be able to see tasks without checking more detailed version as we are media production company here are tones of events daily

[jquense]

there are a few previous issues on that you can check out, but essentially it doesn't work like that, the calendar is the size you set it to and it will show as many event that fit in each row. So if you have room for 8 events then 8 will show

[tobiasandersen]

What you're saying is essentially that you want the days in the month view to be taller. You can actually do this already by giving the calendar's container a larger height.

[driglou]

Wouldn't there be a good idea to have 2 clases on the row that displays events.
one .has-events (specifcying that the whole row (week) has at least 1 event) and another .max-events-8 (biggest number of events in one of the days from that week, in this case being 8)

Wouldn't these 2 classes would allow bigger flexibility through styles for this calendar?

As this is what I would like to do, if there are no events in all week of the month, I want all row cells to stay in nice sqaure shapes, but if there are more events I want to expand only as much I need, without having all rows being large vertically, but containing only max 3 events per cell in particular week.

[tobiasandersen]

Hm yeah, you can't do that now. All calculations will get a lot more complex if we added this api, and I'm not sure it's worth it tbh. I'm not even sure how it'd work. That's just my opinion though, @jquense knows more and might think differently...

[driglou]

I'm just trying to explain what I felt to do in the first place.
I would gladly work on my own PR, but maybe that's not good idea to begin with, so I would like to know what you guys think as well.

[jquense]

classes won't help that case. In order to get the behavior you're looking for you'd have to fairly fundamentally change the styles of most of the Month calendar. I do think this is a common enough ask that it would be worth exploring but the implementation has to straightforward and not add a lot of complexity, In terms of an api it'd probably look like a expandToFit prop that disables the event row truncation, adds top level css class to the month view that overrides the necessary flex styles so that the calendar expands to fit it's contents

[driglou]

Thanks a lot for looking in to my issue.
I will still explore some options, if I have something solid, I will make a PR

anyways, great great calendar, really nice to see sometihng like this being maintained.

[William-Unosquare]

We are using this component for an app, and having an issue. We'd like to specify the max number of events per slot before the "see more" button appears.

After researching I've reached the conclusion that there's logic somewhere for the button to only appear if there isn't room to fit another event. This logic seems to not work at all for us, with our events running out of the slot box until there are 4 events.

We don't want to increase the height of the calendar as this ruins the no-scrolling experience. I do believe there's room for improvement here. I do wish I had time to contribute something towards this, but I don't so I just wanted to bring it up again.

[misantronic]

I want to print the calendar - therefore I need to force render all events. Mostly I really don't care about calculating rows about whats beautiful and what fits in the viewport. I just need all events in the month-view.
So I would really much appreciate if there was a way to force render all events.