• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
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.5k 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.
  • A Offline
    almightyyoshi @MMRIZE
    last edited by almightyyoshi Jun 17, 2022, 1:03 PM Jun 17, 2022, 1:02 PM

    @MMRIZE

    1. Thanks! I was so close. I thought I had to specify .cell. Also, I had completely forgotten to make an images folder, but that only took me 10 minutes to remember. :beaming_face_with_smiling_eyes:

    2. Thanks. I’ll look at MMM-Touch.

    3. Here’s my code. Yes, default works fine. It only messes up when I try to specify an icon.

    Default Calendar

    {
                            module: "calendar",
                            //position: "bottom_center",
                            config: {
                                    colored: true,
                                    broadcastPastEvents: true,
                                    calendars: [
                                            {
                                            url: ...
                                            name: "CJ",
                                            color: "#3061E3",
                                            auth: {
                                                  user: ...,
                                                  pass: ...
                                            }
                                            },
                                            {
                                            url: ...
                                            name: "Family",
                                            color: "#DA2528",
                                            auth: {
                                                  user: ...,
                                                  pass:  ...
                                            }
                                            },
                                            {
                                            url: ...
                                            name: "Fiji",
                                            color: "#d2cf2a",
                                            auth: {
                                                  user: ...,
                                                  pass: ...
                                            }
                                            },
                                            {
                                            url:  
                                            name: "Clararee",
                                            color: "#a716b8",
                                            auth: {
                                                  user: ...,
                                                  pass: ...
                                            }
                                            },
                                            url: ...
                                            name: "Birthdays",
                                            symbol: "fa-solid fa-cake-candles",
                                            auth: {
                                                  user: ...,,
                                                  pass: ...
                                            }
                                            },
                                            {
                                            url: ...
                                            name: "Music",
                                            symbol: "fa-solid fa-music",
                                            auth: {
                                                  user: ...,
                                                  pass: ...
                                            }
                                            },
                                    ],
                            }
                    },
    

    CalExt3

            {
                module: "MMM-CalendarExt3",
                position: "middle_center",
                config: {
                        mode: "month",
                        instanceID: "currentMonth",
                        firstDayOfWeek: 0,
                        useSymbol: true,
                        calendarSet: [],
                }
            },
    
    1 Reply Last reply Reply Quote 0
    • B Offline
      blouzbee @MMRIZE
      last edited by Sep 23, 2022, 4:42 AM

      @MMRIZE

      your example works as you posted it. but if i want to target a local file as a background image for a specfic day. i cant get it to work. any HTTPS: i use works fine. i feel ive tried every variation i could find online. What’s the proper way to do that in calext3? thank you.

      M 1 Reply Last reply Sep 23, 2022, 6:47 AM Reply Quote 0
      • M Offline
        MMRIZE @blouzbee
        last edited by MMRIZE Sep 23, 2022, 6:48 AM Sep 23, 2022, 6:47 AM

        @blouzbee

        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");
        
        B 1 Reply Last reply Sep 25, 2022, 3:21 AM Reply Quote 0
        • B Offline
          blouzbee @MMRIZE
          last edited by Sep 25, 2022, 3:21 AM

          @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 Sep 25, 2022, 11:56 AM Reply Quote 0
          • M Offline
            MMRIZE @blouzbee
            last edited by Sep 25, 2022, 11:56 AM

            @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 Feb 26, 2024, 2:02 AM

              @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 Feb 26, 2024, 9:32 AM Reply Quote 0
              • M Offline
                MMRIZE @greedyvegan
                last edited by MMRIZE Feb 26, 2024, 9:37 AM Feb 26, 2024, 9:32 AM

                @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 Feb 26, 2024, 10:09 PM Reply Quote 0
                • G Offline
                  greedyvegan @MMRIZE
                  last edited by Feb 26, 2024, 10:09 PM

                  @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