MagicMirror² v2.13.0 is available! For more information about this release, check out this topic.

Maximizing Screen Use with MMM-CalendarExt2 and Custom.css



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


  • Module Developer

    @CliffordW
    use fullscreen_below or above.



  • @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: [],
    			  },
    			],
    
    		 }
    
    	}		
    
    
    ]
    

    };


  • Module Developer

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



  • @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?


  • Module Developer

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


  • Module Developer

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



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



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


Log in to reply