MMM-CalendarExt2

[mmmmh]

I have two views in one scene and need some layout/styling help. One row view shows the next 7 days and a column should show as many events as possible from 8 days onwards (a preview). For more precise placement, I created my own regions and added them to the index.html template.

The next-7-days daily view is at the bottom of the screen and behaves nicely. The preview column is in the center of the screen and regrettably runs over the next-7-days view.

In a daily column view, how can I skip days without events?

Which style element do I need to modify in custom.css to have the column content to stop at precise coordinates and not spill over other modules?

I tried limiting the region either with a bottom-margin or height value, both do not apply.

Here’s the style that doesn’t work

.region .preview {
    border: 1px #831e4d solid;
    position: absolute;
    left: 480px;
    width: 400px;
    top: 390px;
    height: 550px;
}

[A Former User]

@mmmmh

1. Give your view className to control more precisely.
   For example,

{
  title: "Remove Empty Slot",
  name: "DailyView",
  mode: "daily",
  calendars: [],
  position:"top_left",
  hideOverflow: false,
  slotCount: 7,
  className: "remove_empty_slot"
},

Then modify your css/custom.css

.CX2 .remove_empty_slot .eventCount_0 {
  display:none;
}

[mmmmh]

@Sean That works nicely for skipping days without events, thanks.

What can I do about the overlap of the content. I can’t limit the view height in the config file or in the class style.

[A Former User]

@mmmmh
can u tell me more details? even picture would be a help to understand your expect.

[BKeyport]

@Sean You know, I was just wondering how to get rid of empty days. Thanks!

[mmmmh]

@Sean said in MMM-CalendarExt2:

@mmmmh
can u tell me more details? even picture would be a help to understand your expect.

Here’s an example (I disabled other modules).

[A Former User]

@mmmmh
You can set hideOverflow:true and slotMaxHeight:100px. If your view has 5 slots(with column type), The height of the view will be (100 + @) * 5. @ would be some additional elements like some margins or title area. Anyway, with this calculation, you can adjust and estimate the height of the view somehow.
Or you can put this 2 view in same position(bottom_bar?), in that case, the views will be stacked not overlapped. The order will be what you ordered in configuration.

Or, just use another position like bottom_bar and top_right.

[mmmmh]

@Sean
Thanks for the constructive help. I was already using different positions. Stacking within the same position doesn’t really work:

Slot limiting (and two different positions) seems to be (closer to) what I want to accomplish:

Another workaround would probably be to work with separate instances of the module.

[A Former User]

@mmmmh
In your picture (trial for stacking),
You probably have trouble with styling a daily view. I think it is about the view’s location and width. In that case, you can assign className to control specific view details with CSS.

[mmmmh]

@Sean
Thanks for the remark. Stacking in the same position but with a different (additional) class for the column kinda works but there is still overlap (in this instance I am not limiting the slot height and count in the column, I would like to have as many entries as possible in the column):

[mmmmh]

I found a workaround. I made the background of the lower part black. : )

In the last screenshot Thu. 28 takes up so much space, even when I enable hideOverflow. I think have to remove some hardcoded 150px in .slotContent but I can’t get to it.

[mrmagoo_83]

Trying to figure out two things:
One: I got the event title to wrap which is what I want, but it causes issues when there is an event following the one that wraps as you can see in the picture.
Second: How do I cut the overall height down of the whole thing? There is a lot of empty space, I’d like to limit the events per day to 3 and reduce the overall height of the calendar.

[A Former User]

@mrmagoo_83

1. I think you’ve modified CSS for sending event time to the right side, It could make the confusing wrapping. hmmm hard to explain. sorry for my poor English. What kind of method did you use? float right?, By default this module usually use flexbox model. Try another approach with using flex.

2. adjust slotMaxHeight of view.
   https://github.com/eouia/MMM-CalendarExt2/wiki/2c4.-View:week,-month

[mrmagoo_83]

Ok, got the overall height down to manageable. I also reset the custom css work to time first, and all that. What I am looking to do is wrap the title of the event to multiple lines if it is too long, in doing so the event slot needs to increase, but when I do this, they still overlap like in the previous picture. I am very new to CSS so, I could easily have made a mistake.

[code999]

@Sean @mrdenmark
Thanks for both of your help. I got it where I wanted it.

@Sean Thanks for the module, its great! keep up the good work and awesome support.

[code999]

I do have another question on the ics file. I am using one from a region but it does not seem to work, would you know why?
i works for google, outlook and others. Thanks

link… https://recollect.a.ssl.fastly.net/api/places/5C168558-A4F7-11E4-B82A-04208E6A6F5F/services/224/events.en.ics?client_id=B40A0DCC-1138-11EA-87AC-FC5DCE1212EE

[jani.karna]

I really appreciate the module and it is (almost) exactly what I want. I still looking the same thing as @mrmagoo_83 that I could wrap the events in multiple lines when needed.

Also, is there a way to make events as wide as the column? Now it is slightly narrower. Here’s a picture of what I mean.
https://www.dropbox.com/s/9iosscweizpthrb/IMG_0603.jpg?dl=0
Can I also shrink the gap between events vertically somehow?

[scuppasteve]

I really like this module and unlike the regular Calendar app is able to deal with DST.

I have a calendar of just my kids chores to do today. All i want is to display the chores that are today, in the calendar they are all day events. So i would like the “ends in xx hours” to go away altogether ideally, but at worst i would just like it to say “Today”. Also I would like to make the slot background transparent and the slot text white. I know that is in CSS, but don’t see where to make it transparent.

		{
			module: 'MMM-CalendarExt2',
			config: {
				updateInterval: 1000*60*240,
				calendars : [
					{
						name: "Chores",
						scanInterval: 1000*60*240,
						url: "CAL URL",
					},
			  	],
			  	views: [
					{
						name: "Chores",
						position: "top_right",
						mode: "current",
						hideOverflow: false,
						slotTitle: "Kid's Chores",
						slotMaxHeight: "75px",
						slotCount: 10,
						maxDays: 1,
						locale: "en",
						calendars: ["Chores"],
					},
			  	],
			  	scenes: [
					{
				  		name: "DEFAULT",
					},
			  	],
			},
		},

[A Former User]

@jani-karna

1. Slightly narrow event’s width is intentional to avoid margin of error on calculation. It is hardcoded. But if you want to modify it by yourself,
   https://github.com/eouia/MMM-CalendarExt2/blob/a5d509ada997034f91e0790ad72e87512cb24c60/CALEXT2_Slot.js#L250

eventDom.style.width = width - 15 + "px"

Change 15 to what you want.

Can I also shrink the gap between events vertically somehow?

Tell me more exact details? Even a picture will help.

[A Former User]

@scuppasteve
The default method of displaying time on agenda views(current and upcoming) is defined as relative form. So, you can use just useEventTimeRelative: false, to display event time absolute format.
But what you want is just removing time of events from specific calendars or specific views, you can control it with CSS.
For example, when you want to hide time of all events from Chores calendar on current view, try this.

...
calendars : [
  {
    name: "Chores",
    scanInterval: 1000*60*240,
    url: "CAL URL",
    className: "CHORES_CAL"
  },
...

Then, add this code to your css/custom.css

.CX2 .current .CHORES_CAL .eventTime {
  display:none;
}

This means hide eventTime of CHORES_CAL of current view. Of course you can specify your target in other ways.
And you might need some additional CSS adjustment to beautify the empty area. Try it yourself.