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

Set a date rangePascalC++

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;

void __fastcall TFormMain::ConfigureDateRange()
{
  // 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;
}

3. Add indicators and sections

Set up a timelinePascalC++

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;

void __fastcall TFormMain::SetupTimeline()
{
  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 = TTMSFNCTimelineOrientation::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();
}

TTMSFNCTimeline showing indicators and sections on a horizontal date timeline

4. Scroll to a date

Scroll to a valuePascalC++

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;

void __fastcall TFormMain::ScrollExamples()
{
  // 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 (!TMSFNCTimeline1->IsValueVisible(EncodeDate(2025, 6, 15)))
    TMSFNCTimeline1->CenterValue(EncodeDate(2025, 6, 15));
}

Next steps