Show day of week in forecast

Is there a way to show the days of the week in the Forecast.io module when using the daily forecast display? What I see right now it just a list of temperatures and icons but no day of the week.

You can take the basic template we provide and add to it as you wish by overriding the template. Making changes to the template has been covered before so a search here should bring up some information on that.

Yes it is possible.
So, you’ll want to tick the ‘override the template’ and then:

Under “Enter the template for the current forecast. Replaces [dailyForecast] in main template.”
you will want to add

    <div class ="day-name">[time|l]</div>

so it would look like this

   <div class="day">
    <div class ="day-name">[time|l]</div>
 <div class="day-icon"><i class="wi [wicon]"></i> [temperatureMinFloor] / [temperatureMaxFloor]<i class="wi wi-degrees"></i></div>
    <div class="day-desc">[summary]</div>
</div>

Now for css (font size)

.day {
margin-top: 10px;
font-size: 28px;

the above will control all text (because all items are inside ‘day’ div, you can create for example:

.day-name {
margin-top: 10px;
font-size: 68px;

this will only control the name of the day so you can have for example something like this:

Thanks for your help. I was able to do some further modifications to the HTML and CSS and formatted my forecast to look like the attached image (I didn’t want the summary to show so I removed that line)
.

I started with the daily forecast present then modified it using the following code:

<table class="tg">
  <tr>
    <th class="tg-day"><i class ="day-name">[time|D]</i></th>
    <th class="tg-icon"><i class="wi [wicon]"></i></th>
    <th class="tg-temp">High [temperatureMaxFloor]/Low [temperatureMinFloor]</th>
  </tr>
</table>

And the CSS styles are below:

.daily-forecast
{
margin-top: 10px;
padding: 10px;
font-size: 75px;
text-align: center;
}

.tg  
{
table-layout: fixed;
padding-left: 20px;
width: 570px;
}

.tg th
{
font-family: Verdana;
font-size: 48px;
font-style: normal;
font-variant: normal;
font-weight: 400;
}

.tg-day
{
font-family: Verdana;
font-size: 48px;
font-style: normal;
font-variant: normal;
font-weight: 400;
width: 100px;
text-align: left;
}

.tg-icon
{
width: 85px;
text-align: center;
}

.tg-temp
{
width: 385px;
text-align: left;
}

This is formatted for a specific sized region.

1 Like

Hellos

I’ve added that 5 day in a circle forecast theme and edited it a little bit. But I’ve got one problem by showing the days. Even when I’ve set the module to german it doesnt shows me german days. The text and so on is completly in german, just the days not.

thats what Ive added into the “override” thing:

[time|D]

It shows Mon Tue Wed etc. now but I would like to have it showing Mon Die Mit or atleast M D M - just one letters.
Is this possible?

Hi Sascha,

5 days forecast in 1.7 series is a bit more complex to actually change the language.

First thing, go to settings → regional tab, set it as follows:

  • Default language: de
  • Date format: YYYY-MM-dd HH:mm:ss
  • “Show international Dates?” ticked.

Now on the layout, you will need to override the template and make some changes

So if you’d like to get something like this:

You will want to edit the template like this:

   <div class="weekday">[time|cccc]</div>
   <div class="weekday-short">[time|ccccc]</div>

with [time|ccc] you will have 2 letters and cccc as shown above will give you full name (it can be used to next days too of course). Feel free to check other possibilities.

Hellos,

many thanks for your reply. Well, i just used that 5 days in a circle layout cause of the next days.
At the moment i have the standard icon layout (that one with the colored icons) with temperature and the description of today and the upcoming weather as big weather info.

UNDER this info I would like to have the next three days with those colored icons, the temperature and with the each day name

So if i am using this 5 days in a circle layout it begins with the actual day which is already displayed with my big weather info already. But I didn’t found any way to solve this.

I’ve just done what you told me in the settings. But all I got in my screen is this now:

-1 
Thu
next
2016-02-25T00:00:00+01:002016-02-25T00:00:00+01:002016-02-25T00:00:00+01:002016-02-25T00:00:00+01:00
next
2016-02-25T00:00:00+01:002016-02-25T00:00:00+01:002016-02-25T00:00:00+01:002016-02-25T00:00:00+01:002016-02-25T00:00:00+01:00

by

adding these lines:

[time|D]
next
[time|cccc]
next
[time|ccccc]

Date formatting is wrong, did you set it as I suggested? ie:

First thing, go to settings → regional tab, set it as follows:

  • Default language: de
  • Date format: YYYY-MM-dd HH:mm:ss
  • “Show international Dates?” ticked.

Date format needs to be like that and international dates has to be ticked.