Streaming live at 10am (PST)

Displaying Date Range as a Gantt Chart?

I have seen a few tutorials on displaying collection list as bar graphs. Does anyone know or can think of a way to display date ranges as a line on say a 24 month calendar. So if I have an item that will take 4 months to complete and I have 24 months I can plug in the dates and it shows the date range on the chart. This would basically be a gantt chart.

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Does this project help? (all credit to @vincent)

That is very close to what I need. I will look through the setup and see how it is constructed. Thanks for the fast response.

1 Like

It will maybe inspire you but it’s not covering date ranges… and that’s on my list for a new project. Don’t know how I will tackle this.

Anyway, CSS Calc should be involved. You will also have to have seperate fields for day, months and year because in custom code you can only retrieve a full date format, and there’s no finer options.

JS could do it better than I did but as I don’t code js… If your date range thing is a serious project, you should consider js to retrieve dates components and to affect a different class to the Embed code component inside of col items. You’ll surely understand why when you start to investigate.

1 Like


This is a very impressive set up. Can you tell me how you came up with calculations in the custom code sections specifically the Event container. How did you get the number 78?