MMM-CalendarExt3

[sdetweil]

@Wenike your transformer is only doing style change,
he wants to change the class , so his transformer is ok

[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