MMM-CalendarExt3

[roth_nj]

@bicolorbore586 said in MMM-CalendarExt3:

@roth_nj in the config of the module set the ‘mode’ to week. The add the config option ‘weeksInView’ and set that to 4 or 5
Here’s an extract from mine:

{
			module: "MMM-CalendarExt3",
			position: "lower_third",
			config: {
				mode: "week",
				weekIndex: 0,
				weeksInView: 5,
		

As MMRIZE says, it’s in the readme file (under config details). The re-render, as you say is also listed in there, as one of the intervals.

thanks… trust me, i read all that stuff a number of times. it just didn’t click that thats what i meant. im going to go bang my head against the wall now ha ha

[aircliff]

Have another issue I just recently noticed. I have two different modules running, one in day view showing one week worth of calendar. The other is in month view. The day view is set with dayIndex of 0 so the current day is the first day. Day 7 on the view shows no events although they are shown for that day on the month view calendar. I could not find any similar posts with issues in this thread so hoping someone has seen and can provide some help. Here are screenshots for reference. It is always the last day in the day view, so for right now Tuesday the 24th is where the issue lies. I’ve changed weeksInView to 2 and it was always just the last day of the series.

Week View:

Month View:

[MMRIZE]

@aircliff
Maybe the bug. I’ll inspect it. :)

[MMRIZE]

@aircliff
I found where the bug lies on.

https://github.com/MMRIZE/MMM-CalendarExt3/blob/28c3aeabfbc5b0ebc28107831dcbacd125578d0a/MMM-CalendarExt3.js#L436

I’ll fix it tomorrow. :)

[aircliff]

@MMRIZE

Thank you. I actually played with it quite a bit last week and specifically that line and couldn’t get it to work for me. I would end up adding a second week or multiple extra days. Interested to see what you find as the fix.

[MMRIZE]

@aircliff
fixed. (1.6.1)
https://github.com/MMRIZE/MMM-CalendarExt3#history

[MMRIZE]

@BKeyport said in MMM-CalendarExt3:

@MMRIZE the background highlighting issue is shown in my screenshot. If you look at October 11 in the shot, you’ll notice the highlight is smaller than the text.

give enough height to cell header

Same goes for the full day event shown on Nov 2, the highlight is blocking the “2” partially.

Your height of cellHeader is smaller than the fontsize used.
By default it is defined as --cellheaderheight

That being said, I’m gonna work on expanding my module to do a big calendar instead. I’m not getting what I want even with monkeypatch, and it’s getting too confused.

As I showed you, it is possible, but it doesn’t mean easy.
Anyway, this module is not designed to show events like that, however, I introduced to you how to override by monkey-patching, but if you are not satisfied, the only way would be to build a new module for that purpose.

[aircliff]

@MMRIZE

Worked like a champ. Thanks for the help.

[roth_nj]

Formatting question… not sure if it’s best for to ask here or some place else….

I currently have the icons turned off, and 6 color coded calendars being displayed. Right now there is the small colored dot next to each and I have it color coded and the legend turned on and that’s all good….

How would I go about formatting each entry so it has the “apple” look? Like a light shaded transparent box around each entry that pulled the tint from the calendar color. Also I would then off the colored dots

[MMRIZE]

@roth_nj
I think it could be achieved by CSS modification. However, without details, I cannot guess what you exactly want. Do you have a sketch for it?
(By default, this module is designed to imitate the Apple calendar app or Fantastical app. I’m sorry if you think it doesn’t look alike. )

[roth_nj]

@MMRIZE said in MMM-CalendarExt3:

@roth_nj
I think it could be achieved by CSS modification. However, without details, I cannot guess what you exactly want. Do you have a sketch for it?
(By default, this module is designed to imitate the Apple calendar app or Fantastical app. I’m sorry if you think it doesn’t look alike. )

sorry if theres any misunderstanding. i think the module is great and works awesome. i have my pi hooked up to a 40" tv that i am going to frame and hang. so with the detail and how close just trying to tweak the visuals now that i have everything functioning well. one of the things i’ve noticed with my set up is the contrast between all the white text and black background. from what i’ve researched it is a drawback to using a TV instead of a computer monitor or smaller device. adjusting the contrast/brightness on the tv itself made the pictures look like crap. i think this will help a by separating the white text from the black background.

what i meant is to have the type of transparent tinted box around (or behind) the calendar entry texts in the style of apples current design looks. heres a quick think i made in powerpoint.

