Your next career begins with 
Save 50% off your seat in our next iOS Bootcamp. Limited time only. Sessions start April 3.
watchOS: Complications
For more information on watchOS development, check out our book watchOS With SwiftUI by Tutorials
For more information about complications, check out these resources:
- Apple’s documentation on Building Complications with SwiftUI.
- Apple’s WWDC2020 Build complication in SwiftUI video.
Heads up... You've reached locked video content where the transcript will be shown as text.
After all of that work, it’s time to wrap this project up and check out your SwiftUI view in a complication.
Event to timeline entry
All the complication methods need to be able to create a CLKComplicationTimelineEntry from an EKEvent.
import EventKit
private func timelineEntry(for ekEvent: EKEvent?) -> CLKComplicationTimelineEntry {
}
let event: Event?
if let ekEvent = ekEvent {
event = Event(ekEvent: ekEvent)
} else {
event = nil
}
let template = CLKComplicationTemplateGraphicRectangularFullView(
EventComplicationView(event: event)
)
return .init(
date: event?.startDate ?? .now,
complicationTemplate: template
)
}
Localizable sample
As we learned earlier in the course, it’s important to have a sample complication for users to see when they’re choosing complications.
func localizableSampleTemplate(
for complication: CLKComplication
) async -> CLKComplicationTemplate? {
}
let start = Calendar.current.date(
bySettingHour: 10, minute: 0, second: 0, of: .now
)!
let end = Calendar.current.date(
byAdding: .hour, value: 1, to: start
)!
return CLKComplicationTemplateGraphicRectangularFullView(
EventView(event: .init(
color: .blue,
startDate: start,
endDate: end,
title: "Gnomes rule!",
location: "Everywhere"
))
)
The current appointment
Just like when using non-SwiftUI templates, you have to provide the current timeline entry if one exists.
return timelineEntry(for: EventStore.shared.nextEvent)
Future appointments
It is likely you have more than one event on your calendar every day.
func timelineEntries(
for complication: CLKComplication,
after date: Date,
limit: Int
) async -> [CLKComplicationTimelineEntry]? {
}
guard let events = EventStore.shared.eventsForToday() else {
return [timelineEntry(for: nil)]
}
let wanted = events
.filter {
date.compare($0.startDate) == .orderedAscending
}
.prefix(limit)
.map { timelineEntry(for: $0) }
return wanted.count > 0 ? wanted : [timelineEntry(for: nil)]
}
Tinting
In EventView.swift, just after the .foregroundColor(event.color) line of RoundedRectangle, add the complication foreground modifier
.complicationForeground()
.previewContext(faceColor: .green)