cell background and event placing on footer (Orig.Title:Question about the design)

[m4nino]

Is it possible to do this?

The first one, the M have the end time 9 and the N have the start time 10, but IRL it does'nt look like this. I've made the picture in photoshop.

The second one, can I change something to always put this event in the bottom of the calendar?

[eouia]

The first one, the M have the end time 9 and the N have the start time 10, but IRL it does'nt look like this. I've made the picture in photoshop.

1. It looks somewhat ideal but makes non-sense. How does it look with 20 min-period events?
   For this kind of purpose, another timeline view is needed instead. MMM-CalendarExt3Timeline might be.

The second one, can I change something to always put this event in the bottom of the calendar?

Very challenging question. To place the top position, you can use eventSorter,

eventSorter: (a, b) => {
	if (a.calendarName === 'ManU') return -1
},

For example, By this custom function, if the events from ManU calendar, that events will be placed on top (if possible) regardless of it's event time

But placing the last position with empty lines? Well, this module is not designed so. This module cannot do that by itself.

3. But... With another module, it can be forced to happen.

You need MMM-ModuleMonkeyPatch

{
	module: "MMM-ModuleMonkeyPatch",
	config: {
		patches: [
			{
				module: "MMM-CalendarExt3",
				method: "getDom",
				patch: function (original, args) {
					let dom = original(args)
					let target = Array.from(dom.querySelectorAll('.event')) || []
					target.forEach((e) => {
						if (e.dataset.calendarName === 'ManU') { // If calendar name is "ManU", put that event to cellFooter area.
							const dt = new Date(+e.dataset.startDate)
							const date = '.date_' + dt.getDate()
							const month = '.month_' + (dt.getMonth() + 1)
							const container = dom.querySelector(`.cell${date + month} .cellFooter`)
							if (container) container.appendChild(e)
						}
					})
					return dom
				}
			}
		]
	}
},

And some CSS tweek. (in css/custom.css)

.CX3 {
  --cellfooterheight: 25px;
}

.CX3 .cell {
  overflow: hidden;
}

.CX3 .cellFooter {
  overflow: hidden;
}

This example doesn't regard error exceptions. Just show you it is possible.

[m4nino]

I will try the module. For the first one, would it be possible to paint the background in the cell instead of show it as an event? I have seen someone make an background in one cell for halloween or some other holiday. Maybe that could be usefull? I will attach another image from photoshop (from my cellphone). Have a look at the pink and blue background.

[eouia]

I’m out of desk now so cannot give you details at this moment. I’ll check this tomorrow.
By the way, you won’t give up the idea of intersection in a single day(22nd day). Is it really essential for your purpose?

[m4nino]

Haha, I will be more than happy for a solutions even without the intersection, but that would have been totally on point.

I have my children half time, change with their father on wednesdays. Therefore Im thinking about an nice way to add the schedule into the calendar. It’s not static though, have to be possible to easy change color for day if we change the schedule one week.

[eouia]

Interesting.

• there would be only 2 conditions at any moment, A or B, not else.
• only one intersection possible in a day, not more than once.
  Right?

[m4nino]

Yes, that’s right!

[eouia]

Conditions

• Only consider event TurnA and TurnB, (no TurnC or other else)
• Distinguish events by only obvious event titles.
  • Identifiers are TurnA and TurnB. e.g. BlahBlahTurnABlah will be regarded as TurnA. But turn A will not be recognized.
  • TurnA and TurnB will also be problem, so keep the rule.
• Each event should be long enough to over night.

Configuration

// In config of module CX3
manipulateDateCell: (cell, events) => {
   if (cell.dataset.events < 1) return
   const cellDate = new Date(+cell.dataset.date)
   const date = cellDate.getDate()
   events.forEach((event) => {
   	const keyMap = {
   		'a' : 'TurnA', // 'TurnA' is the part of event title to target, 'a' is the class name to assign
   		'b' : 'TurnB',
   	}
   	if (!Object.values(keyMap).some((name) => { return event.title.includes(name) })) return
   	for (const [ classKey, searchTitle ] of Object.entries(keyMap)) {
   		if (event.title.includes(searchTitle)) {
   			cell.classList.add(classKey)
   			if (date === (new Date(+event.startDate)).getDate()) cell.classList.add(classKey + '-start')
   			if (date === (new Date(+event.endDate)).getDate()) cell.classList.add(classKey + '-end')
   		}
   	}
   })
}

To adjust to your case, modify TurnA and TurnB in keyMap parts of the source. You have to choose a title carefully that is unique to separate from other normal events.(e.g. @Father, @Mother)

CSS

.CX3 {
 --color-a: rgb(255 200 200 / 50%);
 --color-b: rgb(200 200 255 / 50%);
}

