Swap resource and day header in week view.

[Patrick-Spielbichler]

Hello everyone,

I am currently working on a timeslotting system for various rooms (resources) and have come to the following problem. In the week view the columns are first grouped by the resources and afterwards by the days. I want to have the inverse grouping (days ---> resources). How can I achieve this?

I have also looked at issue #727 where the group order is the same as I want to achieve. However I have no plan how it works. I suppose an earlier version of react-big-calendar had other default properties. The question is: Which property can change this behavior.

Here is example code:

import React from 'react';
import BigCalendar from 'react-big-calendar';
import moment from 'moment';
import "react-big-calendar/lib/css/react-big-calendar.css"

let resources = [
     {
        resourceId: 1,
        resourceTitle: 'Dave',
    },
    {
        resourceId: 2,
        resourceTitle: 'Steve',
    },
    {
        resourceId: 3,
        resourceTitle: 'Barry',
    },
    {
        resourceId: 4,
        resourceTitle: 'Gary',
    },
]
let events = [
    {
        id: 0,
        title: 'Board meeting',
        start: new Date(2018, 0, 29, 9, 0, 0),
        end: new Date(2018, 0, 29, 13, 0, 0),
        resourceId: 1,
        color:"#000000"
    },
    {
        id: 1,
        title: 'MS training',
        start: new Date(2018, 0, 29, 14, 0, 0),
        end: new Date(2018, 0, 29, 16, 30, 0),
        resourceId: 2,
        color:"#EEEEEE"
    },
    {
        id: 2,
        title: 'Team lead meeting',
        start: new Date(2018, 0, 29, 8, 30, 0),
        end: new Date(2018, 0, 29, 12, 30, 0),
        resourceId: 3,
        color:"#0f61a1",
        allDay:true,
    },
    {
        id: 11,
        title: 'Birthday Party',
        start: new Date(2018, 0, 30, 7, 0, 0),
        end: new Date(2018, 0, 30, 10, 30, 0),
        resourceId: 4,
        color:"#4A10F6",
        allDay:true,
    },
];

class Calendar extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        }
    }

    render() {
        return (
            <BigCalendar
                events={events}
                defaultDate={new Date(2018, 0, 29)}
                step={60}
                culture={"en-GB"}
                resources={resources}
                resourceIdAccessor="resourceId"
                resourceTitleAccessor="resourceTitle"
                localizer={BigCalendar.momentLocalizer(moment)}
            />
        );
    }
}

export default (Calendar);

Here is a screenshot of the output I get.

And the output I want to get.

I would be very happy to find a solution for this.

Thank you very much!

[Falcoff]

Hello, Did you find a way for doing it easily ? I am looking to do the same but got exactily the same prob .. TY

[cutterbl]

There is no default property for getting this type of display. You would have to write a custom Week and Day view to achieve this, using an existing view as a blueprint.

[Surgeon83b]

Does this also stands for customizing week view as at screenshot (need to display days of week at another format)

[cutterbl]

@Surgeon83b Check out the dayFormat bit of the formats prop

[fs-nathan]

Hello, did anyone find out the solution for this? Thanks!

[MehdiGR]

@fs-nathan did you find a solution

[fs-nathan]

@MehdiGR No man. I had to fork into a separate repo and customize

[MehdiGR]

@fs-nathan could plz suggest similar repo that has similar aspect, I'm struggling. I have built everything for my web app. I'm in the final part.

[cutterbl]

@fs-nathan Have you written an alternate view? I'd love to see it. Have you considered a PR? Even if it was just an example in Storybook.

[fs-nathan]

@cutterbl @MehdiGR I'm so sorry I missed your comments. I've been too busy recently to check Github notifications. I made an example PR here about what I changed for my project: https://github.com/jquense/react-big-calendar/pull/2609/files?diff=split&w=1

This will completely swap resource and day in header column Demo picture below:

I customized the library a lots and even added /build folder so the PR would be a mess. That's why I created new fork and include the only change in TimeGrid

Thanks RBC for all the goodness. It's a great library we could have

[MehdiGR]

@fs-nathan Thank you for putting in the effort. Can you tell me if you've only made changes to the TimeGrid?

[fs-nathan]

@fs-nathan Thank you for putting in the effort. Can you tell me if you've only made changes to the TimeGrid?

Yes, with some css overridden

[MehdiGR]

@fs-nathan I've tested not thing changed still same problem

[fs-nathan]

@fs-nathan I've tested not thing changed still same problem

How did you test it? Could you share an example repo?

[MehdiGR]

@fs-nathan I've tested not thing changed still same problem

How did you test it? Could you share an example repo?

I've modified the TimeGrid.js with your code

[fs-nathan]

@fs-nathan I've tested not thing changed still same problem

How did you test it? Could you share an example repo?

I've modified the TimeGrid.js with your code

It works for me. Could you make sure your code gets built properly?

[dquietguy]

@cutterbl @MehdiGR I'm so sorry I missed your comments. I've been too busy recently to check Github notifications. I made an example PR here about what I changed for my project: https://github.com/jquense/react-big-calendar/pull/2609/files?diff=split&w=1

This will completely swap resource and day in header column Demo picture below:

I customized the library a lots and even added /build folder so the PR would be a mess. That's why I created new fork and include the only change in TimeGrid

Thanks RBC for all the goodness. It's a great library we could have

@fs-nathan I tried your forked RBC with custom TimeGrid.js code, it also built properly but I still don't get the same output as yours, am I missing something?

[cutterbl]

@dquietguy I saw your PR on this. Did you see my comment to the PR?

[dquietguy]

@dquietguy I saw your PR on this. Did you see my comment to the PR?

@cutterbl not sure what PR are you talking about, I haven't notice any comments though.

[cutterbl]

@dquietguy Sorry. Guessing that was @MehdiGR 's PR. @MehdiGR , did you see my comments in your PR?

[MehdiGR]

@cutterbl Yes i've seen it thanks

[almeidapaulooliveira]

I'm implementing this excellent component on a SaaS, and this new view is exactly what I'm looking for.

I was able to fully customize without touching the main code, would be nice to have this feature in.

I will try the fork and see how it goes.