Skip to content
Documentation
Components
Composite
Calendar

Calendar

The calendar shows events on a timeline, one lane per resource, e.g. per person or room. The view port defines the visible range, calendar.Year and calendar.Day create the common ones. Use the style StartTimeSequence for an agenda-like list instead of the timeline.

Calendar

func view(wnd core.Window) core.View {
    day := func(month time.Month, d int) calendar.Instant {
        return calendar.Instant{At: time.Date(2026, month, d, 0, 0, 0, 0, time.UTC)}
    }

    vacation := calendar.Category{Label: "Vacation", Color: "#2BCA73"}
    training := calendar.Category{Label: "Training", Color: "#1B8C98"}

    // Year uses German column labels, so set English ones
    year := calendar.Year(2026)
    year.Columns = nil
    for m := time.January; m <= time.December; m++ {
        year.Columns = append(year.Columns, calendar.Column{Label: m.String()[:3]})
    }

    // the timeline styles ignore Frame, so the parent defines the width
    return VStack(calendar.Calendar(
        calendar.Event{From: day(2, 2), To: day(3, 6), Label: "Ski trip", Lane: calendar.Lane{Label: "Anna"}, Categories: []calendar.Category{vacation}},
        calendar.Event{From: day(5, 4), To: day(6, 12), Label: "Go workshop", Lane: calendar.Lane{Label: "Anna"}, Categories: []calendar.Category{training}},
        calendar.Event{From: day(7, 6), To: day(8, 28), Label: "Summer break", Lane: calendar.Lane{Label: "Ben"}, Categories: []calendar.Category{vacation}},
        calendar.Event{From: day(9, 21), To: day(10, 30), Label: "UX bootcamp", Lane: calendar.Lane{Label: "Ben"}, Categories: []calendar.Category{training}},
        calendar.Event{From: day(11, 23), To: day(12, 31), Label: "Holidays", Lane: calendar.Lane{Label: "Clara"}, Categories: []calendar.Category{vacation}},
    ).ViewPort(year).FullWidth()).Frame(Frame{Width: L1200})
}

calendar.Year uses German month names, so the example sets its own columns. The timeline styles ignore Frame, therefore the parent stack defines the width.

Constructors 

func Calendar(events ...Event) TCalendar

Calendar creates a new TCalendar initialized with the current year, a yearly timeline style, and default colors.

Methods

MethodDescription
Append(events ...Event) TCalendarAppend adds one or more events to the existing calendar events.
Colors(colors Colors) TCalendarColors customizes the color scheme used for rendering the calendar and its events.
Frame(frame ui.Frame) TCalendarFrame defines the layout frame (size, width, height) for the calendar component.
FullWidth() TCalendarFullWidth expands the component to the full available width.
MaxCategories(n int) TCalendarMaxCategories limits how many category color bars are rendered per event.
Style(style Style) TCalendarStyle sets the display style (e.g., timeline view) for the calendar.
ViewPort(vp ViewPort) TCalendarViewPort sets the visible time range (e.g., year, month) of the calendar.

Related