MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord

    SOLVED Maximizing Screen Use with MMM-CalendarExt2 and Custom.css

    Troubleshooting
    2
    9
    2040
    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
      CliffordW last edited by

      I am a complete noob with css, so please be kind. I am trying to move the calendar entries up to possibly show a fourth row. What I have so far is this:

      https://imgur.com/qAjF4D6

      My custom.css file looks like:

      /*****************************************************

      • Magic Mirror *
      • Custom CSS *
      •                                               *
        
      • By Michael Teeuw http://michaelteeuw.nl *
      • MIT Licensed. *
      •                                               *
        
      • Add any custom CSS below. *
      • Changes to this files will be ignored by GIT. *
        *****************************************************/

      body {
      margin: 40px;
      height: calc(100% - 100px);
      width: calc(100% - 30px);
      }

      Any changes I make to height/width don’t seem to affect the calendar display. Can someone give me some guidance how I maximize the screen usage?

      ? 1 Reply Last reply Reply Quote 0
      • ?
        A Former User @CliffordW last edited by

        @CliffordW
        use fullscreen_below or above.

        C 1 Reply Last reply Reply Quote 1
        • C
          CliffordW @Guest last edited by CliffordW

          @Sean Thanks for your reply Sean. I’ve tried both fullscreen_below and fullscreen_above and both have an identical look. Any other suggestions how to remove the blank margin at the top?

          If I change slotcount from 3 to 4, the first couple of lines from the top are chopped off.

          ```
          

          modules: [

          	{
          		module: 'MMM-CalendarExt2',
          		  config: {
          			calendars : [
          			
          			  { 
          				name: "BNC Rentals", 
          				// url: "https://calendar.google.com/calendar/ical/en.canadian%23holiday%40group.v.calendar.google.com/public/basic.ics",
          				url: "https://calendar.google.com/calendar/ical/rentalsthebnc%40gmail.com/private-xxxxxxxxxxxxx/basic.ics"
          			},
          			],
          			views: [
          			{
          				Name: "Rentals",
          				title: "BNC Rentals",
          				mode: "week",			
          				position: "fullscreen_below",
          				calendars: ["BNC Rentals"],
          				useEventTimeRelative: true,
          				slotCount: 3,
          				slotTitle: "",
          				slotMaxHeight: "150px",
          				slotSubTitle: "",
          				slotTitleFormat: "MMM:DD",
          				slotSubTitleFormat: "MMM:DD",
          				subslotTitleFormat: "MMM:DD",
          				maxItems: 200,
          				hideOverflow: false,
          				relativeFormat: {
          					passed: "ended %ENDFROMNOW%",
          					current: "ends %ENDFROMNOW%",
          					future: "starts %STARTFROMNOW% (%DURATION%)"
          				},
          
          			
          			}
          			],
          			scenes: [
          			  {
          				name: "DEFAULT",
          				views: [],
          			  },
          			],
          
          		 }
          
          	}		
          
          
          ]
          

          };

          ? 1 Reply Last reply Reply Quote 0
          • ?
            A Former User @CliffordW last edited by

            @CliffordW
            week and month views are somewhat huge. You can adjust size by CSS or set slotMaxHeight to smaller values.

            C 1 Reply Last reply Reply Quote 0
            • C
              CliffordW @Guest last edited by

              @Sean I’ve been looking at custom.css, and I admit it’s very new to me. Which value should I try changing to reduce the upper margin?

              ? 2 Replies Last reply Reply Quote 0
              • ?
                A Former User @CliffordW last edited by

                @CliffordW
                By default, in fullscreen position, month and week view will be positioned to the bottom of the screen.

                MMM-CalendarExt2.css

                .fullscreen .CX2 { /* when the view is located on `fullscreen_below` or `fullscreen_above` */
                  position:fixed;
                  bottom: 10px; 
                  margin: 20px;
                  width:calc(100vw - 40px);
                }
                

                So you can redefine this section in your css/custom.css but not recommended.

                C 1 Reply Last reply Reply Quote 0
                • ?
                  A Former User @CliffordW last edited by

                  @CliffordW
                  If what you want is just enlarge the height, set slotMaxHeight to bigger value.

                  C 1 Reply Last reply Reply Quote 0
                  • C
                    CliffordW @Guest last edited by

                    @Sean I’d like to be able show 4 rows instead of 3. There is a considerable amount of unused space at the top of the monitor, so I’d like to reduce (remove) this margin at the top.

                    I hope I’m making sense.

                    1 Reply Last reply Reply Quote 0
                    • C
                      CliffordW @Guest last edited by

                      @Sean Thanks for the guidance. I missed it the first time. Considering this pi is a single function, I might just give this a shot.

                      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 Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
                      This forum is using NodeBB as its core | Contributors
                      Contact | Privacy Policy