I donât know an easy way to just capitalize the first letter, sorry.
Itâs gonna be something like this, but I donât have time right now to play with it.
var d = new Date();
var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
days[d.getDay()];
You could probably apply something like that to cover all the days in the card instead of doing the hass.language stuff each time.
And the sunrise not showing the day name was based on @Mariusthvdb request, and I liked the look. Hereâs the code to make it display day name for both, of course youâll need to update for the language settings.
if ( hass.states[this.config.entity_sun].state == "above_horizon" ) {
// next is sunset == A
sunSetOrRiseA = sunSetOrRiseA.toDateString().substr(0,3) + " " + sunSetOrRiseA.toLocaleTimeString();
var ssrI = sunSetOrRiseA.lastIndexOf(":");
sunSetOrRiseA = sunSetOrRiseA.substr(0,ssrI) + sunSetOrRiseA.substr(ssrI+4);
sunSetOrRiseB = sunSetOrRiseB.toDateString().substr(0,3) + " " + sunSetOrRiseB.toLocaleTimeString();
ssrI = sunSetOrRiseB.lastIndexOf(":");
sunSetOrRiseB = sunSetOrRiseB.substr(0,ssrI) + sunSetOrRiseB.substr(ssrI+4);
} else {
// next is sunrise == B
var ss = sunSetOrRiseA;
sunSetOrRiseA = sunSetOrRiseB.toDateString().substr(0,3) + " " + sunSetOrRiseB.toLocaleTimeString();
var ssrI = sunSetOrRiseA.lastIndexOf(":");
sunSetOrRiseA = sunSetOrRiseA.substr(0,ssrI) + sunSetOrRiseA.substr(ssrI+4);
sunSetOrRiseB = ss.toDateString().substr(0,3) + " " + ss.toLocaleTimeString();
ssrI = sunSetOrRiseB.lastIndexOf(":");
sunSetOrRiseB = sunSetOrRiseB.substr(0,ssrI) + sunSetOrRiseB.substr(ssrI+4);
sunSetOrRiseIconA = "mdi:weather-sunset-up";
sunSetOrRiseIconB = "mdi:weather-sunset-down";
}
sorry If I miscommunicated here.
I thought it would be nice it the day was only shown when the event takes place on the next day. which would mean that at this time ( 18.12 hours and sun already set) both next sunrise and sunset needed the day to be displayed.
Ya, I wasnât sure what that weather entity was going to display. Glad you figured it out.
No idea what that error is. I donât have it on my end. The only thing I notice is that your line is different than mine in that you have {currentCondition} and I have {currentConditions} in two locations. But that might be a result of you using different code somewhere else than me. I donât think that would cause that error though.
oh, ya that makes sense, to only display the day name when itâs not today. try this, it doesnât pop an error for me, but since Iâm before sunset here, I canât check that the logic is working properly.
var sunSetOrRiseA = new Date(hass.states[this.config.entity_sun].attributes.next_setting);
var sunSetOrRiseIconA = "mdi:weather-sunset-down";
var sunSetOrRiseB = new Date(hass.states[this.config.entity_sun].attributes.next_rising);
var sunSetOrRiseIconB = "mdi:weather-sunset-up";
// A == sunset B == sunrise
if ( hass.states[this.config.entity_sun].state == "above_horizon" ) {
// sun has risen, but hasn't set
// sunset is today (no date displayed). sunrise is tomorrow (display date)
// next is sunset == A
sunSetOrRiseA = sunSetOrRiseA.toLocaleTimeString();
var ssrI = sunSetOrRiseA.lastIndexOf(":");
sunSetOrRiseA = sunSetOrRiseA.substr(0,ssrI) + sunSetOrRiseA.substr(ssrI+4);
sunSetOrRiseB = sunSetOrRiseB.toDateString().substr(0,3) + " " + sunSetOrRiseB.toLocaleTimeString();
ssrI = sunSetOrRiseB.lastIndexOf(":");
sunSetOrRiseB = sunSetOrRiseB.substr(0,ssrI) + sunSetOrRiseB.substr(ssrI+4);
} else {
// next is sunrise == B
var ss = sunSetOrRiseA;
if ( Date.getDate() != sunSetOrRiseB.getDate() ) {
// sun hasn't risen, and it's not same day
// so display dates for both
sunSetOrRiseA = sunSetOrRiseB.toDateString().substr(0,3) + " " + sunSetOrRiseB.toLocaleTimeString();
sunSetOrRiseB = ss.toDateString().substr(0,3) + " " + ss.toLocaleTimeString();
} else {
// sun hasn't risen, but it's the same day
// since rise and set are today, no dates displayed
sunSetOrRiseA = sunSetOrRiseB.toLocaleTimeString();
sunSetOrRiseB = ss.toLocaleTimeString();
}
var ssrI = sunSetOrRiseA.lastIndexOf(":");
sunSetOrRiseA = sunSetOrRiseA.substr(0,ssrI) + sunSetOrRiseA.substr(ssrI+4);
ssrI = sunSetOrRiseB.lastIndexOf(":");
sunSetOrRiseB = sunSetOrRiseB.substr(0,ssrI) + sunSetOrRiseB.substr(ssrI+4);
sunSetOrRiseIconA = "mdi:weather-sunset-up";
sunSetOrRiseIconB = "mdi:weather-sunset-down";
}
I think that the text isnât being hidden under, but rather itâs like the imageâs Alt text. When you take away the image the JS displays the text.
Youâd probably have to just display the text somewhere else on the card. And based on what youâre looking to do, looks like you want to get into some heavier card editing than Iâm interested in.
I started poking around with the CSS style page, and figuring out what the different style options did, and experimented with moving stuff around and resizing stuff. Then I added stuff, and saw what happened. This page was a great resource for both CSS and JS. https://www.w3schools.com/
I get this, a full date. In this case, I have not applied the translation
Instead, using my previous changes to the code to get translated the weekday of the last three rows I found the way how to capitalize the first letter looking here
Donât know what helps me this? Is it possible and how? Iâm not so well with yaml code⌠probably need some example where and what to copy / add âŚ
take out the other way of capitalizing the first characters, and see what happens.
This is what CSS is for, creating a style you can use by calling it in the html part, so that you donât have to code it there all the time. You are already using the .css file, so best adapt that to your needs, and keep the .js file as simple as can be.
