React-big-calendar: Resource view, feature request

[ogyr]

The component is awesome - the only thing missing for me is a resource view.

It is often the case to add resources to a calendar event: Eg. a car vendor could add a sales agent and a car model to the event. Now it is easy enough to render the event contents with custom color and text, but events will still be mixed up in the Week/Day columns.

I would like a Week like view, but instead of the week days it would show resource names, displaying the resources' events in the respective columns.

The api/props can be very simple. I have the following props in mind:

• resourceAccessor,
  resourceAccessor= 'salesguy_id'
• the list of resources,
  resources= { [{id: 1, name: 'John'}, {id:2, name: 'Linda'}] }
• a function to test membership,
  resourceMembership = { (resource, event) => resource.id == event.salesguy_id }
• a renderable node as resource column headers,
  resourceHeader= { (resource) => resource.name }
• an option to show the resource view in the toolbar,
  views= ['month', 'week', 'day', 'agenda', 'resource']
  messages= { ...messages, resource: 'Sales agent view' }

Like this we could also easily switch between different resource categories - eg sales agents and available car models, calling that "Events by sales agent view, Events by available cars".
Any resource restriction rules are handled by the application, but the display can easily be handled by the calendar.

Interested to know what you think about it,
raf

[ogyr]

Bonus points for also passing a resourceFlexAccessor as prop, that sets the relative width to all the other resource columns.

Resources can typically have a different "event-capacity", e.g. the short visitor tour can be booked by 5 guests per hour, while the long tour can only accommodate 2.

• resourceFlexAccessor= { (resource) => { return resource.capacity > 4 ? .3 : .1; } }

[jquense]

hey there,

Thanks for the thought out suggestion. To be honest the main reason there is no resource support, is because we haven't had a use for it, as such I don't feel like I understand the use case enough to properly implement such a feature.

What I gather is that its a way of grouping everything into sort of sub-calendars? Your suggestion does seem simple enough as a layout, but would would be the date range for such a view? would you just lump all events per resource in the same column despite the date they occured? Or go with some thing like this which is a lot more complicated seeming :P

[ogyr]

Hi,

First for the use case: The calendar itself is a resource view of our most valuable resource: time. This is perfect for individuals, but when a business wants to schedule events, it most often includes a list of all the needed resources to fulfill this events goals. For example

• A hairdresser event may need (in addition to the customer name and the datetime) a certain stylist.
• A car repair shop may need a mechanic and one of the lifting platforms.
• A chiropractors office may need one of the treatment rooms to be available.

Now the most important quality of a resource in this regard is it's capacity. I want to visually see which stylist can handle a client at 13 o'clock (one stylist can handle one client at a time), which car mechanic can repair Mr Joneses car this afternoon (a car mechanic may be able to tend to 2 cars if one is running tests and the other is being inspected) and in which room I can treat poor Elliot tomorrow (number of concurrent treatments depends of course on the room).

The simplest way to see if a resource is being used is a column (or row), where only events using that resource are visible. (Of course there are always colors and icons to visually indicate another resource dimension, but they are less clear and get less effective when a lot of events clutter the view).

The simple, manual React way to construct HORIZONTAL and VERTICAL resource views for all date ranges (using the resource props nomenclature from the first post!):

