iOS 18 Styling - Event

CalendarKitDemo/CalendarApp/CustomCalendarExampleController.swift

@@ -87,14 +87,53 @@ final class CustomCalendarExampleController: DayViewController {
             let duration = Int.random(in: 60 ... 160)
             event.dateInterval = DateInterval(start: workingDate, duration: TimeInterval(duration * 60))
 
-            var info = data.randomElement() ?? []
+            let info = data.randomElement() ?? []
+            let attributedInfo = NSMutableAttributedString(
+              string: info.reduce("", { $0 + $1 + "\n" }),
+              attributes: [.font: UIFont.systemFont(ofSize: 12, weight: .semibold)]
+            )
 
             let timezone = dayView.calendar.timeZone
             print(timezone)
 
-            info.append(dateIntervalFormatter.string(from: event.dateInterval.start, to: event.dateInterval.end))
-            event.text = info.reduce("", {$0 + $1 + "\n"})
-            event.color = colors.randomElement() ?? .red
+            let durationText = dateIntervalFormatter.string(
+              from: event.dateInterval.start,
+              to: event.dateInterval.end
+            )
+
+            let color = colors.randomElement() ?? .red
+
+            let durationAttributedText: NSMutableAttributedString = {
+              var attributedString: NSMutableAttributedString!
+              if #available(iOS 13.0, *) {
+                let clockIcon = NSTextAttachment()
+                let config = UIImage.SymbolConfiguration(pointSize: 12, weight: .thin, scale: .small)
+                let image = UIImage(systemName: "clock", withConfiguration: config)
+                clockIcon.image = image
+                let text = NSMutableAttributedString(attachment: clockIcon)
+                attributedString = text
+              } else {
+                attributedString = NSMutableAttributedString(string: "")
+              }
+              attributedString.addAttribute(
+                .paragraphStyle,
+                value: {
+                  let paragraphStyle = NSMutableParagraphStyle()
+                  paragraphStyle.paragraphSpacingBefore = 5
+                  return paragraphStyle
+                }(),
+                range: NSRange(location: 0, length: attributedString.string.count)
+              )
+              return attributedString
+            }()
+            let attributedDuration = NSAttributedString(
+              string: String(format: " %@", durationText),
+              attributes: [.font: UIFont.systemFont(ofSize: 10, weight: .light)]
+            )
+            durationAttributedText.append(attributedDuration)
+            attributedInfo.append(durationAttributedText)
+            event.attributedText = attributedInfo
+            event.color = color
             event.isAllDay = Bool.random()
             event.lineBreakMode = .byTruncatingTail
 

Sources/Timeline/EventView.swift

@@ -13,6 +13,7 @@ open class EventView: UIView {
         view.isUserInteractionEnabled = false
         view.backgroundColor = .clear
         view.isScrollEnabled = false
+        view.clipsToBounds = true
         return view
     }()
 
@@ -44,6 +45,7 @@ open class EventView: UIView {
     public func updateWithDescriptor(event: EventDescriptor) {
         if let attributedText = event.attributedText {
             textView.attributedText = attributedText
+            textView.setNeedsLayout()
         } else {
             textView.text = event.text
             textView.textColor = event.textColor
@@ -53,7 +55,9 @@ open class EventView: UIView {
             textView.textContainer.lineBreakMode = lineBreakMode
         }
         descriptor = event
-        backgroundColor = event.backgroundColor
+        backgroundColor = .clear
+        layer.backgroundColor = event.backgroundColor.cgColor
+        layer.cornerRadius = 5
         color = event.color
         eventResizeHandles.forEach{
             $0.borderColor = event.color
@@ -104,13 +108,16 @@ open class EventView: UIView {
         context.saveGState()
         context.setStrokeColor(color.cgColor)
         context.setLineWidth(3)
+        context.setLineCap(.round)
         context.translateBy(x: 0, y: 0.5)
         let leftToRight = UIView.userInterfaceLayoutDirection(for: semanticContentAttribute) == .leftToRight
         let x: Double = leftToRight ? 0 : frame.width - 1.0  // 1 is the line width
         let y: Double = 0
+        let hOffset: Double = 3
+        let vOffset: Double = 5
         context.beginPath()
-        context.move(to: CGPoint(x: x, y: y))
-        context.addLine(to: CGPoint(x: x, y: (bounds).height))
+        context.move(to: CGPoint(x: x + 2 * hOffset, y: y + vOffset))
+        context.addLine(to: CGPoint(x: x + 2 * hOffset, y: (bounds).height - vOffset))
         context.strokePath()
         context.restoreGState()
     }
@@ -123,7 +130,7 @@ open class EventView: UIView {
             if UIView.userInterfaceLayoutDirection(for: semanticContentAttribute) == .rightToLeft {
                 return CGRect(x: bounds.minX, y: bounds.minY, width: bounds.width - 3, height: bounds.height)
             } else {
-                return CGRect(x: bounds.minX + 3, y: bounds.minY, width: bounds.width - 3, height: bounds.height)
+                return CGRect(x: bounds.minX + 8, y: bounds.minY, width: bounds.width - 6, height: bounds.height)
             }
         }()
         if frame.minY < 0 {