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

MMM-CalendarExt3

Scheduled Pinned Locked Moved Utilities
654 Posts 77 Posters 1.8m Views 81 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.
  • C Offline
    CyruS1337 Project Sponsor @sdetweil
    last edited by Mar 21, 2025, 2:59 PM

    @sdetweil

    Great, it worked. I have one more question.
    Do I have to use the “calendar” module from MagicMirror, or would the MMM-MyCalendar module also work?

    						{
    			module: "MMM-MyCalendar",
    			position: "bottom_right",	// This can be any of the regions. Best results in left or right regions.
    			header: 'Kalender Andreas',
    		  config: {
    			colored: true,
    			maxTitleLength: 30, 
    			maximumEntries: 4,
    			displayRepeatingCountTitle: true,
    			timeFormat: "HH:mm",
    			dateFormat: "DD:MM:YYYY",
    			joiningWord: "um",
    			calendars: [
    			{
    				url: 'https://calendar.google.com/calendar/ical/................./basic.ics',
    				color: "#5b53d4",
    				symbol: 'calendar',
    				auth: {
    					user: 'username',
    					pass: 'superstrongpassword',
    					method: 'basic'
    								}
    			},
    			],
    	}
    		},
    						{
    			module: "MMM-MyCalendar",
    			position: "bottom_right",	// This can be any of the regions. Best results in left or right regions.
    			header: 'Kalender Daniela & Andreas',
    		  config: {
    			colored: true,
    			maxTitleLength: 30, 
    			maximumEntries: 4,
    			displayRepeatingCountTitle: true,
    			timeFormat: "HH:mm",
    			dateFormat: "DD:MM:YYYY",
    			joiningWord: "um",
    			calendars: [
    			{
    				url: 'https://calendar.google.com/calendar/ical/................./basic.ics',
    				color: "#f05db0",
    				symbol: 'calendar',
    				auth: {
    					user: 'username',
    					pass: 'superstrongpassword',
    					method: 'basic'
    								}
    			},
    			],
    	}
    		},
    
    S 1 Reply Last reply Mar 21, 2025, 3:04 PM Reply Quote 0
    • S Away
      sdetweil @CyruS1337
      last edited by Mar 21, 2025, 3:04 PM

      @CyruS1337 MAYBE it will work, but it is a clone of the default cal from 3 years ago, with the broken repeating schedule code…
      which I just fixed in the latest release 2.30.0, Jan 1…

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      1 Reply Last reply Reply Quote 0
      • C Offline
        CyruS1337 Project Sponsor @sdetweil
        last edited by Mar 23, 2025, 1:08 PM

        @sdetweil thanks a lot. It works

        1 Reply Last reply Reply Quote 0
        • P Offline
          p1lspeda
          last edited by Mar 25, 2025, 2:49 PM

          Hi,
          CSS is driving my crazy.
          9a7f7331-0a18-4211-a87d-c0ac29321eca-image.png

          As you can see in the above screenshot, today (Tuesday) the top (weather, today’s Date & Month) take up the entire width.
          This is fine.
          The “problem” was yesterday with the additional “CW13” which led to overlapping.
          I was wondering; if I could minimize the padding around the current date (the red area in the screenshot), theoretically the space should be big enough for all info to be next to each other

          I tried adjusting the css

          .CX3 .today .cellDate {
            padding: 1px 8px;
            }
          

          but unfortunately, that did not have any effect.

          Can somebody point me in the right direction ?
          Thanks

          S B 2 Replies Last reply Mar 25, 2025, 2:54 PM Reply Quote 0
          • S Away
            sdetweil @p1lspeda
            last edited by sdetweil Mar 25, 2025, 2:55 PM Mar 25, 2025, 2:54 PM

            @p1lspeda I do not know , but you can use the developers window to fiddle with css changes live

            see the second link in my signature below

            also see this topic where we discussed css and the dev window just a couple days ago
            https://forum.magicmirror.builders/topic/19559/css-modifications-on-a-module-which-has-no-own-css-styles

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            1 Reply Last reply Reply Quote 0
            • B Offline
              BKeyport Module Developer @p1lspeda
              last edited by BKeyport Mar 25, 2025, 7:29 PM Mar 25, 2025, 7:09 PM

              @p1lspeda

              I think you’ll find that it’s because of the .cellDate property - it’s set to flex-grow: 3

              Almost everything on that line is also connected to .cellHeader.

              I disable the CW line manually (from habit, don’t know if it’s an option to do in config) along with a few other modifications (including eliminating weather through config):

              .CX3 .cellHeader {
                text-align: right;
                height: var(--cellheaderheight);
                padding: 2px;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                font-size: 100%;
              }
              
              /* Disable CW date */
              .CX3 .cw {
              	display: none;
              }
              

              This results in the header taking up the entire space.

              Look for the .cellHeader properties in the main CSS file, and copy them over to your custom.css to mess with them all you want and see what happens.

              Pay special attention to justify-content in .cellHeader in combination with the flex-grow in .cellDate

              The "E" in "Javascript" stands for "Easy"

              S 1 Reply Last reply Mar 25, 2025, 8:12 PM Reply Quote 0
              • S Away
                sdetweil @BKeyport
                last edited by Mar 25, 2025, 8:12 PM

                @BKeyport you can override in dev window, no need to copy

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                B 1 Reply Last reply Mar 25, 2025, 9:59 PM Reply Quote 0
                • B Offline
                  BKeyport Module Developer @sdetweil
                  last edited by Mar 25, 2025, 9:59 PM

                  @sdetweil right, but once you have the changes you want, you have to figure out how to implement them, and I’ve noticed with CX3 and some other modules, sometimes the dev window flat out lies where to stuff the CSS for final.

                  The "E" in "Javascript" stands for "Easy"

                  S 2 Replies Last reply Mar 25, 2025, 10:04 PM Reply Quote 0
                  • S Away
                    sdetweil @BKeyport
                    last edited by sdetweil Mar 25, 2025, 10:06 PM Mar 25, 2025, 10:04 PM

                    @BKeyport you copy/paste from the top right to custom.css
                    with the selected selector from right of bottom left pane w the modulename class prefix

                    will post images later, in car now

                    Sam

                    How to add modules

                    learning how to use browser developers window for css changes

                    S 1 Reply Last reply Mar 25, 2025, 10:05 PM Reply Quote 0
                    • S Away
                      sdetweil @sdetweil
                      last edited by Mar 25, 2025, 10:05 PM

                      @BKeyport never seen it lie

                      Sam

                      How to add modules

                      learning how to use browser developers window for css changes

                      1 Reply Last reply Reply Quote 0
                      • 1
                      • 2
                      • 61
                      • 62
                      • 63
                      • 64
                      • 65
                      • 66
                      • 63 / 66
                      63 / 66
                      • First post
                        629/654
                        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