MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

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

    Scheduled Pinned Locked Moved Utilities
    10 Posts 4 Posters 2.9k Views 4 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • B Offline
      blouzbee @MMRIZE
      last edited by

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

      M 1 Reply Last reply Reply Quote 0
      • M Offline
        MMRIZE @blouzbee
        last edited by

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

        1 Reply Last reply Reply Quote 0
        • G Offline
          greedyvegan @MMRIZE
          last edited by

          @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?
          calendar background.001.png

          M 1 Reply Last reply Reply Quote 0
          • M Offline
            MMRIZE @greedyvegan
            last edited by MMRIZE

            @greedyvegan
            mm.png
            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.

            G 1 Reply Last reply Reply Quote 0
            • G Offline
              greedyvegan @MMRIZE
              last edited by

              @MMRIZE

              thank you very much

              1 Reply Last reply Reply Quote 0
              • 1 / 1
              • First post
                Last post
              Enjoying MagicMirror? Please consider a donation!
              MagicMirror created by Michael Teeuw.
              Forum managed by Sam, technical setup by Karsten.
              This forum is using NodeBB as its core | Contributors
              Contact | Privacy Policy