Vertical Day-View Hour Gantt Chart/Timeline (Similar to Outlook) - jQuery Library

Question

I need to create a vertical "Timeline" chart with increments of 1 hour, 30 min, 15 min, or 5 min. The functionality is similar to Outlook or a 'Day-View' Scheduler, where appointments are placed as boxes on a timeline.

I considered the following but there were problems as below:

• Google Visualization, Vis.JS - horizontal timeline only, vertical not supported
• jQuery FullCalendar.io, DayPilot - some features only available in a Premium version that costs $500. FullCalendar: DayTimeline View is premium, DayPilot: non-1hr increments are premium
• Primitive free tools such as jQuery Skeduler that don't support any custom intervals or true Date objects, I would have to redraw the ruler myself, or implement overlaps myself

Any suggestions on this issue? Can I even use a spreadsheet for this?

Desired functionality:

8:00 ---------
8:30 [.......]
9:00 ---------
9:30 [...][..]

Answer 1

I've settled on this free plugin which is easily extendable and easy to use:

CodyHouse Schedule Template

https://codyhouse.co/gem/schedule-template/

Adding zooming (custom intervals), coloring, etc. was really easy. There is an HTML-based timeline consisting of <LI> tags and the interval is actually automatically calculated based on your HTML labels, so you don't need to re-calculate anything yourself.

To plot new events on the fly (the main functionality) I added this code in their main.JS, which replicates their normal initialization of pre-existent HTML. This Refresh is called after I manually modify the DOM by adding a new LI for a new event.

function refreshScheduler() {
    schedules = $('.cd-schedule');
    objSchedulesPlan = [],
        windowResize = false;

    if( schedules.length > 0 ) {
        schedules.each(function(){
            //create SchedulePlan objects
            objSchedulesPlan.push(new SchedulePlan($(this)));
        });
    }           
}