Can your products allow us to re-create this Scheduler/Timeline view?

Yes, this should be no problem.

I’m including a couple of screenshots and links to features that will help you implement what you need:

1. The timeline can be customized as needed. If the built-in units (day, week, month, etc.) are not enough, you can build a custom timeline programmatically (with 6-hour blocks).

2. To switch the date (and possibly the time scale), you can use the update() method as explained in the docs: Navigation using next/previous buttons.

3. You can insert custom vertical lines at specified dates using separators.

4. You can customize the event properties (including the color) using the onBeforeEventRender event handler. You can change the bar color (like in this example) or the full background. This can be done based on your rules, i.e. you can set different color per row and make past events gray.

5. The row height is increased automatically when there are multiple overlapping events.

6. You can group concurrent events automatically and expand them as needed. This demo shows how to expand individual groups or the whole row.

7. The event bubble tooltip lets you show event details (you can use HTML, including links and images):

If you are missing something, just let me know!

Thank you for your detailed response. It looks promising!

Here is our current java script for the tooltip:

scheduler.templates.tooltip_text = function (start, end, event) {
  // If the NTF value is 'undefined' then default to '9' (no nulls allowed!)
  // which will default to an empty string. See the SQL view for details as to why '9'
  // Also, there is no grey/gray ball in Unicode6, so show a "white" ball which does look greyish
  // This website has all the codes needed and more:
  // https://www.unicode-search.net/unicode-namesearch.pl?term=CIRCLE

  return "<strong style=\"font-size:18px;\">" +
    "<a href=\"https://www.marinetraffic.com/en/ais/details/ships/imo:" + event.imo +
    "/vessel:" + event.text + "\" target=\"_blank\">" + event.text + "</a></strong>" +
    "<img class=\"shipflag\" src=\"https:\/\/www.marinetraffic.com\/img\/flags\/png40\/" + event.flag + ".png\" alt=\"" + event.country +
    "\" style=\"width: 35px; height: 30px;\">" +
    "<br/><strong>IMO:</strong> " + event.imo + " <strong>LOA:</strong> " + event.loa + " <strong>Beam:</strong> " + event.beam +
    "<br/><span style=\"font-size:14px;\">" + event.pilotDesc + " " +
    { 0: '&#x26AA;', 1: '&#x1f7e1;', 2: '&#x1f534;', 3: '&#x1f7e2', 8: '', 9: '', '-1': '' }[event.pilotNTF.toString() || '9'] +
    "</span>" +
    "<ul><li><strong>Visit ID: </strong>" + event.visitid +
    "<li><strong>Cargo: </strong>" + event.cargo + "</li>" +
    "<li><strong>Berth: </strong>" + event.sectionID + "</li>" +
    "<li><strong>Arrival: </strong>" + scheduler.templates.tooltip_date_format(start) + "</li>" +
    "<li><strong>Departure: </strong>" + scheduler.templates.tooltip_date_format(end) + "</li>" +
    "<li><strong>Duration: </strong>" + event.duration + " (hrs)</li>" +
    "<li><strong>Agent: </strong>" + event.details + "</li>" +
    "<li><strong>Stevedore: </strong>" + event.stevedore + "</li>" +
    "<li><strong>Created: </strong>" + event.createddate.substring(8, 10) + "/" + event.createddate.substring(5, 7) + "/" + event.createddate.substring(0, 4) + " " + event.createddate.substring(11, 16) + "</li>" +
    "<li><strong>Modified: </strong>" + event.lastmodified.substring(8, 10) + "/" + event.lastmodified.substring(5, 7) + "/" + event.lastmodified.substring(0, 4) + " " + event.lastmodified.substring(11, 16) + "</li></ul>" +
    "<p align=\"center\"><img alt=" + event.text +
    " align=\"center\" height=\"200\" src=\"https://photos.marinetraffic.com/ais/showphoto.aspx?imo=" + event.imo +
    "&size=thumb200&stamp=true\" onerror=\"this.onerror=null;this.src='codebase/noimg.webp';\" style=\"background-color: #F6F5FA; border-radius: 8px;\"></p>"
};

Can your system handle this please?

Thanks

Yes, you can provide custom HTML for the bubble text.

This is an example Scheduler config:

{
  // ...
  bubble: new DayPilot.Bubble({
    onLoad: args => {
      const event = args.source;
      args.html = `...`;  // your HTML here
    }
  }),
}

This way you can generate the bubble content dynamically when it gets displayed.