MMM-CalendarExt3

[MMRIZE]

@gonzonia

This might be what you want.

// config/config.js

{
	module: "MMM-CalendarExt3",
	position: "bottom_bar",
	header: "Whatever",
	config: {
		mode: 'month',
		cellDateOptions: { day: 'numeric' },
		eventHeight: '44px',
		maxEventLines: 3,
		displayEndTime: true,
	}
},

/* css/custom.css */
.CX3 .event .headline {
  flex-flow: row wrap;
  justify-content: flex-end;
}

.CX3 .event .headline.useSymbol .symbol {
  display: none;
}

.CX3 .event .headline .title,
.CX3 .event .headline .time {
  height: var(--fontsize);
  line-height: 100%;
  text-overflow: ellipsis;
}

.CX3 .event .headline .title {
  width: 100%;
  text-align: left;
}

.CX3 .event .headline .time {
  order: 4;
  text-align: right;
  width: 40%; /* It depends on your timeFormat length */
}

.CX3 .cellHeader .cellDate {
  line-height: 100%;
}

But this CSS is not configured in detail. It may have some bug or ugly look with some dimensions or environment. I prove the chance only and you can test and adjust it by yourself.

[gonzonia]

Thanks for all the help!
Ideally I was hoping for weekly view but where the first day is the current day, so that on Friday I can still see what’s coming up in the next week.

I understand that CX3A shows this information but it’s not in the same format and I prefer the look of the weekly format with CX3

@MMRIZE said in MMM-CalendarExt3:

Weird. cellDateOptions: {day:‘numeric’} should show only the number of the day. What is your locale? or check the typo.

Locale is en-US.

I’m in weekly view.

It’s only on the first of the week and the current day. I’ve worked around it in CSS but I wouldn’t have expected it to show using

cellDateOptions: {day:'numeric'}

This image is without any custom CSS applied

This is the config.

{
		  module: "MMM-CalendarExt3",
		  position: "lower_third",
		  classes: "SceneFamily",
		  header: 'Family Week',
		  config: {
			mode: "week",
			instanceId: "FamilyCalendar",
			weekIndex: 0,
			firstDayOfWeek: 0,
			weeksInView: 1,
			locale: 'en-US',
			maxEventLines: 5,
			firstDayOfWeek: 1,
			calendarSet: ['us_holiday', '1', '2', '3', '4', '5'],
			useWeather: false,
			displayWeatherTemp: false,
			useSymbol: true,
			fontSize: "16px",
			displayEndTime:true,
			
			
		  }
		},

[MMRIZE]

@gonzonia
???
In your configuration, there is no cellDateOptions.
see my previous post for config.js

[gonzonia]

@MMRIZE Ha! I swear I’d tried that! When I did it would just show it as a numeric month and add the year.

Working now though. Thanks

[tjat]

@MMRIZE first, thank you for your development and continued efforts on this module. It is the centerpiece of my home dashboard. I am interested in incorporating user interaction to my calendar module. For instance,is there capability to display the prior or next month based on a user swiping or hitting an arrow key on an attached keyboard? I know other modules are needed to feature event listeners for those actions but I’m not sure if cx3 can handle the notifications those would pass as is.

Alternatively if this would need serious coding, would running multiple instances of the module work (each for a different month) and showing/hiding as appropriate?

(Long term, My dream state for my dashboard is an applet to popup and let the user add/modify an event directly from the screen and update my Google calendar, but that’ll be the last item in my list!)

[MMRIZE]

@tjat

• see the “glance” by notification parts in readme.
• And multi-instance also be possible.

[tjat]

@MMRIZE

Thanks. I was able to build a simple module to advance the month via arrow keys using glance. Let me know if that’d be useful to share anywhere.

This question is basic but driving me nuts, but is it possible for the calendar title to include the year? For instance, it now says “July” but I’d like it to say “July 2023”.

[MMRIZE]

@tjat

headerTitleOptions: {
  year: 'numeric',
  month: 'long',
},

But the order of text would be decided by locale. So this will show 2023 July or July 2023. (and comma included/not, punctuation mark included/not, … depends on the standard rules of the culture by the locale.)
If you want to adjust the order or composition of words, you may need CSS customization additionally.

[BKeyport]

@MMRIZE hey, is there a way to increase the size of the month name header? That’s the one bit I’d like to change on my setup.

I’m now using your module for this month, then mine for upcoming. 😉

[pastormingle]

Calendarext2 to Calendarext3 cofiguration is working the same. I’ve upgraded to ext3 and complete wiped and restarted magicmirror with a clean install. Ext3 doesn’t seem to have some of the same functionality i had in ext and ext2. I am attaching a screen shot of what i am looking to achieve and needing some guidance. Can someone point me to couple of configuration files that might work to achieve the same functionality.

[MMRIZE]

@pastormingle
What does it mean the same functionality? Maybe equivalent, but not the same.
And if you are satisfied with CX2, just leave it as it works. :)

[MMRIZE]

@BKeyport

For the special calendar, (You should assign instanceId: "specialCalendar" in config)

.module.MMM-CalendarExt3:has(.CX3_specialCalendar) .module-header {
  color: red;
  font-weight: bold;
  font-size: 2em;
}

will show;

If you want to apply globally or have only one instance of the module;

.module.MMM-CalendarExt3 .module-header {
...
}

will work.

[MMRIZE]

@tjat
@MMRIZE said in MMM-CalendarExt3:

But the order of text would be decided by locale. So this will show 2023 July or July 2023. (and comma included/not, punctuation mark included/not, … depends on the standard rules of the culture by the locale.)
If you want to adjust the order or composition of words, you may need CSS customization additionally.

This is my bad. The module header of this module is not refined to be possible to be a conjunction. So you need to set up your locale for your wish.
Or if you want really that feature, I’ll consider updating it.

[pastormingle]

@MMRIZE i changed due to time zones not displaying correctly. I having meetings that are at times from other countries and it wouldn’t display correctly and as Ext3 is the most current it was suggested to upgrade to it… Then my Raspberry PI SD card crashed and i lost my original configuration. So now it’s a learning curve either way.

[pastormingle]

@pastormingle Is there a location were i can look at more detailed instructions on Ext3 or some configuration files that i can look at?

[MMRIZE]

@pastormingle
I will show you some examples tomorrow.

[pastormingle]

@MMRIZE Thanks.

[tjat]

@MMRIZE No worries, it worked perfectly.

My latest issue is that I’m struggling to refresh the calendar when I add a new event to my google calendar. I’m temporarily working on a local copy to play around with the JS and have this step currently. Would this work or is there an easier/better way that you’ve already built?

forceRefresh: function() {
   console.log("forceRefresh called");

   if (this.refreshTimer) {
     clearTimeout(this.refreshTimer);
     this.refreshTimer = null;
   }
   this.tempMoment = null;
   this.stepIndex = 0;
   this.updateDom(this.config.animationSpeed);
 }

[sdetweil]

@tjat ext3 gets its data from the default calendar module…

there is no notification to force refresh its content. only the fetchInterval.

[tjat]

@sdetweil so do I instead need to cause the default calendar module to refresh with my google calendar content?

Everything updates when I close and reload the magic mirror so just trying to update on demand within the same instance.