Did you know that you have a choice in how you can get things to
display in your browser? Well...you do! The most common approach for
getting content to display on your screen is by working with DOM
elements. This is where you (and 99% of the entire world) create HTML,
CSS, and JavaScript and have elements appear magically. The other
approach uses the canvas element. With a
canvas, you manually specify exactly
what you want drawn and displayed on your screen. Both of these
approaches have their uses. For the kinds of visually complex
applications you will be creating, knowing when to use which is a good
thing for you to be aware of.
It’s been a while from your post I know…but curious if you know which approach of the two you’d recommend for a calendar which has draggable events (including multi-day events)? It’s not obvious to me (newbie) whether DOM or Canvas would be a better way to go?
My first answer would be DOM elements. The reason is that your calendar won’t just be a visual. You will want to interact with it using your mouse, allow right-clicking, and so on. Those are things the DOM is natively good at. You will have to reimplement all of this (hit testing for mouse interaction being on the more tricky things) on the canvas.
ok - thanks for responding kirupa - I’ll start experimenting - one specific little feature I wanted was when a multi-day item is dragged (say a 4 day event) to the right, that part of the horizontal bar of the 4 day event then starts appearing at the start of the next line (next week). I see some of the good JS calendars like https://fullcalendar.io/ don’t seem to do this.
Question was do you think a DOM approach would allow this? Would mean tracking position of the drag, computations to realise it crossed over to the next week/line, and then create another rectangle. Plus as you drag backwards/forwards during this process the width of both rectangles (current week & next week) would be changing. I suppose the question is is there anything stopping you doing this with DOM?
The DOM approach would certainly allow this, and what you are trying to do would be much easier in it. Though, easier is relative in this case. What you are trying to do is going to be a bit complex in both the DOM and the Canvas case
I made a multi-day-spanning calendar thing 3-4 years ago using Dragula. It took a DOM-based approach, and the library had some conveniences for creating drop clones and preview shadows.
