Configuration

Columns

The sheet (left panel) displays resource information in columns. By default the scheduler shows a name column and an icons column.

// Show/hide columns
const typeCol = scheduler.sheet.getColumnByCode('type');
typeCol.isVisible = true;

// Save and restore column layout
const state = scheduler.saveColumns();
localStorage.setItem('columns', JSON.stringify(state));

// Later...
const saved = JSON.parse(localStorage.getItem('columns'));
scheduler.loadColumns(saved);

Custom Columns

Add columns that display custom properties on resources. Use the same column API as the Gantt Chart.

import { TableColumn, DefaultTableCellRenderer, TextCellEditor } from '@timelinekit/core';

// Simple string column (editable)
const column = new TableColumn(
  'department',                                              // code
  'Department',                                              // display name
  (resource) => resource.getPropertyValue('department') ?? '', // valueFormatter
  new DefaultTableCellRenderer(),                            // renderer
  new TextCellEditor(                                        // editor
    (resource) => resource.getPropertyValue('department'),
    (resource, value) => resource.setPropertyValue('department', value)
  ),
  () => true,                                                // isEditable
  120,                                                       // width
  60                                                         // minWidth
);

scheduler.sheet.addColumn(column);

Time Scale & Zoom

The scheduler supports multiple zoom levels from hours to months. Zoom in/out or fit the view to show all events.

// Auto zoom to fit is enabled by default — the scheduler automatically
// adjusts the zoom level when projectTimeline or data changes via load().
// Disable if you want to control the zoom level manually:
scheduler.autoZoomToFit = false;

// Zoom in/out
scheduler.zoomIn();
scheduler.zoomOut();

// Fit all events in view
scheduler.zoomToFit();

// Fit specific events
const events = scheduler.data.getEventsForResource('r1');
scheduler.zoomToFit(events);

// Set project timeline bounds
scheduler.projectTimeline = new DateRange(new Date('2027-01-01'), new Date('2027-06-30'));

Navigation

Scroll programmatically to specific resources, events, or dates.

// Scroll to a specific date
scheduler.scrollToDate(new Date('2027-03-01'));

// Scroll to show a resource row (vertical scroll)
const resource = scheduler.data.getResourceById('r5');
scheduler.scrollToResource(resource);

// Scroll to an event (both horizontal + vertical)
const event = scheduler.data.getEventById('e10');
scheduler.scrollToEvent(event);

// Jump to project start
scheduler.goToProjectStart();

Working Calendar

Configure working days and hours. Non-working time is visually distinguished on the timeline.

import { WorkingCalendar, WorkingShift, TimeOfDay } from '@timelinekit/core';

const calendar = new WorkingCalendar();
calendar.workingDays = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday'];
calendar.shifts = [
  new WorkingShift(new TimeOfDay(9, 0), new TimeOfDay(12, 0)),
  new WorkingShift(new TimeOfDay(13, 0), new TimeOfDay(17, 0)),
];

scheduler.workingCalendar = calendar;

Event Labels

Display text labels on or next to event bars. Configure position and content via the theme. By default, labels are hidden ('none').

const theme = scheduler.settings.theme;

// Show event name inside bars (or to the right if too narrow)
theme.chart.content.taskLabelPosition = 'insideOrRight';
theme.chart.content.taskLabelContent = 'name';

// Re-apply the theme to trigger a re-render
scheduler.settings.theme = theme;

For full label styling options (color, font, padding), see the Theming & Styles guide.

Markers & Today Line

Markers are vertical lines on the timeline that highlight important dates. The today line is a built-in marker.

// Today line
scheduler.showTodayLine = true;

// Add custom markers
scheduler.addMarker({
  date: new Date('2027-02-01'),
  label: 'Deadline',
  color: '#e74c3c',
  lineStyle: 'dashed',
  lineWidth: 1,
});

// Remove / clear
scheduler.removeMarker(marker);
scheduler.clearMarkers();

// Set all markers at once
scheduler.markers = [
  { date: new Date('2027-01-15'), label: 'Sprint Review', color: '#e74c3c', lineStyle: 'dashed' },
  { date: new Date('2027-01-30'), label: 'Release', color: '#27ae60', lineStyle: 'solid' },
];

Custom Event Rendering

Override the default event bar rendering with a custom function. Return true to indicate you handled the rendering, or false to fall back to default.

scheduler.eventRendering = ({ event, resource, rect, ctx, isSelected, color }) => {
  // Draw a rounded rectangle with custom styling
  const radius = 4;
  ctx.beginPath();
  ctx.roundRect(rect.x, rect.y, rect.width, rect.height, radius);
  ctx.fillStyle = isSelected ? '#3b82f6' : '#60a5fa';
  ctx.fill();

  // Draw event name
  ctx.fillStyle = '#ffffff';
  ctx.font = '11px sans-serif';
  ctx.textBaseline = 'middle';
  ctx.fillText(event.name, rect.x + 6, rect.y + rect.height / 2);

  return true; // handled
};

// Reset to default rendering
scheduler.eventRendering = null;

SchedulerEventRenderArgs

Custom Tooltips

Customize the tooltip content shown when hovering over an event. Return null to hide the tooltip.

scheduler.eventTooltip = ({ event, resource }) => {
  return {
    title: event.name,
    lines: [
      { name: 'Resource', value: resource.name },
      { name: 'Start', value: event.startTime.toLocaleString() },
      { name: 'End', value: event.endTime.toLocaleString() },
      { name: 'Duration', value: event.durationHours.toFixed(1) + 'h' },
    ],
  };
};

// Disable tooltips
scheduler.eventTooltip = () => null;

// Reset to default
scheduler.eventTooltip = null;