Timeline for day
Im trying to figure out how to create a timeline for a day.
The basic function is to schedule 'workers' with worktime, breaks etc.
https://i.imgur.com/qmpyAQ0.png
I assume I need some kind of black 00:00 ->23:59 timeline, that Im then able to add different segments to.
I feel like im just kind of lost where to start.
19 Replies
you have to break it down into manageable chunks, and implement those one by one.
I'd start with making the timeline without schedule blocks on there
Then I'd add the pagination so you can move the timeline back and forth
only then, you'd add the schedule blocks
It's definitely something that needs javascript to be practical
The timeline itself is a prime candidate for a
display: flex;, though I'm struggling a bit with what would be the most semantically appropriate way to display that. Probably an <ol>?Yeah I was afraid I'd need some javascript to.
hm, though thinking about it, you'd probably want to use grid so you could use that to position the schedule blocks using
grid-template-columns
unless you render it all serverside, which is totally possible, you're going to need javascript yeah
the left/right arrows are going to be annoying if you do it server side thoughThe design is mostly a prototype, but I recon its messy to see the full 24 hours.
Say I make it a grid, of 24 columns, could I then have something generate a start and end rectangle on a given input?
Does that make sense?
you could do that a couple of ways. You could either decide to have each hour be 4 grid columns, and then you could position the individual appointments at 15 minute intervals. So you'd have 96 columns, with 24 cells each spanning 4 columns
or you could do 24 columns, and have the appointments start in the nearest cell and then offset it somehow (probably a negative/positive margin
you'd probably also only want say... 10 columns (so 10 or 40 with 4-wide cells) cause you probably don't want the full day visible at the same time
Would this allow the time to be very specific?
I guess it might only limit the time graphically, and not the acutal amount of time.
by default the first option would let you specify by 15 minute intervals where the block went, the second would give you as fine a control as the pixels on the screen allow... but yeah, it'd only be visual
you could also of course span 6 columns for 10 minute intervals, or span 12 for 5 minutes
That could probably work and I recon if I just manage to wrap my head around how to do it, I could configure it later.
I'm struggling a bit getting the layout to work with an ol actually, so it might be better to just use divs even though they're not semantically accurate
I might be putting to much into this, but this is basically the main function of the site
I've built something vaguely useable https://codepen.io/jochemm/pen/yLxBmag?editors=1100
it's ugly and not interactive, but it demonstrates how to make the layout at least
I've used an ordered list for the timeline, because it's ordered data. The appointments could also be an ordered list if they're always in ascending or descending order, but it's an unordered list here.
you control where the blocks go by setting two variables in the inline style for each li representing an appointment (or whatever you want to call them). The
--columns) variable is used for the grid-column property, so you set the start and end column separated by a /. 5 / 6 would start at the start of the 5th grid column, and end at the start of the 6th (so 1 wide). The --offset controls how far to the left (negative) or right (positive) the block is offset
this doesn't currently support anything but durations in full hours, but you can adjust the width by setting a width property on the cell. You can probably most easily do that using another variable in the inline styles
I've added some comments in there too, explaining what does what. Hope it helps some 🙂
I'm heading offline now, but I'll try to answer any questions you have tomorrow if no one else gets to them before thenWould something like this be madness? https://i.imgur.com/UjwdUDU.png
you'd have to test it with different widths of screen, but I don't think it's necessarily a bad solution
The idea was if its %-based maby it would be easier to squish it when needed.
I find myself spending way more time to think about issues instead of doing any actual coding
I think i see my mistake, your grid variant seems way more stable.