MMM-CalendarExt3

[fedale]

This post is deleted!

[fedale]

I learnt something new, never thought to look into the module folder css file.
Always though only the main.css and custom.css was the only ones to change.

Found the wordning now in MMM-CalendarExt3.css file within the module.
Removing the CW, the way i wanted. Just wanted to share.

MMM-CalendarExt3.css file and remove the CW to only get the week number:
.CX3 .cw::before {
content: 'CW ’
}

[sdetweil]

@fedale u can override that in the custom.css

don’t change the modules files, it will break upgraded and fixes

[bicolorbore586]

@fedale yes, as Sam says, don’t modify the module css, all css work should be done in the custom.css

[fedale]

@bicolorbore586 Thanks guys.

[fedale]

Could i have icons on different words in calendar?
I only have one calendar, but previously cx2 could get with differnt pictures like this example.

 if (event.title.search("Work") > -1) {
	event.icon = "ic:outline-work-outline";
	event.className = "work" 

}
else if(event.title.search(“Trash”) > -1) {
event.icon = “mdi:recycle”;
event.className = “Trash”
}

[sdetweil]

@fedale I think it works the same

[MMRIZE]

@fedale
CX3 has not support Iconify icons yet, only FontAwesome. It would be applied in near future updates.

[bicolorbore586]

Is there a way of getting icons to sit in specific top bars (with the date number) of cells/days?

I use MMM-CalendarExt3 to show my upcoming month, the default calendar to show the next couple of days events and MMM-Birthdays to show upcoming birthdays.

What I would like to do is have a birthday cake icon sat in the date field, so I can see that that date is a birthday, without any written information in the cell, i.e. the white line wouldn’t be there in the image below.

[sdetweil]

@bicolorbore586 no way without changing the module code. can’t move it w css

[MMRIZE]

@bicolorbore586
Sorry, It can’t be done at this moment. In some day, I have a plan to update. I’ll consider your needs at that time.

[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.