Calendar and Gantt in CSS for Rails with Minimal Javascript
It is quite common to have calendar and gantt chart for Rails application involving productivity. But what are the choices for those components ? We usually end with something written in Javascript. But they add unnecessary or redundant codes on top of Rails equivalence. Most redundant part is codes handling date, time and timezone. Also, a browser call to Rails application often ends with two renderings, one for HTML and the other AJAX call from Javascript. Assets of Javascript eventually become too heavy to have reasonable performance.
There are some half-baked solutions for this problem and you should try to see whether it works for your application.
FullCalendar is most common one for calendar, but it is really heavy, not to mention the use of moment.js and localization. To have a reasonable calendar in CSS, you can check out the calendar component of Spectre.css, It is listed as experimental, but works reasonably well. To draw the calendar, all the calculation is done on server-side of Rails application, thus, sans Javascript. But it cannot draw events over days. For that, take a look of vue-simple-calendar.
Don’t be fooled by the mention of Vue in its name. The calendar is basically done by CSS. Javascript and Vue are used to calculate dates in order to construct proper HTML structure, which can also be done by Rails application on server-side. The basic HTML structure is listed in the section of customization. You can look at the final HTML from the demo, construct the same HTML from Rails application and apply the CSS from vue-simple-calendar to it. It supports events over several days and weeks. And it can also be blended with Spectre.css calendar.
How about agenda view where several events are drawn into a column and layouted automatically ? Well, it has to be done by Javascript. Check out one-day calendar or a similar one. While the Javascript code was written years ago, it still work well. You do need a modern CSS for that. But it is not very difficult. The most important part is the algorithm for layout. And you can use it to layout events into the above-mentioned calendar.
Drag-and-drop needs Javascript. But by using CSS to draw and localize the calendar from server-side, you already reduce a lot of redundancy.
Similar to Calendar, there are many Gantt chart by Javascript, for example, Frappe Gantt. It is not hard to find pure CSS gantt chart like this one. By constructing HTML from Rails application and applying CSS, a beautiful Gantt is available. But drawing the relationship arrows needs Javascript because the layout and position of each event is unknown to Rails application. Here is a very good article “How to Connect HTML Elements With an Arrow Using SVG” on this issue and it is quite easy to implement in Stimulus.js, the default and light-weight Javascript framework for Rails.
You just copy-and-paste all these codes into the stimulus.js controller and call the functions with id of two HTML element as arguments, a SVG arrow will be drawn between them. How easy it is !! Be careful that it uses absolute positions, which may causes some problems on flexible layout.
