Building Smarter Wearable App with WeatherKit and CalendarKit Integration

Source: Dev.to

Project Overview

• Display current weather (temperature, condition)
• Pull today’s events from CalendarKit
• Provide a context‑aware tip (e.g., “Bring an umbrella before your 10 AM meeting”)

Setup

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 }
  ]
}

Import required kits in your .ets files

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

Step 1: Fetch Weather Data with WeatherKit

Create a reusable WeatherService to obtain weather information based on the current location (assumes location permissions are granted).

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

Step 2: Fetch Today’s Calendar Events with CalendarKit

Pull today’s events using the CalendarKit API.

// CalendarService.ets
export class CalendarService {
  async getTodayEvents(): Promise {
    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

A ContextEngine combines weather data and calendar events to produce daily advice.

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

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

  async getDailySuggestion(): Promise {
    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

A simple ArkUI page shows weather info, calendar events, and the 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:
09:00 AM - Team Stand‑up
14:30 PM - Project Review
🧠 Suggestion:
🌧️ Rain expected. Take an umbrella before your "09:00 AM - Team Stand‑up"

Final Thoughts

HarmonyOS wearables can do far more than track fitness. 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 location 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 WeatherKit and CalendarKit in HarmonyOS wearables to create truly context‑aware and intelligent user experiences. By dynamically combining:

• Real‑time weather conditions
• Today’s scheduled events
• Logic‑based contextual suggestions

the wearable transforms from a passive accessory into a proactive assistant. This integration can be applied to:

• Health apps (adapt hydration reminders based on weather)
• Fitness apps (recommend indoor workouts on stormy days)
• Productivity tools (suggest clothing or commuting tips)
• Smart wardrobe apps (suggest outfits based on calendar and forecast)

Building on these core kits enables developers to scale their logic across different contexts, delivering deeply personalized HarmonyOS experiences.

References

• OpenCms demo – Huawei Developer
• Additional documentation for WeatherKit, CalendarKit, LocationKit, and BackgroundTaskKit on the Huawei Developer portal.