MMM-CalendarExt3

[MMRIZE]

@chadjohn2
There were several issues on your code.

1. You didn’t return event object in your eventTransformer function.
   

2. CSS(Cascading Style Sheets) has a Speciality to determine the priority of the definitions by calculation.
   Your .CX3 .Daycare is lower than default .CX3 .event.fullday or .CX3 .event.multiday. So in case of your event is fullday/multiday thing, your color definition would be ignored.
   .CX3 .event.Daycare or .CX3 .event.Daycare.fullday, .CX3 .event.Daycare.multiday would work.

[DDE12]

How do I reference the specific instances of CExt3? Like on different carousel pages, where I would have a month mode on one page and a week mode on another. I have this config:

module: "calendar",
	    position: "top_left",
            broadcastPastEvents: true,
            maximumNumberOfDays: 300,            
            config: {
                instanceId: "FamilyCal",
                fade: false,
                colored: true,
                displaySymbol: false,
	        calendars: [
                        {   
                        name: "Holidays",
		        url: "webcal://www.calendarlabs.com/ical-calendar/ics/76/US_Holidays.ics",
                        color: "rgb(240,175,20)"
                        },
                        {   
                        name: "Dad",
                        url: "https://private.calendar.com",
                        color: "rgb(60,250,60)"
                        },
                        {   
                        name: "Mom",
                        url: "https://private.calendar.com",
                        color: "rgb(250,40,150)"
                        },
                        {  
                        name: "Child",
                        url: "https://private.calendar.com",
                        color: "rgb(180,40,250)"
                        }
		]
	}
},
{
          module: "MMM-CalendarExt3",
          position: "fullscreen_above",
          title: "",
          config: {
                mode: "month",
                instanceId: "FamilyMonth",
                calendarSet: ['Holidays', 'Dad', 'Mom', 'Child'],
                maxEventLines: 5,
                firstDayOfWeek: 0,
                minimalDaysOfNewYear: 1,
                eventHeight: '18px',
                useSymbol: false                
            }
        },*/
        {
            module: "MMM-CalendarExt3",
            position: "fullscreen_above",
            title: "",
            config: {
                mode: "week",
                instanceId: "FamilyWeek",
                weekIndex: -1,
                weeksInView: 5,
                calendarSet: ['Holidays', 'Dad', 'Mom', 'Child'],
                maxEventLines: 5,
                firstDayOfWeek: 0,
                minimalDaysOfNewYear: 1,
                eventHeight: '18px',
                useSymbol: false                
         }
 }

[sdetweil]

@DDE12 for each module you can ADD classes strings , by using the classes:“…”
property after the
module:“… name”

then in pages you can use that name instead of the module name

I prefer to configure pages differently

in pages its

   modules: [
        [  'page1'],
        [  'page2' ]
    ]

then for the modules u want on page1

you add

  classes:'page1',

and for modules on page2

   classes:'page2'

you can do the same for fixed, etc

[DDE12]

@sdetweil
Thank you for looking at this. Is this the proper implementation for your suggestion?

modules:  [
   ['MonthPage'],
   ['WeeksPage']
   {
          module: "MMM-CalendarExt3",
          position: "fullscreen_above",
          classes: 'MonthPage',
                config: {
                     mode: "month",
                     instanceId: "FamilyMonth",
                     calendarSet: ['Holidays', 'Dad', 'Mom', 'Child'],
                }
    },
    {
          module: "MMM-CalendarExt3",
          position: "fullscreen_above",
          classes: 'WeeksPage' 
                config: {
                     mode: "week",
                     instanceId: "FamilyWeek",
                    calendarSet: ['Holidays', 'Dad', 'Mom', 'Child'],
                }
    },
    {
          module: "MMM-Carousel",
                  config: {
                        mode: 'slides',
                        slides: {
                                   "Slide 2": ['MonthPage'],
                                   "Slide 3": ['WeeksPage']
                         }
                  }
     },
]

[sdetweil]

@DDE12 no, I was giving you the config for the MMM-Pages module.

I don’t use Carousel, so not sure there

[DDE12]

@sdetweil
Like so…?

