Creating a macOS Menubar App to Display Calendar Events

Introduction

Developing a macOS menubar application to display calendar events can be a highly useful tool for efficient time management and quick access to your schedule. This guide provides a comprehensive, step-by-step approach to building such an app using Swift and AppKit, leveraging the EventKit framework for calendar integration.

1. Choose Your Development Framework

SwiftUI vs AppKit

When creating a macOS application, you have two primary choices for the UI framework:

SwiftUI: Apple's modern declarative UI framework, offering a streamlined development experience with less code and better integration with other Apple technologies.
AppKit: The traditional imperative UI framework for macOS, providing more granular control over UI components. It's well-suited for complex, mature applications or when working with legacy codebases.

For a menubar app that primarily focuses on functionality over extensive custom UI elements, both frameworks are suitable. SwiftUI may offer quicker development with its declarative syntax, while AppKit provides deeper customization options.

2. Set Up Your Development Environment

Install the latest version of Xcode from the Mac App Store if not already installed.
Open Xcode and select "Create a new Xcode project."
Choose "App" under the macOS tab and click "Next."
Provide a project name, such as "CalendarMenubarApp," and ensure the language is set to Swift. Choose SwiftUI or AppKit as per your preference.
Save the project in your desired directory.

3. Implement the Menubar Item

To create a persistent menubar item, you will utilize NSStatusBar and NSStatusItem in AppKit or the corresponding components in SwiftUI.

Using AppKit

import Cocoa

@main
class AppDelegate: NSObject, NSApplicationDelegate {
    var statusItem: NSStatusItem!

    func applicationDidFinishLaunching(_ aNotification: Notification) {
        // Create the status bar item
        statusItem = NSStatusBar.system.statusItem(withLength: NSStatusItem.variableLength)
        
        if let button = statusItem.button {
            button.title = "Calendar"
            button.action = #selector(showCalendarEvents)
        }
    }

    @objc func showCalendarEvents() {
        // Code to display calendar events
    }
}

Using SwiftUI

import SwiftUI

@main
struct CalendarMenubarApp: App {
    @NSApplicationDelegateAdaptor(AppDelegate.self) var appDelegate

    var body: some Scene {
        Settings {
            // Optional settings window
        }
    }
}

class AppDelegate: NSObject, NSApplicationDelegate {
    var statusItem: NSStatusItem!

    func applicationDidFinishLaunching(_ notification: Notification) {
        statusItem = NSStatusBar.system.statusItem(withLength: NSStatusItem.variableLength)
        
        if let button = statusItem.button {
            button.image = NSImage(systemSymbolName: "calendar", accessibilityDescription: "Calendar")
            button.action = #selector(showCalendarEvents)
            button.target = self
        }
    }

    @objc func showCalendarEvents() {
        // Code to display calendar events
    }
}

4. Access Calendar Data Using EventKit

The EventKit framework allows your app to access and manage the user's calendar events. Follow these steps to integrate EventKit:

Requesting Access

import EventKit

let eventStore = EKEventStore()

eventStore.requestAccess(to: .event) { (granted, error) in
    if granted && error == nil {
        // Access granted, proceed to fetch events
        self.fetchEvents()
    } else {
        // Handle access denial or errors
    }
}

func fetchEvents() {
    // Implementation to fetch calendar events
}

Ensure that your app's Info.plist includes the NSCalendarsUsageDescription key with a description for why your app needs calendar access.

Fetching Events

func fetchEvents() {
    let calendars = eventStore.calendars(for: .event)
    let oneDayAgo = Date().addingTimeInterval(-86400)
    let oneYearAfter = Date().addingTimeInterval(31536000)
    let predicate = eventStore.predicateForEvents(withStart: oneDayAgo, end: oneYearAfter, calendars: calendars)
    
    let events = eventStore.events(matching: predicate)
    
    // Process and display events
    DispatchQueue.main.async {
        self.displayEvents(events)
    }
}

5. Displaying Calendar Events in the Menubar

