Building Smarter Wearable App with WeatherKit and CalendarKit Integration

#huawei #harmony #harmonyos

Read the original article：Building Smarter Wearable App with WeatherKit and CalendarKit Integration

Context-aware apps are no longer a luxury — they’re expected. In this guide, we’ll build a HarmonyOS smartwatch app using WeatherKit and CalendarKit to deliver dynamic, smart suggestions based on weather conditions and user schedule. Whether you’re building a smart wardrobe, a jogging planner, or a hydration reminder, these kits provide powerful data hooks. Let’s get started!

Project Overview

We’ll build a Smart Day Planner watch app that:
Displays current weather (temperature, condition)
Pulls today’s events from CalendarKit.
Gives a context-aware tip (e.g., “Bring an umbrella before your 10 AM meeting”).

Setup

1.Enable the kits in module.json5:

{
  "module": {
    "requestPermissions": ["ohos.permission.READ_CALENDAR", 
"ohos.permission.INTERNET", "ohos.permission.ACCESS_INTERNET"],
    "deviceType": ["wearable"],
    "abilities": [
      {
        "name": "EntryAbility",
        "srcEntry": "./ets/MainAbility/EntryAbility.ets"
      }
    ]
  },
  "features": [
    { "name": "weather", "optional": false },
    { "name": "calendar", "optional": false }
  ]
}

2.Import required kits in your .ets files:

import weather from '@ohos.weather';
import calendar from '@ohos.calendar';

Step 1: Fetch Weather Data with WeatherKit

Let’s create a reusable WeatherService to fetch weather info based on the current location (assumes location permissions granted).

WeatherService.ets

export class WeatherService {
  async getCurrentWeather(): 
Promise<{ temperature: string; condition: string }> {
    const weatherInfo = await weather.getWeatherByLocation();
    return {
      temperature: weatherInfo.realtime?.temperature ?? '--',
      condition: weatherInfo.realtime?.text ?? 'Unknown'
    };
  }
}

Step 2: Fetch Today’s Calendar Events with CalendarKit

Now, let’s pull today’s events using the CalendarKit API.

CalendarService.ets

export class CalendarService {
  async getTodayEvents(): Promise<string[]> {
    const start = new Date();
    start.setHours(0, 0, 0, 0);
    const end = new Date();
    end.setHours(23, 59, 59, 999);

    const events = await calendar.queryEvents({
      beginTime: start.getTime(),
      endTime: end.getTime()
    });

    return events.map(event =>
      `${new Date(event.beginTime).toLocaleTimeString()} - ${event.title}`
    );
  }
}

Step 3: Generate a Smart Suggestion

Let’s create a ContextEngine that provides daily advice based on the weather and upcoming events.

ContextEngine.ets

import { WeatherService } from './WeatherService';
import { CalendarService } from './CalendarService';

export class ContextEngine {
  private weatherService = new WeatherService();
  private calendarService = new CalendarService();

  async getDailySuggestion(): Promise<string> {
    const weather = await this.weatherService.getCurrentWeather();
    const events = await this.calendarService.getTodayEvents();

    if (weather.condition.includes('Rain') && events.length > 0) {
      return `🌧️ Rain expected. Take an umbrella before your "${events[0]}"`;
    } else if (parseInt(weather.temperature) > 30) {
      return `🥵 It's hot today. Stay hydrated and wear light clothes.`;
    } else {
      return `✅ Weather looks good. You’re all set for your day!`;
    }
  }
}

Step 4: Display Everything on the Smartwatch UI

Finally, let’s create a simple ArkUI page that shows:

Weather info
Calendar events
Smart suggestion

pages/PlannerPage.ets

import { ContextEngine } from '../services/ContextEngine';

@Entry
@Component
struct PlannerPage {
  @State temperature: string = '--';
  @State condition: string = 'Loading...';
  @State events: string[] = [];
  @State suggestion: string = 'Analyzing...';

  private contextEngine = new ContextEngine();

  async aboutToAppear() {
    const weather = await this.contextEngine.weatherService.getCurrentWeather();
    const events = await this.contextEngine.calendarService.getTodayEvents();
    const smartSuggestion = await this.contextEngine.getDailySuggestion();

    this.temperature = weather.temperature;
    this.condition = weather.condition;
    this.events = events;
    this.suggestion = smartSuggestion;
  }

  build() {
    Column({ space: 10 }) {
      Text(`🌡️ ${this.temperature}° - ${this.condition}`)
        .fontSize(20)
        .fontWeight(FontWeight.Bold)

      Text('📅 Today’s Events:')
        .fontSize(18)
        .fontWeight(FontWeight.Medium)

      ForEach(this.events, (event: string) => {
        Text(event).fontSize(14)
      }, item => item)

      Divider()

      Text(`🧠 Suggestion:`).fontSize(18).fontWeight(FontWeight.Medium)
      Text(this.suggestion).fontSize(16).fontColor(Color.Blue)
    }
    .padding(20)
  }
}

Output Preview

Example screen on the Watch:

🌡️ 22° — Light Rain
📅 Today’s Events:
10:00 — Team Sync
15:00 — Gym
🧠 Suggestion:
🌧️ Rain expected. Take an umbrella before your “10:00 — Team Sync”

Final Thoughts

HarmonyOS Wearables are capable of more than just fitness tracking. By combining WeatherKit and CalendarKit, you can deliver deeply personalized experiences that genuinely assist users in real time.

Want to go further?

Use LocationKit to improve accuracy.
Add BackgroundTaskKit to refresh data periodically.
Extend to multi-day forecasts or recurring events.

Conclusion

The Smart Day Planner app demonstrates how developers can leverage the WeatherKit and CalendarKit in HarmonyOS Wearables to create truly context-aware and intelligent user experiences. By dynamically combining: