> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/m20prs/Sky-AI-Forecast/llms.txt
> Use this file to discover all available pages before exploring further.

# 16-day outlook

> How the 16-day daily forecast view works, including date formatting, daily high temperature, and weather icons.

The 16-day outlook displays up to 16 days of daily forecast data, giving you a long-range view of expected conditions and high temperatures.

## What is displayed

Each row in the list shows three pieces of information:

| Column          | Source field                  | Format                                             |
| --------------- | ----------------------------- | -------------------------------------------------- |
| Date            | `daily.time[i]`               | Short month + day, e.g. `"Jun 15"`                 |
| Weather icon    | `daily.weather_code[i]`       | Derived via `getWeatherIcon()`                     |
| Daily high temp | `daily.temperature_2m_max[i]` | Rounded to the nearest integer, shown in °C (bold) |

The list is headed **"16-Day Outlook"** and contains one row per entry in `globalWeatherData.daily.time` — up to 16 entries, as the weather API is called with `forecast_days=16`.

## How to trigger it

Click the **16-Day Outlook** tab. Like the hourly view, it does not load automatically and requires a successful city search before the tab becomes visible.

## Date formatting

Raw `daily.time` values are ISO 8601 date strings (e.g. `"2024-06-15"`). The app formats them using:

```js theme={null}
const date = new Date(globalWeatherData.daily.time[i]).toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
```

This produces strings like `"Jun 15"` regardless of the browser's locale, because `'en-US'` is hardcoded.

<Note>
  The function in the source code is named `show30d()`, which is a legacy name. It displays 16 days of data, matching the `forecast_days=16` parameter in the Open-Meteo API request.
</Note>

## Temperature

The temperature shown is the **daily maximum** (`temperature_2m_max`), rounded with `Math.round()` and displayed in bold. Minimum temperatures are fetched by the API (`temperature_2m_min`) but are not currently rendered in this view.

<Info>
  The daily maximum is the highest temperature expected at 2 metres above ground level anywhere within that calendar day in the city's local timezone.
</Info>

## Weather icons

Icons follow the same `getWeatherIcon()` logic used across all views:

| Code range | Icon       | Colour     |
| ---------- | ---------- | ---------- |
| `0`        | Sun        | Amber      |
| `1` – `3`  | Cloud      | Light blue |
| `4`+       | Cloud-rain | Blue       |

## Code snippet

```js theme={null}
function show30d() {
    const display = document.getElementById('weatherDisplay');
    let html = '<div class="forecast-list"><h3>16-Day Outlook</h3>';
    for (let i = 0; i < globalWeatherData.daily.time.length; i++) {
        const date = new Date(globalWeatherData.daily.time[i]).toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
        html += `
        <div class="forecast-item">
            <span>${date}</span> 
            <span>${getWeatherIcon(globalWeatherData.daily.weather_code[i])}</span>
            <span><strong>${Math.round(globalWeatherData.daily.temperature_2m_max[i])}°</strong></span>
        </div>`;
    }
    display.innerHTML = html + '</div>';
    lucide.createIcons();
}
```

<Tip>
  The 16-day outlook is most useful for planning trips or events. For day-to-day accuracy, forecasts beyond 7 days carry higher uncertainty — treat them as indicative rather than definitive.
</Tip>