MMM-CalendarExt3

[MMRIZE]

@fedale
For CX2, I thought it was not pretty to have the week number column separately, and it is a bit of waste to occupy the expensive real estate of the MM screen, so in CX3, I put the week number into the cell as small as possible.

Conclusively, a separated week number column is not possible in CX3 atm, And I think it would be undesirable, so I’ll not consider it.

[fedale]

Ok thanks for the feedback.

I have another question
The new calendarExt3 and the i cant seem to get this transform fuction to work anymore. I had the transform in the config.js file and the custom.css with different words to get different color on each work, as we have family calendar.
Tried to change it to cx3 without any luck. (/* */ is only to stop the code here.)

Example
/*
transform: function(event) {
if (event.title.search(“Jobb”) > -1) {
event.icon = “ic:outline-work-outline”;
event.className = “Jobb”;
}

*/

In the custom.css:
/*
}
.CX3 .Jobb.fullday {
background-color:rgba(0,128,128);
color:#000;
}
.CX3 .Jobb {
background-color:rgba(0,128,128);
color:#000;
}

*/

[MMRIZE]

@fedale
‘eventTransformer’

[MMRIZE]

Updated 1.2.5 (2022-11-04)

• Added Display legend of the calendar (displayLegend: true and when you set the calendar name on the calendar module)
• Fixed Some CSS fixture

[Lilleberg]

@MMRIZE I’m trying to update the module but it seems like the update doesn’t work. Maybe I’m doing it wrong? I have copied in the commands I’m using in the terminal. According to that it looks like the update is working fine. But when I start the MagicMirror there is still a notification at the top that the CalendarExt3 module is “2 commits behind the main grenen”.
Also I can’t display the legend when I insert this under the config in the CalendarExt3 module.

lilleberg@raspberrypi:~ $ cd ~/MagicMirror/modules/MMM-CalendarExt3
lilleberg@raspberrypi:~/MagicMirror/modules/MMM-CalendarExt3 $ git pull
Updating 04883bc..ecd6b7a
error: Your local changes to the following files would be overwritten by merge:
	MMM-CalendarExt3.css
	MMM-CalendarExt3.js
Please commit your changes or stash them before you merge.
Aborting
lilleberg@raspberrypi:~/MagicMirror/modules/MMM-CalendarExt3 $ npm install

up to date, audited 1 package in 598ms

found 0 vulnerabilities

[Lilleberg]

@MMRIZE My language and locale are Norwegian. Using nb in the config file.

[Lilleberg]

@MMRIZE Thanks!

[sdetweil]

@Lilleberg said in MMM-CalendarExt3:

error: Your local changes to the following files would be overwritten by merge:
MMM-CalendarExt3.css
MMM-CalendarExt3.js

looks like u modified the module code, and updated cannot be applied til you fix that.

generally you never edit the source files of a module.all config goes in config.js and all css updates go is custom.css

[bicolorbore586]

Is there an option to hide the week numbers? I’ve managed to remove the ‘cw’ using custom.css (albeit a bit untidy)

[sdetweil]

@bicolorbore586 no config option, just set cw to display:none in custom.css

[almightyyoshi]

I finally found a touch module that I could easily use for the glance notification and have the payload step as 1. However, two things are happening:

1: on the first press it’s going back to June. Second press goes to April. Third press goes to August. Fourth press goes to December (which would be correct, however, due to the other jumps it could just be random)

2: no events are populating in the glance

Here’s what I have for the button:

{
      module: "MMM-TouchButton",
      position: "top_left",
      config: {
          buttons: [
               {
                name: "Next",
                icon: "fa fa-calendar-days",
                notification: "CX3_GLANCE_CALENDAR",
                payload: {instanceID: [], step: [1]},
                  },
                ]
              },
           },

And here’s my CX3 config:

{
            module: "MMM-CalendarExt3",
            position: "middle_center",
            config: {
                    mode: "month",
                    instanceID: "currentMonth",
                    firstDayOfWeek: 0,
                    useSymbol: true,
                    glanceTime: 60000,
                    calendarSet: [],
            }
        },

Any thoughts?

[MMRIZE]

@almightyyoshi
Not real tested, but I think your config should be like this;

payload: {step: 1},

And about no event populating, It would be related to your maximumEntries , maximumNumberOfDays and boradcastPastEvents options of default calendar module.

[almightyyoshi]

@MMRIZE
That did it. Thanks!

[chadjohn2]

First off, I’m a complete and utter noob with coding. I’m capable enough to get MagicMirror installed and start adding in some of the 3rd party modules. I’m now trying to get into the space of modifying CSS and such for a little added customization.

I’m trying to something that I think should be simple but I cannot get it work for the life of me. I’ve searched the forum and this topic and found a couple pieces but I’m still struggling. Finally got frustrated enough to create an account and post.

I’m trying to change the color of events based on the title of an event coming from a google calendar. The events are coming in fine, just not changing color.

Based on what I have read, I need to use the eventTransformer function. I have put the following into the config.js file (including the full module for total information).

{ 
module: "MMM-CalendarExt3",
position: "bottom_bar",
config: {
			mode: "week",
			weekIndex: "0",
			weeksInView: "2",
			firstDayOfWeek: "1",
			maxEventLines: "8",
			fontSize: "25px",
			eventHeight: "16px"
		},
eventTransformer: function(event) {
if (event.title.search('Daycare') > -1) {
event.className = 'Daycare'
				}
			}	
		}

then in the custom.css file (Trying hot pink hex so it pops out):

.CX3 .Daycare {
background-color:#FF69B4;
color:#FF69B4;
}

For all I know, that’s completely wrong so any help you can provide will be appreciated!

[Wenike]

@chadjohn2 Try removing the }, before your event transformer text (it closes that config section but you need the event transformer in that config section). Also, per the github, your code for the event transformer needs to be something like:

eventTransformer: (ev) => {
  if (ev.title.search('Daycare') > -1) ev.color = '#FF69B4'
  return ev
}

[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']
                         }
                  }
     },
]