modules:  [
   {
          module: "MMM-CalendarExt3",
          position: "fullscreen_above",
          classes: 'MonthPage',
                config: {
                     mode: "month",
                     instanceId: "FamilyMonth",
                     calendarSet: ['Holidays', 'Dad', 'Mom', 'Child'],
                }
    },
    {
          module: "MMM-CalendarExt3",
          position: "fullscreen_above",
          classes: 'WeeksPage' 
                config: {
                     mode: "week",
                     instanceId: "FamilyWeek",
                    calendarSet: ['Holidays', 'Dad', 'Mom', 'Child'],
                }
    },
    {
            module: 'MMM-pages',
                 config: {
                             modules: [
                                            ['MonthPage'],
                                            ['WeeksPage']
                               ],
                  },
     },
  }
]

[sdetweil]

@DDE12 yes

I would label the pages ( in pages config)

page1
page2

cause that is the order they are shown.

you can have as many modules on a page as u want and can fit of course.

[DDE12]

@sdetweil
Yeah, that would definitely be less confusing. Do I have the classes: “FamilyWeek” and classes: “FamilyMonth” in the right place in the CalenderExt3 config(s)?

[sdetweil]

@DDE12 either can be used in css to select elements to style

[DDE12]

@sdetweil
I’m completely lost now. I thought all of this went in config.js.

[sdetweil]

@DDE12 all of THAT goes.in config.js

but if you want to change the color of the text for the second day of the week

in custom.css

. MMM-CalendarExt3  .weekday_1 {
      color:green;
}

[bicolorbore586]

@fedale @MMRIZE @chadjohn2 I am also trying (unsuccessfully) to have the Calendar event change color depending on which name is in the title.

With the original magicmirror calendar, I’ve used
customEvents: [ {keyword: “Ben”, color: “Brown”} ], which shows the event title and associated symbol in Brown.

In EXT3, using eventTransformer, only the symbol shows in color

I’ve tried to use
eventTransformer: function(event) {
if (event.title.search(“Ben”) > -1) {
event.className = “Ben”;
}
}
with customer.css
.CX3 .Ben {
color: brown;
}

However, this then shows a blank calendar

Have any of you been successful?
Where am I going wrong?

Thanks

[MMRIZE]

@bicolorbore586
You have to return event object in eventTransformer function. When you omit ‘return’ statement in a function, implicitly it is same with ‘return null’

[bicolorbore586]

@MMRIZE have tried that, still doesn’t show anything.

eventTransformer: function(event) {
if (event.title.search(“Ben”) > -1) {
event.className = “Ben”;
return event
}
}

[mumblebaj]

@bicolorbore586 If I am not mistaken, your return goes outside the IF statement

[BKeyport]

@mumblebaj

Try this:

eventTransformer: function(ev) {
  if (ev.title.search(“Ben”) > -1)  ev.className = “Ben”;
  return ev
}

directly off the README.md :

eventTransformer: (ev) => {
  if (ev.title.search('John') > -1) ev.color = 'blue'
  return ev
}

[bicolorbore586]

@mumblebaj so that now means I can see the events again, but still not coloured how I want.

[mike23pizzo]

I’m having some issues with broadcastPastEvents: true. Past events aren’t showing up on the calendar. Below is the default calendar code and the MMM-CalendarExt3 code. As well as a screenshot.

{
			module: "calendar",
			header: "Events",
			position: "top_left",
			config: {
				fetchInterval: "1000",
				colored: true,
				broadcastPastEvents: true,
				calendars: [
					{
						name: "us_holidays",
						url: //URL//,
						symbol: "calendar-check",
						color: "#338FFF",
						broadcastPastEvents: true,
					},
					{
						name: "mikes_cal",
						url:  //URL//,
						
					},
					{
						name: "dinners",
						url:  //URL//,
						symbol: "utensils",
						color: "#FFFB21",
						broadcastPastEvents: true,
					},
				]
			}
		},

{
			module: "MMM-CalendarExt3",
			position: "bottom_right",
			weekIndex: "0",
			config: {
				broadcastPastEvents: true,
				mode: "week",
				firstDayOfWeek: "0",
				refreshInterval: "10000",
				calendarSet: ['us_holidays','mikes_cal','dinners'],
			}
		},

[sdetweil]

@mike23pizzo it’s only set before the calendars list.

what mm version are u on? fix in latest 2.20 for events being truncated

[mike23pizzo]

@sdetweil when I start MM it says Starting MagicMirror: v2.21.0.

When you mention that it’s only set before the calendars list, do you mean as long as it’s listed in the config on the default calendar it should feed down to MMM-CalendarExt3?

EDIT: It seems the past events are now showing. I didn’t change anything in the config file, so I’m not quite sure what fixed it. But as of now they are there.