search

namespace-ee / react-calendar-timeline

A modern and responsive react timeline component.
MIT License
1.93k stars 630 forks source link

Support not responsize column widths #538

Open dimagimburg opened 5 years ago

dimagimburg commented 5 years ago

I don't want the calendar to be responsive, I wanted to provide a fixed width to a column so it won't resize when my browsers window resize. From UX side of view, the items and column widths won't squeeze when opening the window on 2 different screen size, so If one window size gets 24 hours inside the grid of width 50px for example, smaller screens will have only 16 hours of width 50px.

Maybe a prop called fixed=true could be passed to timeline, and the resize won't squeeze the widths of the columns.

Reproduce: on one screen size: Image1

on smaller size: Image2

wanted result on smaller screens: Image2

persiasensei commented 5 years ago

I have same problem. Is there a solution for it?

Ilaiwi commented 5 years ago

@persiasensei. nope, not currently. I could help if you or @dimagimburg would like to add this as a contribution for the library. the optimal solution would be adding a width prop to the component.

dimagimburg commented 5 years ago

Hey, right now for me this is not super urgent, my ux designer could live with that for right now, but I could look into the library to try and tackle this issue. One thing that was stopping me from diving in last time I dealt with it is that the table construction was done with a lot of calculations and updates (regarding new start and end time), which is of course fine and acceptable but didn't have time to dig into it too much. Let me see next week if I could fix this fast enough

NuclleaR commented 4 years ago

@Ilaiwi Hi! I could try. Could you help?

Ilaiwi commented 4 years ago

@NuclleaR this is not supported yet. You can contribute it via adding a width prop to the library code. lmk if I can assist you in any capacity

RobertDS07 commented 3 years ago

If you change the zoomScale to always be the same I guess you could do this Link to explain: https://www.gitmemory.com/issue/namespace-ee/react-calendar-timeline/69/481319985 Prints of my solution: #779