.CX3 .cell.a {
 background-color: var(--color-a);
}

.CX3 .cell.b {
 background-color: var(--color-b);
}

.CX3 .cell.a-start.b-end {
 background: linear-gradient(110deg, var(--color-b) 40%, var(--color-a) 40%);
}

.CX3 .cell.b-start.a-end {
 background: linear-gradient(110deg, var(--color-a) 40%, var(--color-b) 40%);
}

[eouia]

Does not it look like your purpose?

[eouia]

Ah, Here.

 config: 
             {
             weekIndex: 0,
             locale: 'sv-SE',
             maxEventLines: 10,
             eventHeight: '22px',
             firstDayOfWeek: 1,
             calendardfSet: ['a', 'TurnB'],
             useSymbol: false,
             useWeather: false,
  }, // <=== Here.
               manipulateDateCell: (cell, events) => {
               ..

manipulateDateCell... should be included in the config of module. Your bracket makes this property out.

[eouia]

and there is calendarSet mistypo in your config also. (Not affected though.)

[m4nino]

First of all! Thank you, for letting me know the mistypo. I have been wondering why the calendarSet did'nt work for me, now it does!

And then, the intersection thing and the colored background is amazing. Look at it. That's a perfect view. You made it!!

But the monkeymodule, I do something wrong. The purple event is gone when I add it with copy paste css and config from you. If I change the overflow to visible, I can see it, but they are drowning. They are supposed to be on the 14th and 15th november. I have tried to change the cellfooterheight with no difference. Can you see something strange? Maybe it's collide with something else in my css? I have changed alot in the css overall so maybe this is'nt going to work for me.

Config

{
	module: "MMM-ModuleMonkeyPatch",
	config: {
		patches: [
			{
				module: "MMM-CalendarExt3",
				method: "getDom",
				patch: function (original, args) {
					let dom = original(args)
					let target = Array.from(dom.querySelectorAll('.event')) || []
					target.forEach((e) => {
						if (e.dataset.calendarName === "Eskola") { // If calendar name is "Eskola", put that event to cellFooter area.
							const dt = new Date(+e.dataset.startDate)
							const date = '.date_' + dt.getDate()
							const month = '.month_' + (dt.getMonth() + 1)
							const container = dom.querySelector(`.cell${date + month} .cellFooter`)
							if (container) container.appendChild(e)
						}
					})
					return dom
				}
			}
		]
	}
}, 

CSS

.CX3 {
  /* you CAN modify these values; but SHOULD NOT to remove */
  background-color: rgba(255, 255, 255, 1);
  border-radius:20px;
  padding: 14px;
  --color-a: rgb(255 118 169 / 10%);
  --color-b: rgb(189 227 255 / 25%);
  --celllinecolor: #718187;   
  --cellbgcolor: #000000;     
  --cellheaderheight: 25px;
  --cellfooterheight: 25px;
  --defaultcolor: #444345;
  --eventheight: calc(var(--fontsize) + 4px);
  --totalheight: calc(var(--eventheight) * var(--maxeventlines));
  font-size: 25px;
  color: var(--defaultcolor);
  line-height: calc(var(--eventheight));
  }  

.CX3 .cell {
  overflow: hidden;
  border: 1.8px solid var(--celllinecolor);
  background-color: var(--cellbgcolor);
  height: 250px;
  margin: 1.8%;
  margin-bottom: 0%;
  background-color: rgb(255 255 255 / 87%);
  border-radius: 22px;  
}  

.CX3 .cellFooter {
  overflow: hidden;
}

[eouia]

Without full configuration and whole CSS, I cannot tell you anything. But, what I found is;
The height of cell is CALCULATED by many factors like this.

.CX3 .cell {
...
  height: calc(
    var(--cellheaderheight) + var(--cellfooterheight) +
      calc(var(--eventheight) * var(--maxeventlines))
  );
...
}

And --eventheight is calculated from --fontsize, and others goes on like this. And some times these values would be changed dynamically, so auto-calculation is essential.

But you override this as 250px fixed value. So it will not match with other calculated values.
How to solve this;

• Calculate all related height by your hand, and assign proper values.
• Or, just adjust other value instead of 250px to the cell to match with module's calculation. Many shoot & aim trials would be needed.
• Or, just adjust fontsize, eventheight, maxeventlines, cellheader, cellfooter ... to match with your ideal design. And adjust also minor properties for that purpose.

Sorry, this module plays CSS too heavily, so even a small change could make a big butterfly effect.

[m4nino]

I did got the monkeymodule right after a while. I did remove the CSS and copy paste back step by step. But then, I made a mistake again and the view went almost like this. AND I LOVE IT. Thank you for giving me this. The first idea was to have another calendar in the monkeymodule, but this went better than that! I really appreciate it. Simple, nice view.