Getting Started with TMS FNC Timeline
TTMSFNCTimeline visualises time-based events on a horizontal or vertical ruler. Point events are represented as indicators; date spans are represented as sections. The component supports both date/time ranges and arbitrary numeric ranges.
Prerequisites
- Delphi with TMS FNC UI Pack installed.
- A VCL, FMX, or WEB application.
Steps
1. Drop the component
Drop a TTMSFNCTimeline from the TMS FNC UI Pack palette page onto a form.
2. Set the date range
TMSFNCTimeline1.Range.MinimumDate := EncodeDate(2025, 1, 1);
TMSFNCTimeline1.Range.MaximumDate := EncodeDate(2025, 1, 31);
TMSFNCTimeline1.Range.RangeType := tlrDay;
TMSFNCTimeline1.Range.DivisionSpace := 60; // pixels per day
3. Add indicators and sections
uses
FMX.TMSFNCTimeline;
procedure TFormMain.SetupTimeline;
begin
TMSFNCTimeline1.BeginUpdate;
// Set a date range — one week
TMSFNCTimeline1.Range.MinimumDate := EncodeDate(2025, 1, 1);
TMSFNCTimeline1.Range.MaximumDate := EncodeDate(2025, 1, 7);
TMSFNCTimeline1.Range.RangeType := tlrDay;
TMSFNCTimeline1.Range.DivisionSpace := 80; // pixels per day
// Horizontal orientation, timeline bar in the middle
TMSFNCTimeline1.Layout.Orientation := tloHorizontal;
TMSFNCTimeline1.Layout.Position := tlpMiddle;
// Point events (indicators)
TMSFNCTimeline1.AddIndicator(EncodeDate(2025, 1, 2), 'Meeting');
TMSFNCTimeline1.AddIndicator(EncodeDate(2025, 1, 4), 'Deadline');
// Span event (section)
TMSFNCTimeline1.AddSection(
EncodeDate(2025, 1, 2), EncodeDate(2025, 1, 5), 'Sprint 1');
TMSFNCTimeline1.EndUpdate;
end;
4. Scroll to a date
TMSFNCTimeline1.CenterValue(Now);