MMM-CalendarExt

A Former User

And I also added weeks view for your exact wish. pull new source and see the wiki.

So, you have two options.

28days view
vs
4weeks view.

both are slightly different. 28days always starts from today. 4weeks always starts from weekday(0) - Monday or Sunday - of this week.
Use anything you want.

Zooooooom

@Sean Beautiful! Exactly what I wanted.

Vauxdvihl

Great Job
Thanks a lot

Vauxdvihl

Hi Sean,
i have a few more questions

Please look to my attached screen:

a.)
Today is “not viewable” because it is “more or less” complete white
Any Idea

b.)
Is there a chance to increase the size of the symbols (i mean the symbols in front of the date…like the football)

c.)
I was wondering that your dates a looking a little bit different
In your dates you have the information about the timing and the location.
I have put the same infos in my google calendar but they will not be shown

Thats a lot

A Former User

a.)
Today is “not viewable” because it is “more or less” complete white
Any Idea

That is my fault. After some CSS test, my experimental CSS was committed by accident, I thought.
I’ll fix it ASAP.(after answer of this)

b.)
Is there a chance to increase the size of the symbols (i mean the symbols in front of the date…like the football)

in your css/custom.css
you can put these;

div.CALEXT  .event .symbol {
    order:1;
    display:block;
    flex-basis: 30px; // Modify this 
    text-align:center;
    min-width: 30px; // Modify this
    font-size: 150%; // Add this
}

c.)
I was wondering that your dates a looking a little bit different
In your dates you have the information about the timing and the location.
I have put the same infos in my google calendar but they will not be shown

Thats a lot

This is also same with answer of a). Sorry again.

A Former User

@Vauxdvihl
I think I’ve fixed it. pull the source and try again.

Vauxdvihl

Amazing
Thanks a lot

Vauxdvihl

Hi Sean,

according to b.)
Sorry to asked again.
While playing a little bit with the config parameters, i can “only” adjust the size of the area within the symbol is located.
But it doesn’t change the size of the symbol itself
Thanks a lot

A Former User

@Vauxdvihl
Did you add this?

 font-size: 150%; // Add this

Give bigger value for that.(And you need to change value of *-width for adjusting)

Vauxdvihl

@Sean
I am not a programmer :-)
I have played a little bit…also with big values, but the symbol size does not change.
Maybe i am doing something wrong?

/*****************************************************
 * Magic Mirror                                      *
 * Custom CSS                                        *
 *                                                   *
 * By Michael Teeuw http://michaelteeuw.nl           *
 * MIT Licensed.                                     *
 *                                                   *
 * Add any custom CSS below.                         *
 * Changes to this files will be ignored by GIT. *
 *****************************************************/


 
 div.CALEXT  .event .symbol {
    order:1;
    display:block;
    flex-basis: 40px; // Modify this 
    text-align:center;
    min-width: 50px; // Modify this
    font-size: 800%; // Add this
}

A Former User

@Vauxdvihl
Ok. I know what’s the problem. I’ve forgotten emoji belongs different section.
put this in your css.

div.CALEXT .events .symbol.emoji {
    font-size: 100%; //Adjust this as your wish. you can use px or %
}

Vauxdvihl

@Sean
Perfect for some symbols
But the symbol “trash-o” will be not “re-sized”.
I have to look for a symbol in other sources == > “em”…and so on

A Former User

@Vauxdvihl
for emoji(@em) size, see my last answer.

for FA and MD (default and @fa & @md) sizes are related to my previous answer.

Vauxdvihl

@Sean
It works fine with adding this code to custom css :-)

div.CALEXT .events .symbol.font-awesome {
    font-size: 250%; //Adjust this as your wish. you can use px or %

A Former User

@Vauxdvihl Ye… Maybe that’s another solution. :)

Vauxdvihl

@Sean
Sorry again but i have another question / problem
You can see in my above standing screens that split view => current / upcoming does not work.
But before doing the update it was working.

Here is my config code

		{
				module: 'MMM-CalendarExt',
				position: "lower_third", //anywhere. It is not related to real position of view
				config: { // Read below
				system: {
				  show: ['current','upcoming','daily'],
				  locale: 'de', //when omitted, default value would be your system default locale by moment.js
				  showEmptyView: 0,
				  fullDayEventLocalize: 1,
				  redrawInterval: 30*60*1000, //minimum 60000
				  useProfileConfig: 0,
				  startProfile: ''
				},
				
				 views: {
						current: {
						  position: "top_left",
						  title: "Heute",
						  limit: 3,
						},
						upcoming: {
						  position: "top_left",
						  title: "Demnächst",
						  limit: 3,
						},
						daily: {
						  position: "bottom_bar",
						  title: "Überblick",
						  counts: 7,
						}
					  },

Vauxdvihl

@Sean
Hi,
it is me again.
After having everything running, my wife wants to have the view “weekly” with 2 counts.
Now i have the “problem”, that i search for the config parameter which allows also to see the timings in this view (like 08:00-10:00 …and so on)
Is it possible in the “weekly” view?
Thanks again for your support and help

A Former User

@Vauxdvihl
Yes possible.

Put this code in your css.

div.CALEXT .tableStyle .eventTime {
    display:block;
}

I’m not on the console on weekends, so i didnt test it, but i think it will work.

Ps. that view is not ‘weekly’. It is ‘weeks’

Vauxdvihl

@Sean
Yes you are right…it is the view "weeks
Now i have in the appointment also the date within…it looks a little bit twice…because the date is also within the header of the week…

May be you can help me

Thanks a lot

A Former User

@Vauxdvihl
Maybe on Monday I’ll provide you a patch about that.
In ‘Month’ and ‘weeks’ view, I assume nobody needs exact time, because those views might have too many events to show with time. So I I’ve thought time displaying is needed in only daily, upcoming, current.
Anyway, I’ll follow opinion of my real users. :)