Calendar View

CalendarView is a library to display events in day/month modes

Usage

import CalendarView

CalendarView()

Available customizations - modifiers

fullscreenDate - You can pass a binding to read/write the currently displayed date
displayMode - You can pass a binding to read/write the current display mode: day, twoDays, threeDays, month
hoursToFit - How many hours will fit vertically in day display modes, default is 12
hourLabelFormat - Hour label format in day display modes, default is "h a"
firstDayOfWeek - What day to start a week from in all views, default is taken from current locale
headerBackground - Background for the header: .none, .color(Color, cornerRadius), or .view(AnyView). Use the headerBackground(viewBuilder:) overload to pass a SwiftUI view directly.
isDayInWeekSwitcherPagingEnabled - Swipe just one week at a time or several at once in the week switcher
eventDetailsClosure - Closure called when the user taps an event, receives the tapped entity
idForUpdate - Pass a new UUID value to trigger a calendar data refresh
customFont - Use a custom font family by name. All font sizes and colors defined in the library are preserved. Weight variants are determined by the font itself.
useDynamicType - When true, all font sizes scale with the system-wide Dynamic Type accessibility setting (Settings → Accessibility → Display & Text Size → Larger Text)

UI Customization - builders

dayEventBuilder - In day display modes, a view for one event. Must have a greedy size to stretch according to available space. Height depends on event duration, width on how many events overlap. ViewThatFits is a good approach here. Also consider applying .clipped() so short events don't overflow into neighboring slots.
monthDayBuilder - In .month mode, a view for each day cell. MonthDayBuilderParams provides date, events, and viewHeight.
weekSwitcherDayBuilder - A view for one day in the default header's week picker. WeekSwitcherDayBuilderParams provides day, monthDisplayMode, and fullscreenDate. When using a fully custom headerBuilder, embed the week picker via params.defaultWeekSwitcher(weekSwitcherDayBuilder:) instead — see below.
headerBuilder - Replaces the entire header area. HeaderBuilderParams provides:

• fullscreenDate, anchorDate, displayMode — bindings to read/write calendar state
• tapFilterCalendarsClosure, tapAddEventClosure, tapSelectDisplayModeClosure — actions to trigger built-in sheets
• defaultWeekSwitcher() — renders the built-in week picker with default day cells
• defaultWeekSwitcher(weekSwitcherDayBuilder:) — renders the built-in week picker with a custom day cell view

Events

If you want to implement your own event manager for complete event control: You can create your own CalendarProvider and pass it a CalendarView(providers: [...Your provider...]). In a custom provider, you need to override the getEvents method, in which you will independently pass the necessary events. You also need to override the getCalendars method and always return at least one element.

override func getCalendars() async throws -> [ProviderCalendar] {
    [ ProviderCalendar() ]
}

Hints & Tips

If, when you first load the application, events are displayed only after the current day changes, set the value for fullscreenDate:

@State private var fullscreenDate = Date().startOfDay

CalendarView(providers: CalendarDefaults.defaultProviders) { entity in
    ZStack {
        Rectangle().foregroundStyle(.red.opacity(0.1))
        Text(entity.title)
    }
} monthDayBuilder: { params in
    Text(params.date.formatted(date: .abbreviated, time: .omitted))
} headerBuilder: { params in
    VStack {
        HStack {
            Button("Calendars") {
                params.tapFilterCalendarsClosure()
            }
            Button("Add event") {
                params.tapAddEventClosure()
            }
            Button(params.displayMode.wrappedValue.title) {
                params.displayMode.wrappedValue = params.displayMode.wrappedValue == .month ? .day : .month
            }
        }
        params.defaultWeekSwitcher { weekParams in
            Text(weekParams.day.formatted("d.MM"))
                .foregroundStyle(weekParams.day == Date().startOfDay ? .blue : .black)
        }
    }
}

Examples

To try the CalendarView examples:

• Clone the repo https://github.com/exyte/CalendarView.git
• Open CalendarViewExample.xcodeproj in the Xcode
• Try it!

Installation

Swift Package Manager

dependencies: [
    .package(url: "https://github.com/exyte/CalendarView.git")
]

Requirements

• iOS 17+
• Xcode 16+

Our other open source SwiftUI libraries

PopupView - Toasts and popups library
AnchoredPopup - Anchored Popup grows "out" of a trigger view (similar to Hero animation)
Grid - The most powerful Grid container
ScalingHeaderScrollView - A scroll view with a sticky header which shrinks as you scroll
AnimatedTabBar - A tabbar with a number of preset animations
MediaPicker - Customizable media picker
Chat - Chat UI framework with fully customizable message cells, input view, and a built-in media picker
OpenAI Wrapper lib for OpenAI REST API
AnimatedGradient - Animated linear gradient
ConcentricOnboarding - Animated onboarding flow
FloatingButton - Floating button menu
ActivityIndicatorView - A number of animated loading indicators
ProgressIndicatorView - A number of animated progress indicators
FlagAndCountryCode - Phone codes and flags for every country
SVGView - SVG parser
LiquidSwipe - Liquid navigation animation