Hello,
Hmmmm ... Never worked on a calendar, so I want to design a calendar in a personal project (instead of using for example fullcalendar).
I want to have differents views : day, week, month, year, planning (like in the Google calendar).
To display a month, it's quite easy with a CSS grid with 7 columns where I put all days of the month.
But to display a week, I need to display hours on the left. At first view it can seem quite easy, but not (or I didn't have the great idea ;)).
Is it better to display the hours line per line, this means 8:00 for monday, 8:00 for tuesday, ... or is it better to display each hour day by day like monday 8:00, 9:00, ... ?
Knowing that next it's necessary to display events sometimes overlapping several hours.
Thanks for your help.
V
You could drill down to a day first then even drill down to an hour (whatever increment) to enter an appointment or notes or whatever.
But you can make the whole month clickable days to bring up that day.
But many ways to do this.
Why not a already made calendar solution?
Why not a already made calendar solution?
Just for the experience to make one myself ;).
Do you know if there is already one made with Livewire ? I don't have found any on the web.
@vincent15000 I would suggest regular HTML, javascript, and Axios js. Too many changes in livewire between versions for me.
I just made one yesterday in react. What i made isnt a date picker but just a calendar showing data, but this supports both :)
@Sinnbeck Thank you ;).
Effectively it seems more like a datepicker than like a calendar.
When I speak about calendar, I mean a calendar to see the planning, the appointments, the tasks, ...
@vincent15000 Yeah thats what I used it for. Just displaying a calendar :) I had to make a calendar to show open dates in a callcenter and each cell has a checkbox to close that day. No date picking going on at all.
Of course if you need a lot of logic to show events that span multiple days etc. then that will require some css. But this library exposes all you need to render cells with dates, and buttons to change the month etc. It only exposes logic, no layout etc.
But to display a week, I need to display hours on the left. At first view it can seem quite easy, but not (or I didn't have the great idea ;)).
@vincent15000 To me, this would just be a table with both headings across the top (days of the week) and then headings on the left-hand side (hours of the day).
@martinbean Good template, I would also suggest adding a from and to dates at top so the user can keep track of what dates they just pulled up. If in a dispatch situation where you may get a call, it's easy to loose track of where you left off.
@martinbean The only problem of a table is to display the hours in front of a border, I mean a row table has 2 borders, the upper one and the bottom one.
I never tried a relative / absolute position in a table, probably it works.
UPDATED => possible if each hour has 2 rows and the headers have rowspan="2".
But how to display an event during 3 hours ? I'd like to find how to code a calendar similar to fullcalendar or google calendar.
@jlrdw It was literally meant to just be an example of a HTML table; not a fully-functioning calendar app.
@martinbean Sure ;).
Please or to participate in this conversation.