Once you have fetched the calendar events, the next step is to display them when the user interacts with the menubar item.

Using a Dropdown Menu

func createMenu(with events: [EKEvent]) -> NSMenu {
    let menu = NSMenu()

    for event in events {
        let menuItem = NSMenuItem(title: "\(event.title) - \(event.startDate)", action: nil, keyEquivalent: "")
        menu.addItem(menuItem)
    }

    menu.addItem(NSMenuItem.separator())
    menu.addItem(NSMenuItem(title: "Quit", action: #selector(quitApp), keyEquivalent: "q"))
    return menu
}

@objc func showCalendarEvents() {
    let events = fetchEvents()
    statusItem.menu = createMenu(with: events)
    statusItem.button?.performClick(nil) // Open the menu
}

@objc func quitApp() {
    NSApp.terminate(nil)
}

Using a Popover

import SwiftUI

struct ContentView: View {
    var events: [EKEvent]

    var body: some View {
        List(events, id: \.eventIdentifier) { event in
            VStack(alignment: .leading) {
                Text(event.title)
                    .font(.headline)
                Text(event.startDate, style: .time)
                    .font(.subheadline)
            }
        }
        .frame(width: 300, height: 400)
    }
}

class AppDelegate: NSObject, NSApplicationDelegate {
    // Previous code...

    var popover: NSPopover!

    func applicationDidFinishLaunching(_ notification: Notification) {
        // Previous code to create statusItem...

        popover = NSPopover()
        popover.contentViewController = NSHostingController(rootView: ContentView(events: []))
    }

    @objc func showCalendarEvents() {
        fetchEvents { events in
            DispatchQueue.main.async {
                if let contentView = self.popover.contentViewController as? NSHostingController {
                    contentView.rootView = ContentView(events: events)
                }
                self.popover.show(relativeTo: self.statusItem.button!.bounds, of: self.statusItem.button!, preferredEdge: .minY)
            }
        }
    }

    func fetchEvents(completion: @escaping ([EKEvent]) -> Void) {
        // Fetch events and pass them to the completion handler
    }
}

6. Customizing Appearance and Behavior

Customizing the Menubar Icon

You can use system images or custom icons for the menubar button:

if let button = statusItem.button {
    button.image = NSImage(systemSymbolName: "calendar", accessibilityDescription: "Calendar")
}

Displaying Event Details

To provide more context, display the event's title, time, and possibly location. You can also color-code events based on their calendar or importance.

Handling Different Calendars

If users have multiple calendars, allow them to filter or select which calendars' events to display.

7. Integrating with External Services

For enhanced functionality, you might want to integrate with external meeting services like Zoom or Microsoft Teams:

Zoom: Allow users to join or schedule Zoom meetings directly from the menubar app.
Microsoft Teams: Enable starting or managing Teams meetings seamlessly.

Implementing these integrations typically involves using the respective service's APIs and handling authentication and event linking.

8. Error Handling and Permissions

Ensure your app gracefully handles scenarios where:

The user denies calendar access.
No events are found within the specified time frame.
API calls to external services fail.

Provide user feedback and instructions to resolve such issues, such as changing permissions in System Preferences.

9. Refreshing and Updating Events

Implement a mechanism to periodically refresh the displayed events to ensure they are up-to-date. Consider using timers or responding to system calendar change notifications.

10. Building and Running the App

Once your app is fully implemented:

Build the project in Xcode to check for any compile-time errors.
Run the app. The menubar icon should appear, and clicking it should display the current calendar events.
Test the app under different scenarios, such as adding or removing calendar events and ensuring the app updates accordingly.

11. Additional Resources and Learning

Conclusion

Creating a macOS menubar app to display calendar events involves integrating the EventKit framework with a user interface built using SwiftUI or AppKit. By following these steps, you can develop a functional and user-friendly application that provides quick access to your calendar directly from the menubar. Remember to handle permissions appropriately and provide clear user feedback to ensure a smooth experience.