Skip to main content
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:
ColumnSource fieldFormat
Datedaily.time[i]Short month + day, e.g. "Jun 15"
Weather icondaily.weather_code[i]Derived via getWeatherIcon()
Daily high tempdaily.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: 
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.
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.

​
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.
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.

​
Weather icons

Icons follow the same getWeatherIcon() logic used across all views:
Code rangeIconColour
0SunAmber
1 – 3CloudLight blue
4+Cloud-rainBlue

​
Code snippet

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();
}
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.

Build docs developers (and LLMs) love

Get started for freeTalk to us