A few CalExt3 questions: background images, glance, and symbols

MMRIZE

@blouzbee
DayOfYear is not supported yet, but I’ll consider it in the future version.

greedyvegan

@MMRIZE said in A few CalExt3 questions: background images, glance, and symbols:

1

.CX3 .month_6.date_16 {
  background-image: url("https://img.freepik.com/free-vector/flat-corpus-christi-illustration_23-2148934727.jpg?w=400");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

Can I use this to add a background image to every date/square with “background-repeat” as a default and override it for specific dates?

MMRIZE

@greedyvegan

Of course, you may need some adjusting size and position, anyway, its possible.

/* In your css/custom.css */
.CX3 .cell {
  background-image: url("https://forum.magicmirror.builders/assets/uploads/files/1708912838487-calendar-background.001.png");
  background-position: top left;
  background-size: cover;
  background-repeat: no-repeat;
}

.CX3 .cell.today {
  background-image: url("https://picsum.photos/200?1");
  background-position: center center;
}

.CX3 .cell.month_2.date_28 {
  background-image: url("https://picsum.photos/200?2");
  background-position: center center;
}

.CX3 .cell.month_3 {
  background-image: url("https://picsum.photos/200?3");
  background-position: center center;
}

You can also use other prepred selectors like thisWeek, thisMonth, thisYear, year_2025, weekday_3, and its combination.
And this method was by the static date.
If you want to change the background of the specific cell dynamically by the event, See the cell manipulation parts in README.

greedyvegan

@MMRIZE

thank you very much

BiaGen

CX3 is definitely one of the most versatile modules, but getting the CSS right for those background images can be a bit of a rabbit hole! I’ve found that if the background image is too ‘busy,’ it completely kills the readability of the event symbols.
I’ve actually been using https://solidbg.com/ to quickly strip the backgrounds off custom icons or logos before I host them for my mirror. It’s way faster than manually editing PNGs when you just want a clean, transparent symbol that doesn’t clash with the CX3 ‘glance’ view.
Are you applying the background image to the .CX3 .event container specifically, or are you trying to do a full module background? Sometimes the z-index acts up depending on the position of other modules.