thank you again for all you help

[MMRIZE]

@roth_nj
By default, without any modification; This module has 2 style metaphor for event. One is for fullday/multidays event and one is for normal event.

Fullday/multidays event looks a boxed, background-filled to be distinguished with a normal event.

Anyway, if you want that a normal event has same looks with fullday events - boxed and filled.

Add these lines to your custom.css

.CX3 .event.singleday .headline:not(.useSymbol)::before,
.CX3 .event.singleday .headline.useSymbol .symbol.noSymbol::before {
  display: none;
}

.CX3 .event.singleday {
  background-color: var(--calendarColor);
  mix-blend-mode: difference;
  border-radius: 4px;
  color: var(--oppositeColor);
}

.CX3 .event:not(.fullday) .headline .time {
  color: var(--oppositeColor);
}

[MMRIZE]

[UPDATE] 1.7.0

• skip of event Object property (Example)
• skipPassedEventToday of config
• eventTime color in multiday event
• more, morePopover feature.
• Global object check. (For compatible with not browser environment)
• Support iconify
• auto-detect firstDayOfWeek and minimalDaysOfNewYear
• weekends of config

Usually I just describe outlines of update here, but in this update, I need to explain somethings with images, so I did it.

I opened WIKI for some details.

Using Iconify

Even though fontawesome is the default icon framework of MM, there are many needs of iconify. And I prefer it to font-awesome. Now you can use iconify icons by config value useIconify: true

// In your calendar module config
defaultSymbolClassName: '', // <-- Important to identify iconify properly.
calendars: [
  {
    color: "red",
    symbol: "flag:us-4x3",
    url: "https://ics.calendarlabs.com/76/mm3137/US_Holidays.ics?foo"
  },
  {
    color: "red",
    symbol: "fa fa-fw fa-flag", // <-- Important when you want to use font-awesome also together.
    url: "https://ics.calendarlabs.com/76/mm3137/US_Holidays.ics?bar"
  },
],

WARNING
To use iconify, you should set defaultSymbolClassName: '', in your default calendar module. Usually, it is enough when you hide the original default calendar module to use with CX3. But if you want to use font-awesome icons together, you should add font-awesome classnames (e.g fa, fas, …) by yourself.

displaying startTime and endTime in multi-day event.

a Fullday event doesn’t need startTime and endTime. And there is not enough place to show endTime for a single-day event. But for multi-day events, There would be enough space to display the endTime of the last day of the period. And it would be convenient. The position where the endTime would be displayed will be near the event’s last day.

If you don’t want to show it, add this to your css/custom.css

.CX3 .event.multiday:not(.continueToNextWeek) .headline .endTime {
  display: none;
}

more for overflowed events.

By the limitation of maxEventLines (and due to the resolution of the MM screen), overflowed events on the day had to be ignored. It was inconvenient.

Now, CX3 can show how many events are ignored in the day. You can pop over the whole events list of that day by clicking/touching the header of the cell or more marks(White rounded number). The popover contents could be scrollable by touch/drag (if possible)

NOTICE Firefox, Opera Mobile, Samsung Browser cannot handle a new de facto starndard popover feature yet.

skipPassedEventToday

Even though it would be helpful to use the new more feature, Still overflowed events would be inconvenient. Generally, upcoming events would be more important than past events especially for today. So you can skip the past events of today by this option. The skipped events will be shown again when today passes.

skipPassedEventToday: false (default)

skipPassedEventToday: true

Auto-detect calendar info by locale

Before 1.7.0, the user must manually set firstDayOfWeek and minimalDaysOfNewYear in the config to calculate the start day of the week, week number, weekend info, etc.

Now, this module will calculate that info automatically with locale without your manual config for firstDayOfWeek and minimalDaysOfNewYear (Leave them as blank or null)

For example;

• When you set the locale as en-US (in the module config or global config), the week starts from Sunday.
• When you set the locale as en-GB, the week starts from Monday.
• When you set the locale as fa-IR, the week starts from Saturday, and the weekend day will be only Friday.

Of course, you can set them up manually by force for the exceptions.

• Not supported natively in legacy browsers.
• To show custom weekend days for your job shift instead of public weekends. (e.g. weekends: [1, 3, 5] for Mon, Wed, Fri resting)
• to adopt a locale but with a different language. (e.g. The Americans living in Germany, so the calendar system itself should be followed by German rule but displayed in English.)

