Split headers by week

[evanrenaud]

I would like to be able to split up headers by week, and noticed in a comment that you were planning on doing this:

https://github.com/namespace-ee/react-calendar-timeline/blob/master/src/lib/utility/calendar.js#L41

I wanted to ask if this feature is still in your roadmap, when you think it'll be available, or if there's anything I can help with it.

[dkarnutsch]

I am currently evaluating if we can use this library in one of our projects. I'm currently trying to implement a week view as well as a three row header layout. The three row header layout is necessary for us too, in order to keep the UI context when weeks are used.

You can find my version at: https://github.com/dkarnutsch/react-calendar-timeline/tree/feature/weeks

With the three row header layout everything is working fine, when using the two row header layout I examine the same problems as mentioned in #130.

I'm available to help and we want to get this branch merged. We are open to rename or refactor the code. The current implementation would be breaking as I changed the naming of headerLabelGroupHeight to 'middleHeaderLabelHeight' and headerLabelHeight to bottomHeaderLabelHeight. Accordingly we have added topHeaderLabelHeight and a switch to choose between two or three row header layout (useThreeRowHeader). I'm open for better names, but group and label makes it hard to add a third layer, also because it is not used consequently. I can also provide backwards compatibility if that is something that is required.

[mcMickJuice]

Thanks @dkarnutsch . There are a couple of things I'd like to accomplish with this feature:

• API to resemble what is suggested in Custom headers #349
• User can provide a custom header where user can render any item/time unit
• I want to get away from “header height” props and “format props” and have the user handle this using custom render functions
• I want to allow for n-number of headers, not just the standard headers we have now

This feature should satisfy the following feature requests:

• Custom headers #349
• Enable alternative time formats #329
• Create onHeaderClick and onSubHeaderClick callbacks #140 (maybe)
• Add tabindex to the header and subheader #263

[dkarnutsch]

I understand that this is the long term goal, but is there any chance we can get the weeks in any sooner?

My solution works fine with the three line header, but still has the zooming problem mentioned in #130 with the two line header. I will try to dig into that problem and find a possible solution. The latest response from that thread is from 19th of February. Are there any more recent insights?

[mcMickJuice]

No there is not. If this is something that you need specifically for your project, you can always fork and publish your own version to npm.

I can see if I can find time to implement this as is (not with third header, that's too specific to your needs) and see if I can fix the zooming issue. No promises though.

[dkarnutsch]

Maybe together we can fix the bug, as I'm keen to help. We just need to clarify what the expected result should be.

Should weeks be optional or mandatory?

Also the timeSteps are kind of vague, which I will try to illustrate.
Starting at the smallest unit possible. We can see one hour and its minutes.

We can't zoom in any further and by clicking the hour we can zoom out. Everything is ok.

Now we have the day with its hours.

We can zoom in to see the hours and we can zoom out to see the week.

Now we have the week with its days.

We can zoom in to see the days and zoom out to see the month(?)

And this is actually where the problem is. We see the month as weeks. The top row should contain the month and the bottom row the weeks right? Also the situation would change if weeks are optional.

[dkarnutsch]

While digging into the code I found another interesting case:
When having a small window like:

I would expect that clicking the top header would result in zooming out, which is actually what is happening. But when clicking the bottom header I would either expect to zoom in to the minutes or not resulting in any change if the minutes can not be displayed due to lacking space. But it is also zooming out, which I think is wrong.

[RC1245]

Is this feature likely to be merged anytime soon? I was looking at potential timelines which handle a by week basis and this looks very promising.

I did try installing that specific branch, but there were issues when it started up related to babel

[Ilaiwi]

@RC1245 no one has updated this for a while now. #349 will make it easier to implement but I am afraid no one is working on this.
I will close the PR for inactivity. Please feel free to pick it up again and implement this