MMM-CalendarExt3

[redink]

Can anyone help me make one last tweak? I would like to get rid of the icon next to the event name and display the event time in just a 24 hour format (23:30 instead of 11:30 PM). Here’s my current config

{
  module: "MMM-CalendarExt3",
  position: "bottom_bar",
  title: "",
  config: {
    mode: "week",
    instanceId: "basicCalendar",
    locale: 'en-EN',
    weekIndex: 0,
    weeksInView: 4,
    maxEventLines: 5,
    firstDayOfWeek: 0,
    fontSize: "22px",
    eventTimeOptions: {
      hour: "2-digit",
      minute : "2-digit"
    }, 
    useSymbol: false,
    calendarSet: ['School', 'Family'],
  }
},

[MMRIZE]

@redink

1. Add this into your custom.css

.CX3 .event.singleday:not(.useSymbol)::before, 
.CX3 .event.singleday.useSymbol .symbol.noSymbol::before {
  display:none; 
}

2. Use this eventTimeOptions;

eventTimeOptions: {
	hour12: false,
	hour: "2-digit",
	minute : "2-digit"
}, 

[redink]

@MMRIZE Perfect! Thank you so much.

[MMRIZE]

1.3.0 (2023-04-17)

• CHANGED: Shared library to fix many issues.
• FIXED: some typo.
• FIXED: flickering for many reasons (logic error to treat notifications)
• ADDED: CX3_RESET_DATE notification (to reset instantly from glancing)
• ADDED: MMM-TelegramBot user implementation example
• ADDED: preProcessor for better handling of raw-data priorly
• ADDED: manipulateDateCell to manipulate date cell DOM after drawing
• CHANGED: Timing of eventFilter and eventTransformer is delayed for better-handling event data after regularized

[MMRIZE]

@bicolorbore586

Since 1.3.0, with manipulateDateCell callback function in configuration, you can handle date cell itself. So you can achieve what you want.

Here is a simple example; (more tweek might be needed to match with your wants wholely)

manipulateDateCell: (cell, events) => {
	if (Array.isArray(events) && events.some(e => e.calendarName === 'Holidays')) {
		let dateIcon = document.createElement('span')
		dateIcon.classList.add('fa', 'fa-fas', 'fa-fw', 'fa-gift')
		dateIcon.style.color = 'red'
		dateIcon.style.fontSize = '0.9em'
		let header = cell.querySelector('.cellHeader')
		let celldate = header.querySelector('.cellDate')
		header.insertBefore(dateIcon, celldate)
	}
}

Anyway, it could be possible.

[bicolorbore586]

@MMRIZE
Hi MMRIZE, this looks amazing. I will be sure to update and give it a whirl!

[zelmo]

Is there anyway to make it show the end time in the montly calendar?

Like:
7:00 - 8:15 Morning Rutine
instead of
7:00 Morning Rutine

That would help out lots when looking at it to make sure you don’t double book yourself if you don’t remember how long the specific event you are going to will last.

[MMRIZE]

@zelmo
It is intentionally designed so. Not enough width to display endTime together. Use MMM-CalendarExt3Agenda together to see details.

[MMRIZE]

1.3.1 (2023-05-02)

• CHANGED: Refactoring some codes, the structure of the events, CSS.
• ADDED: displayEndTime: true => Show end time of the event. (hidden by default) (Requested from @zelmo)
• ADDED: displayWeatherTemp: true => Show max/min temperature of the forecasted days.
  

[MMRIZE]

@zelmo updated for you.

[zelmo]

@MMRIZE Thanks a lot! Was about to suggest it just in case someone would run it horizontal. Then it might be useful and enough space. I’ll test out at least. Thanks again.

[Studio472]

I added an mlb team calendar. The little baseball symbol shows up on my google calendar on the web browser. In this module, the icon isn’t coming through. Is there a module or font-pack I need to install on my raspbizzle?

[MMRIZE]

@Studio472
Maybe emoji font should be installed to use/display emojis.

https://raspberrypi.stackexchange.com/questions/104181/colored-emojis-in-chromium

[whimsicality]

Hi, thanks for the work on this module. I am struggling to get it to load. I finally ran the npm dev through terminal and it is coming up with a number of errors… “failed to retrieve device information”, “failed to open kms_swrast”, “failed to open swrast”, “gpu process exited unexpectedly” exit_code=11", “failed to send GpuControl.createcommandbuffer” and then it looks like electron exited with signal “SIGINT”.

Is this something I need to troubleshoot with the module itself or does this mean I need to fix something elsewhere? thanks!

[sdetweil]

@whimsicality
for the mesa errors this is an electron/graphics engine problem. but you can turn off gpu use.

in the script that starts mm, ~/MagicMirror/installers/mm.sh if you used my install script, add

export ELECTRON_DISABLE_GPU=1

above the line that does npm start

[kasperinline]

@fedale
I’m not able to get rid of the text “CW”. Can you help me, by sharing your lines.

Regards

[kasperinline]

@kasperinline said in MMM-CalendarExt3:

@fedale
I’m not able to get rid of the text “CW”. Can you help me, by sharing your lines.

Regards

Got i’t by myself, and learned a little more :-)

.CX3 .cw::before {
content: "CW ";
display: none;
}

[MMRIZE]

@kasperinline
Do that in your ‘custom.css’ not in the ‘MMM-CalendarExt3.css’

[kasperinline]

@MMRIZE said in MMM-CalendarExt3:

@kasperinline
Do that in your ‘custom.css’ not in the ‘MMM-CalendarExt3.css’

Yes of course :-)

Always in the ‘custom.css’

[Studio472]

I have an MLB calendar displaying my favorite team. West coast evening games span 2 days in my calendar (which looks goofy).

Is there a way to transform an event to only run 1 hour so it displays in a single day?