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:

    My custom.css file looks like:


    • Magic Mirror *
    • Custom CSS *
    •                                               *
    • By Michael Teeuw *
    • 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

    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: "",
    				url: ""
    			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

    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

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


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

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

  • Module Developer

    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