Question about the design

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.

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, if the events from ManU calendar, that events will be placed on top (if possible) regardless of it's event time with this custom function.

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

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.

MMRIZE / MMM-CalendarExt3

Question about the design #108