locale: 'en-US', // Displaying things as US English, e.g. MM. DD. YYYY instead of European DD. MM. YYYY
firstDayOfWeek: 1, // German ISO rule. The week starts on Monday, not Sunday, as `en-US`
minimalDaysOfNewYear: 4, 

weekends

A new config value, weekends: [], is introduced. By default, you don’t have to set this by yourself because it is derived from the auto-detection of calendar info from the locale. This field will be fulfilled automatically unless you set it manually in config.
Every day cell has weekend and weekend_1 or weekend_2 as its classname.

For example, weekends: [6, 0] means Saturday and Sunday will be considered weekends. Saturday will have weekend weekend_1 and Sunday will have weekend weekend_2.

Style cells with these class names instead of the fixed weekday_N. You don’t have to know which weekday is a weekend in a specific locale.

And more…

[ChickenBeard]

Is there a step missing when updating? I follow the install or update instructions in GitHub but it never seems to actually update.

[MMRIZE]

@ChickenBeard

Try this;

cd ~/MagicMirror/modules/MMM-CalendarExt3
git pull
npm install 
git submodule update --init --recursive

Sorry, it may be missing. I’ll add the info on next update. (soon)

[MMRIZE]

[UPDATE] 1.7.1

• ADDED useMarquee config
• ADDED noMarquee event Object attribute
  From now, too long title will be rolling as marquee or ticker style.
  

[nobbie35]

@MMRIZE big fan of Ext3 module… I was curious if there is any way to have the calendar setting to be the next 4 weeks? That is a valuable view for me that I currently use on MMM-MyCalendar as it seems to be one of the only calendar’s that supports that.

[nobbie35]

Disregard… I managed to make this work by using week view with week index and week view.

[MMRIZE]

@nobbie35
You can use ‘mode:“week”’ and ‘weeksInView:4’(and ‘weekIndex:0’)

[bobbylx]

I’ve got this calendar set up almost perfect for my family. Just a couple minor things I would like to modify but am having no luck so far. Wondering if any of you can help. I’m sure I’m missing something easy here, but I would like to remove the little circle icon to the left of the calendar entry. I changed useSymbol to false but it still shows.

Second, how the heck do you get the weather forecast/temp icons up next to the date? I chose useweather-true, displayweathertemp - true, I’ve tried a few of the other weather related fields but no luck. Any help with these would be appreciated.

Also, I’ve tried a couple times now on this post and another, and cannot upload a pic no matter how small. Also wouldn’t accept my Imgur link. Not sure what I’ve done wrong there but I’ll post a pic when I can.

 {
                        module: "MMM-CalendarExt3",
                        position: "bottom_bar",
                        title: "",
                        config: {
                          mode: "",
                          weekIndex: 0,
                          weeksInView: 4,
                          instanceId: "basicCalendar",
                          locale: 'en-EN',
                          maxEventLines: 5,
                          firstDayOfWeek: 0,
                          refreshInterval: 120000,
                          animationSpeed: 0,
                          useSymbol: false,
                          useWeather: true,
                          displayWeatherTemp: true,
                          calendarSet: ['us_holiday','family'],
                }
                },
                {
                        module: "calendar",
                        position: "",
                        config: {
                          broadcastPastEvents: true,
                          calendars: [
                                {
                                  url: "webcal://www.calendarlabs.com/ical-calendar/ics/76/US_Holidays.ics",
                                  name: "us_holiday",
                                  color: "#6699ff"
                                }
                                        ]
                                }
                },
                {
                        module: "calendar",
                        position: "",
                        maximumNumberOfDays: 60,
                        config: {
                          animationSpeed: 0,
                          fetchInterval: 100000,
                          broadcastPastEvents: true,
                          useSymbol: false,
                          calendars: [
                                {
                                  url: "https://calendar.google.com/calendar/ical/*****,                                 
				  name: "family",
                                  color: "yellow",
                                        user: '***@gmail.com',
                                        pass: '***',
                                        method: 'basic'
                                }
                                        ]
                                }
                },

.MMM-CalendarExt3 {
        margin-bottom: 0px;
        width: 100%;
        height: 575px;
        font-size: 16px;
}
.CX3 .cw {
        display:none
}

.CX3 .event.singleday {
  border-left:4px solid var(--calendarColor);
}

.CX3 .event.singleday:not(.useSymbol)::before {
  content: '';
}
![screenshot.jpg](error)