MMM-CalendarExt

[Vauxdvihl]

@Sean
I want to play around with the following values

Increase / Decrease “FINAL: SEA7 - OAK 6”
Increase / Decrease “Time (04:05-07:05)”

I am not a programmer :-)

Thanks a lot

[A Former User]

@vauxdvihl
Add this into your MagicMirror/css/custom.css file.

.CALEXT .eventTime {
  font-size: 120%;
  line-height:110%;
}

.CALEXT .eventContent {
  font-size: 140%;
  line-height:110%;
}

You can adjust these values with relative % or absolute px (Or many other various things)

https://www.w3schools.com/cssref/pr_font_font-size.asp

[Vauxdvihl]

@Sean
Thanks a lot
In custom css file a have the following:

div.CALEXT  .event .symbol {
    order:1;
    display:block;
    flex-basis: 30px; // Modify this 
    text-align:center;
    min-width: 50px; // Modify this
    font-size: 150%; // Add this
							}			
					
							
div.CALEXT .events .symbol.emoji {
    font-size: 150%; //Adjust this as your wish. you can use px or %
								}
								
div.CALEXT .events .symbol.font-awesome {
    font-size: 250%; //Adjust this as your wish. you can use px or %
										}
div.CALEXT .tableStyle .eventTime {
    display:block;	
									}		
.CALEXT .eventTime {
  font-size: 80%;
  line-height:110%;
					}

.CALEXT .eventContent {
  font-size: 250%;
  line-height:110%;
					}	

The adjustment of time works fine.
But not of the initial content.

Sorry
But can you please help again

Thanks a lot

[A Former User]

@vauxdvihl
Because your other CSS rules might override that rule. (Simpler rule name might have lower priority). See this. https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Anyway, you can use like this;

 div.CALEXT div.slot div.eventsBoard div.eventContainer div.eventContent {
   font-size: 250%;
   line-height:110%;
 }

(For more exact rule specificity, I should know whole CSS of your MM, but I believe above code enough)

[yoey2112]

Hello @Sean ,
Been playing around with this module for a day now (not very savvy with javascript) and I cannot figure out how to increase the size of my Calendar. I’m using weeks (4 count) and position bottom_bar, but I would like it to take up about a third of the bottom (vertical monitor). I know this must be a change in CSS, but I dont know what to do. Any help would be great!
-Yoey

[A Former User]

@yoey2112
Which parts do you want to grow up? More details I need to help. Image could be a help.

[yoey2112]

So 2 things really. I’d like the Calendar to take up the entire bottom 3rd of the screen.

Second, any suggestions on making it look a little popping?

Thanks!

[justjim1220]

@yoey2112

May I ask how you were able to show blank events?

mine looks like this, all jumbled up and no blanks…

[justjim1220]

@yoey2112

add the following to your custum.css file

 #CALEXT_month.tableStyle {
  max-width:100%;
  width:100%;
  background:none;
}

[justjim1220]

@Sean

Do you see the calendar posted above by @yoey2112 ?

It has blank events instead of collapsed events, I am wanting mine to look like that!

But, I can’t figure out how to get it done!

[yoey2112]

@justjim1220 I added that to my custom CSS but its still fairly small, a little bigger though. Is there any way to adjust the height of that location as well?

[justjim1220]

@yoey2112

what did you add? I have been looking to do this!

the height is self-adjusting per the font sizes and line heights for the table cells.

May be able to figure out a better way if I had the code you used to get the empty cells to show like that.

[A Former User]

@justjim1220
I’ve already sent email for which was talked between us.

@yoey2112
For the whole module width;

.CALEXT .tableStyle {
    margin:auto;
    max-width: 90%; /*  change to 100%  and if you want, you can add field `width` */
}

But it will be affected by your MM body width (By default, it has some margin)

[yoey2112]

@Sean Can I also adjust the height of the calendar? Example, if I wanted the Calendar to take up the entire bottom half of a Vertical screen?

[A Former User]

@yoey2112
Not easy, but I think possible.

It looks you are using weeks (4 weeks) view, So you can adjust the height of each day slot inweeks or months view with this;

.CALEXT .tableStyle td.slot {
  max-height:150px;
  height:150px;
}

Add above codes in your css/custom.css. Adjust the value for your purpose.

Then, in your config,

config: {
...
  views: {
    ...
    weeks: {
      ...
      overflowHeight:150, 
      ...
    },
    ...
  },
...
}

For further details; https://github.com/eouia/MMM-CalendarExt/wiki/Manipulation-of-looks#viewlimit--viewoverflow
But there could be performance issue in RPI; https://github.com/eouia/MMM-CalendarExt/wiki/Performance-Issues

[bokifide]

Hi! Love this module :) thank you.

Just wondering if there’s a way to omit Saturday and Sunday?
Been poking around and I haven’t been able to figure it out =/

Thanks ahead <3 :)

[A Former User]

@bokifide
Add this to your css/custom.css

.day_6 {
  display:none;
}

.day_7 {
  display:none;
}

.CALEXT .tableStyle td {
  width:17%;
}

[bokifide]

@sean said in MMM-CalendarExt:

.day_6 {
display:none;
}

.day_7 {
display:none;
}

.CALEXT .tableStyle td {
width:17%;
}

Worked!! Thank you so much, that’s perfect :)

[Doudy]

Hello,

How can I delete the text ‘in 15 hours’
In addition it does not seem right to me.
Or does this indicate the end of the event?

module: 'MMM-CalendarExt',
position: "top_left",
config: {
		colored: true,
		        system: {
		        show: ['current','daily'],
		        locale: 'fr-be', //when omitted, default value would be your system default locale by moment.js
			showEmptyView: 0,
			fullDayEventLocalize: 0,
			redrawInterval: 30*60*1000, //minimum 60000
			userProfileConfig: 0,
			startProfile: ''
			},
views: {
	current: {
		position: "top_left",
		title: "Aujourdhui",
		limit: 3,

etc...

Thanks![alt text]

[A Former User]

@doudy
I’m on travel, so I’ll reply to you on Monday.