shaduler

Nothing about shaduler is "resource-flavored" — columns are just labeled lanes. Use day names for a personal/team weekly schedule.

Mon

Tue

Wed

Thu

Fri

Sat

Sun

08:00

09:00

10:00

11:00

12:00

13:00

14:00

15:00

16:00

17:00

18:00

Standup

Sprint planning

Customer call

Code review

Workshop

1:1

Design crit

Demo day

Long run

Reading

const START_HOUR = 8
const END_HOUR = 19
const HOUR_HEIGHT_PX = 60
const TIME_COLUMN_WIDTH_PX = 64  // narrower left gutter when columns are tight

const weekColumns = [
  { id: 'mon', label: 'Mon' },
  { id: 'tue', label: 'Tue' },
  { id: 'wed', label: 'Wed' },
  { id: 'thu', label: 'Thu' },
  { id: 'fri', label: 'Fri' },
  { id: 'sat', label: 'Sat' },
  { id: 'sun', label: 'Sun' },
]

const weekTasks = [
  { id: 'w1', column: 'mon', name: 'Standup', startTime: '09:00', endTime: '09:30' },
  { id: 'w2', column: 'mon', name: 'Sprint planning', startTime: '10:00', endTime: '12:00' },
  { id: 'w3', column: 'tue', name: 'Customer call', startTime: '11:00', endTime: '12:00' },
  // …
]

const calc = calculateShadulerData(
  weekColumns,
  weekTasks,
  START_HOUR,
  END_HOUR,
  HOUR_HEIGHT_PX,
  { timeColumnWidth: TIME_COLUMN_WIDTH_PX },
)

Pass the same timeColumnWidth both to calculateShadulerData and to ShadulerTasksOverlay so they stay aligned.

For multi-day events that span several columns at once, layer ShadulerAllDayStrip on top — see All-day events.

Week view