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

MMRIZE

I’ll assume your target local file would locate in

~/MagicMirror/modules/MMM-CalendarExt3/resources/target.png

AND you might run your MM on localhost like this;

http://localhost:8080

Then, you can access like below;

background-image: url("/modules/MMM-CalendarExt3/resources/target.png");

OR

background-image: url("http://localhost:8080/modules/MMM-CalendarExt3/resources/target.png");

blouzbee

@MMRIZE

works! my syntax was correct. i think having the folder of .jpgs outside the MMM-CalendarExt3 folder was why it wasn’t working.

How would I target cells for holidays that don’t fall on the same day every year? Is there a way to target the 328th day of the year?

again thank you very much.

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