Simile Timeline - Floating Dates

Question

We are trying to integrate the Simile Timeline (http://www.simile-widgets.org/timeline/) into a SalesForce.com powered page.

The business is, apartment bookings. The calendar will display the bookings against the related apartments. The apartments appear on a separate div on the left hand side and is fixed.

We may run into really long calendar (height > 1000px). What happens is, the date labels appear at the bottom of the page and are not visible when the user is at the top of the page.

(Note that, there are no bookings show in this grab nor is the height too high)

When the DAY band is too long to fit into the screen, the date markers are hidden. Would it be possible to float the dates (just in one band) so that even when the user scrolls (up or down), the dates are in still view?

Answer 1

I'm not sure I understand your question correctly, but when you create a band in timeline, Timeline.createBandInfo() takes a parameters object, one of these parameters is 'align'. If you set this to "Top", then your date markers will appear at the top of the band. For example:

Timeline.createBandInfo({
    eventSource: eventSourceNarrative,
    date: "May 10 1199 00:00:00 GMT",
    width: "40%",  
    align: "Top",
    intervalUnit: Timeline.DateTime.MONTH,
    intervalPixels: 52,
    theme: johnTheme
}),

But note the proviso at http://www.simile-widgets.org/wiki/Timeline_ThemeClass#track

---

Alternatively, this property can be set in your 'theme' object instead using hAlign. see the docs at:

http://www.simile-widgets.org/wiki/Timeline_ThemeClass

---

See also the code at: http://code.google.com/p/simile-widgets/source/browse/timeline/trunk/src/webapp/api/scripts/ether-painters.js

The function that actually applies the 'align' parameter is:

Timeline.EtherIntervalMarkerLayout