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
uses
System.SysUtils, FMX.TMSFNCTimeline;
procedure TFormMain.ConfigureDateRange;
begin
// Show January 2025 with one division per day, 60 px wide.
TMSFNCTimeline1.Range.MinimumDate := EncodeDate(2025, 1, 1);
TMSFNCTimeline1.Range.MaximumDate := EncodeDate(2025, 1, 31);
TMSFNCTimeline1.Range.RangeType := tlrDay;
TMSFNCTimeline1.Range.DivisionSpace := 60;
end;
3. Add indicators and sections
uses
System.SysUtils, 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
uses
System.SysUtils, FMX.TMSFNCTimeline;
procedure TFormMain.ScrollExamples;
begin
// Center the view on a date.
TMSFNCTimeline1.CenterValue(Now);
// Scroll so a date appears at the start / end of the view.
TMSFNCTimeline1.ValueVisibleStart(EncodeDate(2025, 6, 1));
TMSFNCTimeline1.ValueVisibleEnd(EncodeDate(2025, 6, 30));
// Only scroll when the date is not already visible.
if not TMSFNCTimeline1.IsValueVisible(EncodeDate(2025, 6, 15)) then
TMSFNCTimeline1.CenterValue(EncodeDate(2025, 6, 15));
end;