React-big-calendar: multiple columns per day view

[tylerzika]

Is there a way to produce multiple columns on the day view? I'd like to compare events associated with multiple users, side by side.

I checked the docs and didn't see how this could be implemented.

[jquense]

see #13, #290 nothing exists right now but it'd not be to hard to implement the idea in #290 if you want to give it a shot

[tylerzika]

Thanks for the reference! Shoot I have no idea where the start. Can you point me in the right direction?

[jquense]

Check out TimeGrid, it renders an arbitrary range of days (Week and Day are implemented in terms of it). What (probably) needs to happen is that that component should support "grouping" e.g. by resource or by year, etc.

[sabarasaba]

@tylerzika I guess this is good timing, I have to implement the same feature for the project my company is working on. If you already start it I can certainly give you a hand to get this out, if not I guess I'll go solo 💃

[tylerzika]

@sabarasaba I believe the multiple column day view is beyond my current skill set.

[rchanou]

I'm also working on this functionality in my own fork for a project that needs it. (Would've tried @sabarasaba's but it doesn't look like he has a public fork.) You can check out the key changes I made in TimeGrid.js here.

[tylerzika]

@rchanou care to share a screen shot on how it looks? Also, how many columns can the day view support? What determines which column an event displays in?

[rchanou]

I only added very basic grouping so far, I still have to add in headers:

I added the prop groups, and each event can have a group. No column limit.

Expand to see the props for the screenshot calendar.

<Calendar
  defaultView={Calendar.Views.DAY}
  defaultDate={new Date()}
  groups={["Group A", "Group B"]}
  events={[
    {
      title: "Event 1",
      start: new Date(y, m, d, 9, 30, 0, 0),
      end: new Date(y, m, d, 15, 30, 0, 0),
      group: "Group A"
    },
    {
      title: "Event 2",
      start: new Date(y, m, d, 11, 0, 0, 0),
      end: new Date(y, m, d, 13, 0, 0, 0),
      group: "Group A"
    },
    {
      title: "Event 3",
      start: new Date(y, m, d, 9, 30, 0, 0),
      end: new Date(y, m, d, 11, 30, 0, 0),
      group: "Group A"
    },
    {
      title: "Event 4",
      start: new Date(y, m, d, 9, 30, 0, 0),
      end: new Date(y, m, d, 10, 30, 0, 0),
      group: "Group A"
    },
    {
      title: "Event 5",
      start: new Date(y, m, d, 10, 0, 0, 0),
      end: new Date(y, m, d, 11, 0, 0, 0),
      group: "Group A"
    },
    {
      title: "Event 6",
      start: new Date(y, m, d, 10, 0, 0, 0),
      end: new Date(y, m, d, 11, 0, 0, 0),
      group: "Group B"
    },
    {
      title: "Event 7",
      start: new Date(y, m, d, 9, 30, 0, 0),
      end: new Date(y, m, d, 10, 30, 0, 0),
      group: "Group B"
    },
    {
      title: "Event 8",
      start: new Date(y, m, d, 9, 30, 0, 0),
      end: new Date(y, m, d, 10, 30, 0, 0),
      group: "Group C"
    },
    {
      title: "Event 9",
      start: new Date(y, m, d, 9, 30, 0, 0),
      end: new Date(y, m, d, 10, 30, 0, 0),
      group: "Group C"
    },
    {
      title: "Event 10",
      start: new Date(y, m, d, 10, 30, 0, 0),
      end: new Date(y, m, d, 12, 30, 0, 0),
      group: "Group B"
    },
    {
      title: "Event 11",
      start: new Date(y, m, d, 12, 0, 0, 0),
      end: new Date(y, m, d, 13, 0, 0, 0),
      group: "Group B"
    },
    {
      title: "Event 12",
      start: new Date(y, m, d, 12, 0, 0, 0),
      end: new Date(y, m, d, 13, 0, 0, 0),
      group: "Group B"
    },
    {
      title: "Event 13",
      start: new Date(y, m, d, 12, 0, 0, 0),
      end: new Date(y, m, d, 13, 0, 0, 0),
      group: "Group B"
    },
    {
      title: "Event 14",
      start: new Date(y, m, d, 12, 0, 0, 0),
      end: new Date(y, m, d, 13, 0, 0, 0),
      group: "Group C"
    },
    {
      title: "Event 15",
      start: new Date(y, m, d, 6, 30, 0, 0),
      end: new Date(y, m, d, 8, 0, 0, 0),
      group: "Group C"
    }
  ]}
/>

Works for my purposes, not sure if I'll have time to make it merge-worthy. It looks like @sabarasaba might make a PR soon, and @jquense isn't too keen on the approach I took 😅

[sabarasaba]

@rchanou Yes, I'm getting close to finish up the resource view !

Example props

const events = [{
  'title': 'Muffin fiesta',
  'resourceId': 'a',
  'start': new Date(2015, 3, 1, 5, 30, 0, 0),
  'end': new Date(2015, 3, 1, 10, 30, 0, 0)
}, {
  'title': 'Cake fiesta',
  'resourceId': 'b',
  'start': new Date(2015, 3, 1, 2, 30, 0, 0),
  'end': new Date(2015, 3, 1, 4, 30, 0, 0)
}]

const resources = [{
  id: 'a',
  title: 'Room A'
}, {
  id: 'b',
  title: 'Room B'
}, {
  id: 'c',
  title: 'Room C'
}]

return (
  <Calendar
    events={events}
    resources={resources}
    defaultDate={new Date(2015, 3, 1)}
  />
)

PS: I can share my branch if it would be helpful for anyone, but its not merge-ready still and theres some stuff I need to clean up/refactor :)

[tylerzika]

@sabarasaba this looks great!

@rchanou a worthy try!! Way more than what I could have done with my limited react knowledge.

[bkniffler]

It looks great @sabarasaba, slightly offtopic: I also like the status lines on your events. Any chance (assuming the maintainers are interested in that feature) you could do a PR on these ? If not, maybe I'd give it a try sometime.

edit: Nvm, using the eventPropGetter this should be really basic to implement.

[sabarasaba]

@bkniffler yeah thats exactly how I've done it, just appends a custom class and then using a :before selector you can easily achieve that :)

[connorbode]

@jquense why was this closed? was it merged?

[jquense]

The issue was stale. Please feel free to pick up on the work in one of the open PRs