jQuery Timeline of mobiscroll.com

Hi Guys, we are working on a customer service application in which we would like to show any and all events on a timeline showing a customer lifecycle. We found this sample mockup:

Event timeline

And also found a library which seems to come close to displaying these events on such a timeline: https://demo.mobiscroll.com/jquery/timeline/custom-range-view#

We also would love to show our projects and workload on a yearly calendar like this:

12 months overview

Any suggestions how to get this kind of magic in Retool ?

Thanks, Teele

I believe you can do this with a custom compomponent, utilising a library such as this gantt-task-reack.

How do install this library?

Hey @mullinsjo!

I'm not sure that gantt-task-react has a UMD build, which is required for Retool (docs). Instead, you might try using something like frappe-gantt which has a script on CDNJS (link). Here's an example script you can try putting into a custom component:

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/frappe-gantt/0.6.1/frappe-gantt.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/frappe-gantt/0.6.1/frappe-gantt.css">
<svg id="gantt"></svg>

const tasks = [
  id: 'website',
  name: 'Redesign website',
  start: '2016-12-10',
  end: '2016-12-31',
  progress: 20,
  id: 'content',
  name: 'Write new content',
  start: '2016-12-12',
  end: '2016-12-20',
  progress: 20,
  dependencies: 'website'
  id: 'styles',
  name: 'Apply new styles',
  start: '2016-12-22',
  end: '2016-12-29',
  progress: 20,
  dependencies: 'content'
  id: 'review',
  name: 'Review',
  start: '2017-1-1',
  end: '2017-1-3',
  progress: 20,
  dependencies: 'styles'
const gantt = new Gantt("#gantt", tasks, {
    header_height: 50,
    column_width: 30,
    step: 24,
    view_modes: ['Quarter Day', 'Half Day', 'Day', 'Week', 'Month'],
    bar_height: 20,
    bar_corner_radius: 3,
    arrow_curve: 5,
    padding: 18,
    view_mode: 'Day',
    date_format: 'YYYY-MM-DD',
    custom_popup_html: null

Which should give you something like this:

I've attached an example app where you can see it working.

Gantt charts are also something on the dev team's radar and we can let you know here when they're included :slightly_smiling_face:

frappe_gantt (2).json (22.6 KB)