MMM-CalendarExt3

[bobbylx]

@MMRIZE said in MMM-CalendarExt3:

@bobbylx
To emphasize this month, I added this to the cells of this month.

.CX3 .thisMonth {
  background-color: rgb(255 255 255 / 10%);
}

rgb(RED GREEN BLUE / TRANSPARENCY); could be what you were searching.

Thanks again, this did it.

[almightyyoshi]

I have a Cozi calendar for dinner and the event comes over as “All: Pork Tenderloin”. Is there any way to get rid of the “All:” (with either Transform or preProcessor) and keep the rest?

[MMRIZE]

@almightyyoshi

eventTransformer: (ev) => {
  ev.title = ev.title.replace("All:", "")
  return ev
},

[almightyyoshi]

@MMRIZE Sigh. I knew it was going to be something easy like that and I was overthinking it. Thanks! Couple more questions:

1. How can I remove the CW? I’ve tried:

.CX3 .cell.cellHeader .cw {
        display: none;
}

.CX3 .cell .cellHeader .cw {
        display: none;
}

.CX3 .cellHeader .cw {
        display: none;
}

and

.CX3 .cell .cw {
        display: none;
}

2. How can I remove the start time in an instance? I’ve tried:

.CX3_currentMonth .event .time.startTime {
        display: none;
}

I got it working with a specific calendar using:

.CX3 .event.calendar_Dinner .time.startTime {
        display: none;
}

[MMRIZE]

@almightyyoshi
For removing calendarWeek number;
https://github.com/MMRIZE/MMM-CalendarExt3/wiki/Examples-%26-Tips

[MMRIZE]

@almightyyoshi
For the second question, I cannot understand. More details for TO-BE and AS-IS be needed. (Show me the example)

[almightyyoshi]

@MMRIZE Perfect. Thanks!

[almightyyoshi]

@MMRIZE I have two instances of CalExt3: monthly (currentMonth) and weekly (currentWeek). Except for one calendar (Dinner), they both currently shows events with the event time like this:

What I’d like is for only the currentMonth instance to show events without the event time like this:

[MMRIZE]

@almightyyoshi

/* css/custom.css */
.CX3_currentMonth .event.singleday .headline .time {
  display: none;
}

Before

After

[almightyyoshi]

@MMRIZE That worked…after I figured out I spelled instanceId incorrectly (I had instanceID). Thanks!

[moosespectacles]

Anyone know of a config that looks identical/similar to the skylight calendar layout? I’m trying to emulate that look and those features, as a starting point, but I’m having trouble with getting the calendar to even display one week or 3 days, only. At the moment I see a week, with another week right next to it, instead of underneath it, as well as week numbers being show. I haven’t been able to figure out how to get rid of the extra days, nor the week numbers.

[sdetweil]

@moosespectacles well the skylight view is one week

so

mode:‘week’,
weeksInView:1,

then you have to use css to remove the weeknumber

[MMRIZE]

@moosespectacles
I think what you want is MMM-CalendarExtJournal, not this module.

[moosespectacles]

@MMRIZE said in MMM-CalendarExt3:

@moosespectacles
I think what you want is MMM-CalendarExtJournal, not this module.

The thing is I want the full calendar functionality, similar to Google calendar/skylight, so I have the ability to change views. Is that possible with either module or another? My main goal is a fully functional Google/skylight calendar clone, in terms of looks and features and use that as my layout, and build the rest of my features/modules off of that, so if I decide I want to add a tab for a shopping list or to do list later on, I can, but at minimum I’d love to be able to have a calendar that syncs with all of my family’s devices to be a family calendar

[danncabrera]

Love this module, and have spent some time modifying some parts of it using CSS and learning a lot on the way. One thing i have not been able to achieve is to have the time format to show exactly how i want it to be.

I want the time for any event to show like 9am / 9:15am instead of the “9:00 a.m.”, to save some space and try to make it more readable. Any ideas on how to achieve this?? i have tried to modify with eventtransformer code in many ways, but all i get is to turn back to 24hr; it seems like it defaults to my locale (ES), and i don’t want to switch since i want everything to be in Spanish.

Any suggestions are welcomed, thank you.

eventTransformer: (event) => {
  // Get the event's start time as a Date object
  let startDate = new Date(event.startDate);

  // Manually extract hours and minutes
  let hours = startDate.getHours();
  let minutes = startDate.getMinutes();
  
  // Determine AM or PM
  let ampm = hours >= 12 ? 'pm' : 'am';
  
  // Convert 24-hour format to 12-hour
  hours = hours % 12;
  hours = hours ? hours : 12;  // If 0 (midnight/noon), set to 12

  // Format minutes (add leading zero if needed)
  let formattedMinutes = minutes < 10 ? '0' + minutes : minutes;
  
  // Construct the final time format (e.g., "9am" or "9:15am")
  let formattedTime = `${hours}${minutes === 0 ? '' : ':' + formattedMinutes}${ampm}`;

  // Manually set the formatted time as the event's start time
  event.startTime = formattedTime;
  
  return event;  // Return the modified event with the new time
},

[sdetweil]

@danncabrera did you try to change the formatting via the module configuration ?
see
https://devhints.io/moment

[MMRIZE]

@sdetweil this module doesn’t use moment module. It is using pure JavaScript Intl function

[sdetweil]

@MMRIZE i stand corrected, sadly few options for formatting

[MMRIZE]

@danncabrera
https://forum.magicmirror.builders/post/101510

[GerrieD]

this month has to much weeks so I am having overlap issues, one of my options is to remove the header (September) but I cant find where to remove it.
I am trying to remove the Month at the top.

		 {
           module: "MMM-CalendarExt3",
           position: "top_right",
           title: "",
           instanceId: '1',
		   config: {
             mode: 'month',
             carouselId: "basicCalendar",
             locale: 'en-ZA',
		     header: "",
             //headerTitleOptions: {month: 'long' , year:'numeric'},
		     eventTimeOptions: {timeStyle: 'short'},
		     useWeather: false,
             maxEventLines: 5,
             firstDayOfWeek: 1,
		     displayEndTime: false,
		     useMarquee: true,
		     displayCW: false,
		     showMore: true,
		     showEnd: false,
		     weekIndex: 0, // From which week the view starts; -1 : last week, 0: this week 2: 2 weeks later, ...
		     weeksInView: 5, // How many weeks will be shown from `weekIndex`
		     fontSize: "18px",
             eventHight: "20px",
		     calendarSet: ['Pieter', 'US_holiday'],
	             }
         },
		

.MMM-CalendarExt3 .module-header {
	text-align:center;
	padding-bottom :30px;
	font-size:80px;
	color:rgb(45,73,69);     /*This is the Header Month Colour  */
	/*text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;*/
	display: none;
}