MMM-CalendarExt

A Former User

@Zooooooom @Vauxdvihl
Here is some ‘next 28 days view’ sample.

Open your css/custom.css and append these code;

/* CSS adjusting for 28days view */

/* hide unnecessary components */
#CALEXT_daily .eventTime,
#CALEXT_daily .eventLocation,
#CALEXT_daily .symbol {
  display:none;
}

/* smaller size for events */
#CALEXT_daily .eventContent {
  font-size:0.8em;
  font-weight:normal;
}

/* makes "slot" 1/7 of 100% */
#CALEXT_daily .slot {
  max-width:13%;
  flex-basis:13%;
}

/* smaller size for events */
#CALEXT_daily .slot .header {
  font-size:0.5em;
  border-radius:0;
  font-weight:normal;
}

/* add some style sample */
#CALEXT_daily .style_custom2 {
  background-color:rgba(255, 127, 255, 1.0);
}

/* add some additional content sample */
#CALEXT_daily .style_custom2 .eventContent::before{
  content: "[@]";
}

open your config.js, put these codes.

{
      module: 'MMM-CalendarExt',
      position: "top_center", // ignore this.
      config: {
        system: {
          show: ['daily'],
          locale: 'en',
        },
        views: {
          daily: {
            position:'bottom_bar',
            counts:28,
            //overflowRolling:1,
            //overflowHeight:50,
          },
        },
        calendars :[
          {
            name: "bundesliga",
            styleName: "style_custom1",
            oneLineEvent: 1,
            url: "webcal://www.google.com/calendar/ical/en5624jps9pfbtgsd7op2him0k%40group.calendar.google.com/public/basic.ics",
          },
          {
            name: "DFB POKAL",
            styleName: "style_custom2",
            //oneLineEvent: 1,
            url: "webcal://www.google.com/calendar/ical/0efdnrqt4c9qruabf7u33742ps%40group.calendar.google.com/public/basic.ics",
          },
          {
            name: "Theater GRIPS",
            styleName: "style_custom3",
            oneLineEvent: 1,
            url: "http://ical.grips-theater.de/grips.ics",
          }
        ],
      }
    },

You can refer also https://github.com/eouia/MMM-CalendarExt/wiki/Manipulation-of-looks
Main trick is

/* makes "slot" 1/7 of 100% */
#CALEXT_daily .slot {
  max-width:13%;
  flex-basis:13%;
}

You might need to adjust the value 13% to your circumstances. Because of margin and padding, 14% might not work.

You can also consider overflow and oneLineEvent and titleReplace for saving spaces.

Anyway, under 700px width, this could not work. That is too narrow to display 7 slots.

A Former User

@Vauxdvihl said in MMM-CalendarExt:

BEGIN:VEVENT
DTSTART:20170201T080000Z
DTEND:20170201T090000Z
LOCATION;LANGUAGE=de:, 82343 POECKING
TRANSP:OPAQUE
SEQUENCE:0
UID: 2171943
DTSTAMP:20171014T081346Z
DESCRIPTION;LANGUAGE=de:
SUMMARY;LANGUAGE=de:Restmuelltonne
PRIORITY:9
CLASS:PUBLIC
URL:
STATUS:CONFIRMED
END:VEVENT

I found what’s wrong. you ical location format is slightly different with others.
I’ve committed hotfix for that. git pull again and re-run your mirror.

A Former User

@Zooooooom @Vauxdvihl

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’