Designing a dynamic responsive week calendar

Designing a dynamic responsive week calendar

I’m creating a dynamic responsive week calendar, using Twitter Bootstrap.
Here’s my current implementation: (was a little long to paste in here in full)
And here is a current screenshot of it:

What I’m trying to achieve is a design which will be fully dynamic – generating the initial view from my back-end is no issue, but is a little complicated, as my current implementation uses tables. I fear it will be hard to maintain it on the JavaScript side of things, i.e removing events/adding them on the fly.
Obviously, I picked tables as it made sense to me – a week calendar is basically a table. I’ll describe my design:

An event may span for more than 30 minutes, so I use rowspan to define how many hours it should span on.
There might be two events conflicting (I don’t allow more than two). As it currently set-up, they show up next to each other, each taking 50% of the event width and taking as much as height as they need to represent the ending time.
On the back-end side, I calculate how many td I need to skip in order not to have extra columns at the end of the table (as rowspan pushes some to the right)

My questions are the following:

Is this the right approach?
Should I apply the same back-end logic to the front-end, and re-calculate the amount of tr/td to show according to the amount of events I have, or is there a better solution for this?

Related:  How can I make Bootstrap 4 columns all the same height? [duplicate]

Ideally, a good answer should describe how to handle events on the front-end side without complications or an alternate (responsive!) design for this issue.
I don’t want to use an existing plugin, as I’ve searched and tried multiple ones, and I want to keep this really light weight, but if you have a great suggestion for one that fulfills the requirements – I would love to check it out! (jQuery week calendar is too slow and cluttered for example)
Note: I have no intention to support browsers older than IE9.


Solution 1:

After researching the issues and consulting with a few front-end experts, I’ve concluded that keeping it as tables is the best option, even if generating it is not trivial.

While this decision makes it hard to dynamically change the schedule without re-generating the whole table, the benefits of styling elements that should be a table as a table pay up – aligning, widths, heights, borders, etc. are all easy to control and work great cross-browser.

An important note is that this approach is making the responsiveness of the schedule a trivial quality.

Solution 2:

Using a table is a good approach.

Ok, this is a jQuery based solution to the “rowspans are pushed right” problem.
The origin of the problem is a wrong table generation in the backend.

Related:  Bootstrap popover, hide on click outside?

For example if a td with rowspan=”3″ is rendered, then the td’s at the same column index position in the next two rows will be affected and pushed to the right. This is undesired.

<table border="1">
    <td rowspan="3">Event 07:30 to 09:00</td>
    <td>Should not be rendered.</td>
    <td>Should not be rendered.</td>

The correct solution is a correct table generation in the backend.
Rendering td’s after the rowspan should simply not happen.
If you know, that you are rendering a rowspan=”3″, then act accordingly. 🙂

Anyway, if it’s not possible to modify the table rendering, then use jQuery to fix it:

Solution 3:

That is a perfectly acceptable way of doing it.

If I were you I would probably use divs though because they are more manageable and easier to use CSS on and are more standard.

Other than that I think you’re taking a good approach and you should probably do the front end the same way as the back end because you know it works.

As far as handling events I would just sort divs by type using classes and then use event handlers with the types of events you want to use (I don’t know what you’d want besides click though) on those corresponding classes.

Solution 4:

what happens when an event is overlapping only partially with another, i mean, 2 overlapping events takes 50% of the witdh, but if one of them will finish sooner and the other later, the one that continue, does it takes all the width of the “next” row or continue at 50% of the width? what happen if the event A is from 8:00 to 8:30 and event B is from 8:00 to 18:00 ? it should be nice that the event B will fullup the width until there is another overlapping event..but i guess it could be a little tricky.
just a thought. Happy coding, this is really a nice project.

Related:  Bootstrap modal dialog, event relatedTarget is undefined. How can I get clicked element?

Solution 5:

Using CSS and divs, instead of table cells, could be more precise and will certainly be easier to calculate client-side and retain responsiveness. Here’s a pseduo-CSS/JS example for the first event:

.event:first-child {
    height: `(1.5/24)*100`%; /* 6.25%, based on duration */
    position: absolute;
    top: `(10/24)*100`%; /* 41.7%, based on event start */

Solution 6:

dhtmlxScheduler – Ajax/JavaScript Event Calendar

dhtmlxScheduler is a JavaScript event calendar that allows you to add a Google-like scheduler to your web app or website. Intuitive drag-and-drop interface allows the end users to quickly manage events and appointments in different views: Day, Week, Month, Year, Agenda, Timeline, etc. Very lightweight (about 20Kb gzipped), highly customizable, and fast, dhtmlxScheduler provides a quick way to add an Ajax-based event calendar on a web page.