// props:
// horizontalView, true/false
// resources
// resourceMembership
// events
// calendarprops
let ResourceView = function(props) {
  let subcalendars = props.resources.map((resource) => {
   return ( <div className='resource-view-subcalendar' style={{flex: 1/props.resources.length}}>
         <h3>{resource.name}</h3>
         <BigCalendar {...props.calendarprops} 
                  events={props.events.filter((event) => props.resourceMembership(resource, event)} 
         />
         </div> )
  })
  return (
    <div className='resource-view-calendar' 
           style={{display: 'flex', flexDirection: props.horizontalView ? 'row':'column'}} >
        {subcalendars}
   </div>
   )
}

Obviously you would need to be smarter about left or top date/time sidebars and the resource titles, but I guess that approach could already be workable (not tried). An option to position them below each instead of next to each other would be a simple matter of css.

If needed, groups of resources can be obtained by permutating the resources and just chain their filters on available events. But that's something left to after the simple case.

Maybe by making date/time sidebars and column titles fully optional is a way to let developers build their own resource views as outlined?

raf

[edit: code upd]

[jquense]

hey thanks for the thorough posting.

I am open to a bunch of options here, I think its helpful to try and strike the right balance between flexible and not opinionated. I do like the simple approach of just combining a bunch of big calendars and link them together.

The other option is to build grouping into TimeGrid directly. Its not my favorite approach.

And perhaps in the middle is creating a new ResourceTimeGrid that reuses some of the TimeGrid components, or TimeGrid itself (if we allow disabling the side gutter). One of my original plans was to make views on the calendar plug-able, and to some extent they are, if you provide a keyed object with Component values to the views it will use the components and pass any props to it.

In any case its a bigish enhancement and I don't know quite when it would happen, but If you are willing to either try the first approach and reporting back what you found lacking in the API, or if you want to PR something I'd be more than happy to walk through stuff with you.

[ogyr]

I can try to build a rough version following the first approach as outlined. Unfortunately I have very little time at the moment (maybe some more during Christmas holidays), so this could take a bit.
I'd be happy to receive some pointers from you in case I get stuck. I haven't delved into the TimeGrid stuff all that much.

raf

[bkniffler]

I'd find this very interesting too, its the only feature I really miss compared to fullcalendar. Any success on it @rafsoaken?

[ogyr]

Sorry, in the end I did not have time to implement that feature myself.

[bkniffler]

Ah, what a shame. I will have to use fullcalendar then, since displaying resources in day/week/month views, and horizontal timelines is a must have as soon as you deal with more then 1 dimension (time vs time/room or time/person or time/object).

Don't get me wrong, react-big-calendar is superior and preferable to fullcalendar in a lot of aspects, but the views are a bit limited as is.

[jquense]

I don't know that RBC is superior to FC, its better suited for react, but FC got a lot more going for it :P also in full calendars case the resource views are a premium feature 💲

[HriBB]

We need a ResourceView similar to TreeGrid, but instead of rendering a single DayColumn here, we render one for each resource.

[sabarasaba]

I started working on this a few hours ago and TBH it wasnt as hard as I thought it was going to be (although @HriBB comment straight away pointed me in the right direction). I'll create a PR later on this week

[sabarasaba]

@jquense Hey man, I'm a bit stuck trying to get this to work with the dragAndDrop addon. More specifically when dropping an event from Resource A into Resource B how can we expose the corresponding resource id that belongs to that dropped target in backgroundWrapper.js:118

AFAICT only the renderHeader will know about this and not the background cells, so I'm not entirely sure what's the best approach to take in this case.

EDIT 1: I ended up getting it to work by passing down the resourceID to the wrapper of TimeSlot although I'm not sure thats the best solution.

[jquense]

it's hard to say without seeing any code on how you are implementing it, but I'd imagine the resource detail would be on the event object itself no?

[sabarasaba]

@jquense nvm, I got it to work perfectly fine. It's just a bit complicated to get the resource view to play nicely when you have lots of them as the current layout shrinks cols in order to fit the parent element.

Ideally would be nice if day-slots have a min-width so that they dont shrink down that much, so that's what I'm currently fighting against atm :)

PS: I can share the code if anyone is interested but it's not super clean or PR ready yet, I'll definitely clean it and get it ready for review over the weekend if I have enough time

[bkniffler]

Looks great so far! How do week/month views look with the resource view?

[sabarasaba]

@bkniffler This is just a separate view so it is not integrated in any way with the other ones. Internally it works exactly like the day view but instead shows extra columns for all different resources while keeping support for selection, dragndrop addon, and so on.

[bkniffler]

All right, this implementation makes sense. So we could have resourceDay/resourceWeek/resourceMonth views sometime. I'd love to see timeline views (horizontal view) in react-big-calendar, especially in conjunction with resource grouping, but I didn't manage to get something up yet.

Keep it up @sabarasaba! Hope to see your resource view as PR soon 👍

[jquense]

@sabarasaba feel free to use css classes to make your life easier. I think it's reasonable that when using resources there is a min width on columns. The reason it's not that way by default you really don't want horizontal scrollbars. This case is different tho

[surya-purohit]

@sabarasaba It's looking great. Have you completed it? Just wanted to implement this :)

[andywong39]

@sabarasaba can I see your implementation ?

[niladrimahato96]

Is it possible to control the length of title like "The quick brown jumps over a lazy dog..." to "The quick brown fox.." in month view, but should not affect in agenda....I tried with 'titleAccessor' but it affects agenda also.

[bkniffler]

I think you could via css selectors and
https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

You could also just conditionally change the titleaccessor based on the current view.

[niladrimahato96]

Thank you.....eventPropGetter and css solved my issue

On Fri 22 Feb, 2019, 7:17 PM Benjamin Kniffler <[email protected]
wrote:

I think you could via css selectors and
https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

You could also just conditionally change the titleaccessor based on the
current view.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/intljusticemission/react-big-calendar/issues/13#issuecomment-466401393,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AY0UeULq7gJTE7B3vSVZxz9RL9R7oW5Tks5vP_TegaJpZM4Guafl
.

[niladrimahato96]

One more question..is it possible to change the name of agenda to something
else like list view?

On Tue 26 Feb, 2019, 1:26 PM Niladri Mahato <[email protected]
wrote:

Thank you.....eventPropGetter and css solved my issue

On Fri 22 Feb, 2019, 7:17 PM Benjamin Kniffler <[email protected]
wrote:

I think you could via css selectors and
https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

You could also just conditionally change the titleaccessor based on the
current view.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/intljusticemission/react-big-calendar/issues/13#issuecomment-466401393,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AY0UeULq7gJTE7B3vSVZxz9RL9R7oW5Tks5vP_TegaJpZM4Guafl
.

[bkniffler]

I think setting localizer to something like {messages: { agenda: 'List View' }} could solve this (I've not tried it though). But you shouldn't be misusing the issue here as a help desk, there is a dedicated community for this: https://github.com/intljusticemission/react-big-calendar#join-us-on-reactiflux-discord