Maximizing Screen Use with MMM-CalendarExt2 and Custom.css

[CliffordW]

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?

[A Former User]

@CliffordW
use fullscreen_below or above.

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

		 }

	}		


]

};

[A Former User]

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

[CliffordW]

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

[A Former User]

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

[A Former User]

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

[CliffordW]

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

[CliffordW]

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