Vertical view and Grouping of Resources in Resource Scheduling

[syedhusain8055]

Hi,

We just want to use big calendar in our project for scheduling. Our main focus is on Resource Timeline view we have number of resources and also their groups. We need to show the Resources vertically with one level nesting. So is there any prop available for this (may be I missed it) or it needs to be add in react-big-calendar? Does anyone have any other idea for doing this it will be very helpful for us?

Thanks

[cutterbl]

The current TimeGrid (Week and Day views) is a vertical list of time slots, with they date and resources shown horizontally across the top. Are you asking for a view where those positions are reversed? If so, then no, this is not currently available. It would require a custom 'view', as well as custom methods for determining 'event' placement and selection handling. It does sound like a great addon though. We would look at a PR, if one was submitted.

[syedhusain8055]

Thanks @cutterbl

[syedhusain8055]

Just one more thing I want to ask that is mobile view available for the calendar?

[cutterbl]

Mobile needs some rethink. You can get a reasonable view on a tablet. Smaller devices it will render, but I wouldn't call it usable.

[damian-kociuba]

@syedhusain8055 Do you want to achieve something like this:
https://user-images.githubusercontent.com/15156674/36196832-dd36ce7c-1169-11e8-9d8f-718a4ff6b026.png
?
(source: #727)

I'd like also to group events in first order by date, next by resource. I used the same code as in mentioned PR, but on current version of RBC, events are grouped by resource, next by day.

I hope I understood you correctly

[damian-kociuba]

So, just to be sure, @cutterbl , "expected" side is not possible to configure on current version of ReactBigCalendar, right?

[cutterbl]

@damian-kociuba No, the 'expected' is not currently a possible configuration. Would welcome a PR to provide the option.

[himanshushukla31]

@cutterbl Is the vertical representation of resources and corresponding time slots horizontally in Big calendar possible by any means?

[cutterbl]

@himanshushukla31 Today? Only if you write a custom view renderer with a custom layout algorithm.

[abdulhussain156]

any update on this? is the "expected" part still not configured?

[cutterbl]

@abdulhussain156 No, we have not begun active code development on the next version of Big Calendar. Still in planning stages.

[abdulhussain156]

@cutterbl can we use custom View to make such a week view??

[cutterbl]

@abdulhussain156 Yes, you can. If you decide to do that, I'd love to see it when you're done.

[abdulhussain156]

@cutterbl
I couldn't actually build a custom view for it. I will still work on trying to build a custom view for it but I managed to find a work around with the number of slots and steps. The header is made custom . However, I am rendering the Events multiple times based on the column just filtering out the data array so each event goes in its own column. The columns are shown on whatever I select from the checkboxes on leftside

here is the picture of what I have achieved so far

I believe these changes can also be implemented in a separate custom View , all you need is to manipulate the "Timegrid" through CSS and DOM and create a custom header.

[cutterbl]

@abdulhussain156 Is this a (custom) nested Resource week view? I know our typical week view with Resources is to have the Resource as the primary header, with the days of the week under the Resource. This looks great! This is a common request that no one has ever submitted a PR for. Anyway I can see your custom view code? Help you with a PR?

[abdulhussain156]

@cutterbl I actually had to face challenges with rendering different Events to different columns. I actually did render the events but it actually affects the styling of the columns. Can you guide me if I can create a custom View using the built-in resouce view? I only need a walk through of how to do it. A push maybe :)

[cutterbl]

@abdulhussain156 Sorry haven't gotten back sooner. Been sick. I could try to help you figure it out.

First step to creating a custom view is reviewing the docs for it. I would make a copy of the Week View component, rename it, then start making your adjustments. If you get stuck, reach out.

[mustafa174]

any update on this ? I want to show day time slot with left side of resources . I have project requiremnt where I can shift time to top like horizontal view also in verticle view is this possible ?

[cutterbl]

@mustafa174 Still on the roadmap for 'next', but that is still in planning phases.

[TobiasDuelli]

@abdulhussain156 have you made any progress on this, or would you mind sharing what you have achieved so far?

[reinaldoacdc]

@abdulhussain156 I'd like to see a sample like this in the docs.
Do you mind in sharing a snippet of it ?

[abdulhussain156]

@reinaldoacdc sorry, I tried making it work, but actually, I was only able to convert the layout, but faced so many challenges showing the EVENTS vertically. I had to stop working on it due to my deadlines.

[reinaldoacdc]

@abdulhussain156 No problem, thanks for responding.

I have one more question about your sample.
How did you restricted the start time for the resources?
The resources slots are grayed from 9h to 10h, just like a backGroundEvent.
I couldn't find a way to do it within resources in the docs.

[abdulhussain156]

@reinaldoacdc
you can use
slotPropGetter={customSlotPropGetter}

and define the custom Function like this

`
const customSlotPropGetter = (date) => {
const formattedDate = moment(date).format('YYYY-MM-DD HH:mm');
const minutes = moment(date).minutes();

let style = {};
if (minutes === 30) {
  style.borderBottom = '2px solid #DEECED';
}
style.borderLeft = '1px solid #DEECED';
const matchingEvent = TimeSlotData?.find((event) => {
  const startRange = moment(event.start).format('YYYY-MM-DD HH:mm');
  const endRange = moment(event.end).format('YYYY-MM-DD HH:mm');
  return (
    formattedDate >= startRange && formattedDate <= endRange && event.availability === 'open'
  );
});

if (matchingEvent) {
  style.backgroundColor = 'white';
}

return { style };

};`

in my example I am using, a date start range and end range. In Between those ranges, I am returning a style with background 'white'

[reinaldoacdc]

@abdulhussain156 Great idea. Thanks so much for sharing it.

[abdulhussain156]

@reinaldoacdc no worries bro