Ios swift – How can I make SwiftUI events split horizontally when there's overlap?

So I wanted to expand on valosip's answeras it helped me get to my end result. But I wanted to flesh it out for future users who might want to see some more in-depth workings.

I have written about it in more detail here in case anyone wants to read the creation of below

First I was working with this model:

struct Event: Identifiable {
  let id: UUID = UUID()
  let title: String
  let startDateTime: Date
  let endDateTime: Date
}

And created these mockEvents for testing:

extension Event {
  static let mockEvents: [Event] = [
    Event(
      title: "Induction",
      startDateTime: .from("2023-06-20 7:05"),
      endDateTime: .from("2023-06-20 8:10")
    ),
    Event(
      title: "Product meeting",
      startDateTime: .from("2023-06-20 8:10"),
      endDateTime: .from("2023-06-20 8:30")
    ),
    Event(
      title: "Potential Call",
      startDateTime: .from("2023-06-20 9:15"),
      endDateTime: .from("2023-06-20 15:45")
    ),
    Event(
      title: "Offsite scope",
      startDateTime: .from("2023-06-20 12:00"),
      endDateTime: .from("2023-06-20 13:30")
    ),
    Event(
      title: "Presentation",
      startDateTime: .from("2023-06-20 17:00"),
      endDateTime: .from("2023-06-20 18:30")
    )
  ]
}

I also used this Date helper to format string dates into proper dates:

extension Date {
  static func from(_ dateString: String, format: String = "yyyy-MM-dd HH:mm") -> Date {
    let dateFormatter = DateFormatter()
    dateFormatter.dateFormat = format
    return dateFormatter.date(from: dateString)!
  }
}

The main view - which you can put into your other SwiftUI views looked like this:

/// A view representing the main content of the app.
struct MainView: View {
  var body: some View {

    /// Display the calendar view with the specified parameters.
    CalendarView(
      startHour: 0,
      endHour: 23,
      calendarHeight: 600,
      events: Event.mockEvents,
      use24HourFormat: false
    )
  }
}

The CalendarView looked like the below. I added as much comments as I could to help explain what was going on:

/// A view representing the calendar display.
struct CalendarView: View {
  var startHour: Int
  var endHour: Int
  let calendarHeight: CGFloat
  let events: [Event]
  var use24HourFormat: Bool

  private let hourLabel: CGSize = .init(width: 38, height: 38)
  private let offsetPadding: Double = 10

  /// The height of each hour in the calendar.
  private var hourHeight: CGFloat {
    calendarHeight / CGFloat(endHour - startHour + 1)
  }

  /// Groups the overlapping events together.
  private var overlappingEventGroups: [[Event]] {
    EventProcessor.processEvents(events)
  }

  var body: some View {
    ScrollView(.vertical, showsIndicators: false) {
      ZStack(alignment: .topLeading) {
        timeHorizontalLines

        ForEach(overlappingEventGroups, id: .self) { overlappingEvents in
          HStack(alignment: .top, spacing: 0) {
            ForEach(overlappingEvents) { event in
              eventCell(for: event)
            }
          }
        }
        .offset(x: hourLabel.width + offsetPadding)
        .padding(.trailing, hourLabel.width + offsetPadding)
      }
    }
    .frame(minHeight: calendarHeight, alignment: .bottom)
  }

  /// A view displaying the horizontal time lines in the calendar.
  private var timeHorizontalLines: some View {
    VStack(spacing: 0) {
      ForEach(startHour ... endHour, id: .self) { hour in
        HStack(spacing: 10) {
          /// Display the formatted hour label.
          Text(formattedHour(hour))
            .font(.caption2)
            .monospacedDigit()
            .frame(width: hourLabel.width, height: hourLabel.height, alignment: .trailing)
          Rectangle()
            .fill(.gray.opacity(0.6))
            .frame(height: 1)
        }
        .foregroundColor(.gray)
        .frame(height: hourHeight, alignment: .top)
      }
    }
  }

  /// Formats the hour string based on the 24-hour format setting.
  ///
  /// - Parameter hour: The hour value to format.
  /// - Returns: The formatted hour string.
  private func formattedHour(_ hour: Int) -> String {
    if use24HourFormat {
      return String(format: "%02d:00", hour)
    } else {
      switch hour {
      case 0, 12:
        return "12 (hour == 0 ? "am" : "pm")"
      case 13...23:
        return "(hour - 12) pm"
      default:
        return "(hour) am"
      }
    }
  }

  /// Creates a view representing an event cell in the calendar.
  ///
  /// - Parameter event: The event to display.
  /// - Returns: A view representing the event cell.
  private func eventCell(for event: Event) -> some View {
    let offsetPadding: CGFloat = 10

    var duration: Double {
      event.endDateTime.timeIntervalSince(event.startDateTime)
    }

    var height: Double {
      let timeHeight = (duration / 60 / 60) * Double(hourHeight)
      return timeHeight < 16 ? 16 : timeHeight
    }

    let calendar = Calendar.current

    var hour: Int {
      calendar.component(.hour, from: event.startDateTime)
    }

    var minute: Int {
      calendar.component(.minute, from: event.startDateTime)
    }

    var offset: Double {
      (Double(hour - startHour) * Double(hourHeight)) +
        (Double(minute) / 60 * Double(hourHeight)) +
        offsetPadding
    }

    return Text(event.title)
      .bold()
      .padding()
      .frame(maxWidth: .infinity, alignment: .leading)
      .frame(height: CGFloat(height))
      .minimumScaleFactor(0.6)
      .multilineTextAlignment(.leading)
      .background(
        Rectangle()
          .fill(Color.mint.opacity(0.6))
          .padding(1)
      )
      .offset(y: CGFloat(offset))
  }
}

But the most important part of the whole code, which solved the collisions was this EventProcessor function:

/// A helper struct for processing events and grouping overlapping events.
fileprivate struct EventProcessor {

  /// Groups the given events based on overlapping time intervals.
  ///
  /// - Parameter events: The events to process.
  /// - Returns: An array of event groups where each group contains overlapping events.
  static func processEvents(_ events: [Event]) -> [[Event]] {
    let sortedEvents = events.sorted {
      $0.startDateTime < $1.startDateTime
    }
    var processedEvents: [[Event]] = []
    var currentEvents: [Event] = []
    for event in sortedEvents {
      if let latestEndTimeInCurrentEvents = currentEvents.map({ $0.endDateTime }).max(),
         event.startDateTime < latestEndTimeInCurrentEvents {
        currentEvents.append(event)
      } else {
        if !currentEvents.isEmpty {
          processedEvents.append(currentEvents)
        }
        currentEvents = [event]
      }
    }
    if !currentEvents.isEmpty {
      processedEvents.append(currentEvents)
    }
    return processedEvents
  }
}

In the end, I had something that looked like this:

Again, if there is anyone that wants to see or read more of how I got to this place with the help of the StackOverflow answer read it all here