MMM-MyCalendar

[Johans]

@j.e.f.f
thanks for the link - seems this is what i needed

[Johans]

Hi, Installed this module as replacement of the standard calendar module.
I’m using a private made teamup calendar, and all shows fine, except I don’t know how to get the colors & small icon as shon in your picture.
Can you expain how to achieve this.
thx

[j.e.f.f]

@Johans The colours are set per calendar in your config as follows:

calendars: [
  {
      url: "http://path.to.som/calendar.ics",
      color: "#ffb350"
  }
]

As for the little icon, are you referring to the icon in the title that looks like a stack of bills with wings? That is an emoji used in the calendar entry itself, and has nothing to do with the module. In fact, this will show up by default as an empty square when run on a Raspberry Pi. You can install an emoji font, but the best you’ll get is a white outline. You won’t get colour.

[Johans]

@j.e.f.f
thanks, that seems to work.
second question, How do I add 2 or more calendars?

[j.e.f.f]

@Johans The calendars portion of the config is an array. You can specify multiple calendars like so:

calendars: [
  {
      url: "http://path.to.some/calendar.ics",
      color: "#ffb350"
  },
  {
      url: "http://path.to.another/calendar.ics",
      color: "#ff77d4"
  }
]

Each calendar can have its own colour setting so that you can tell what the source of the event is.

[Johans]

@j.e.f.f

Thank you.
All fine now.

[kruemel]

Hey @j-e-f-f , i got another issue ^^
I updated MagicMirror to the new version and your modules also.

It is just strange wide, no text but it streches the left moduls and wasting space

Thats how it looks now:

And how it should look (MyCalendar temporary disabled)

Regards Manuel :-)

[j.e.f.f]

@kruemel The module is configured to use the full width of the containing region (e.g.: top_left) up to a maximum of 500px. If you want it to be narrower, then you can add a rule in your custom.css file to control the width of the containers. For example, I have this in my custom.css file:

.region.right .module-content,
.region.left .module-content {
  min-width: 300px;
  max-width: 300px;
}

This limits top_right, top_left bottom_right and bottom_left to an explicit width of 300px. MMM-MyCalendar, MMM-MyCommute and any of my other modules will conform to this width.

[kruemel]

@j-e-f-f Okay thank you very much.
I will do it like this but i still want to understand why the “MyCalendar” streches so much with no text and your other module “MyCommute” doesnt?
Why you configured this differently?

[j.e.f.f]

@kruemel HTML is a funny thing. It can use space in all sorts of ways depending on the situation. In the case of the MMM-MyCalendar module, it is a modification of the default calendar, but generally it is much the same. Its layout is done with tables. MMM-MyCommute, on the other hand, is completely written from the ground up. It’s layout is made up of DIV and SPAN elements, fully styled and positioned with CSS. They are two different animals.

[A Former User]

Hello everyone, do you know how i can add my google calender to my mirror please ??

[j.e.f.f]

@PCPAYN3 It works the same way you would do it for the default calendar module.

Config details here:
https://github.com/jclarke0000/MMM-MyCalendar

which are more or less identical to configuring the default calendar:
https://github.com/MichMich/MagicMirror/tree/develop/modules/default/calendar

The only tricky part is getting the ics link for your google calendar. See here for instructions:
https://www.smsclientreminders.com/how_to_share_your_calendar_with_other_applications#google

I hope this helps!

• Jeff

[kruemel]

@j-e-f-f thank you :-)

[A Former User]

@j.e.f.f Thank you I will look into this.

[A Former User]

@j.e.f.f I have tried to set this up and all I’m getting on the screen is the time & date at the top and then calendar loading ??

[j.e.f.f]

@PCPAYN3 are you trying to set up up your google calendar? Do you have the .ics link for it?

[A Former User]

@j.e.f.f hi yes i am, and have the ics link.

[j.e.f.f]

@PCPAYN3 can your post your config? Hide your ics link, but post the rest.

[A Former User]

This post is deleted!

[j.e.f.f]

@PCPAYN3 Two things:

1. Your config is trying to configure the default calendar module, not MMM-MyCalendar. The config for MMM-MyCalendar looks something like this:

    {
      module: "MMM-MyCalendar",
      position: "top_left",
      classes: "default everyone",
      header: "Upcoming",
      disabled: false,
      config: {
        colored: true,
        maximumNumberOfDays: 30,
        maximumEntries: 5,
        fade: false,
        maxTitleLength: 500,
        useRelativeDates: false,
        dayOfWeekFormat: "dddd",
        timeFormat: "h:mm A",
        dateFormat: "MMMM D",
        joiningWord: "at",
        urgency: 1,
        calendars: [
          {
            url: "https://calendar.google.com/path/to/your/basic.ics",
            color: "#ffb350"
          },
          {
            url: "https://calendar.google.com/path/to/another/basic.ics",
            color: "#ff77d4"
          }
        ]
      }
    },    

2. You should delete your post above. It contains your private ICS link – this is what I meant for you to hide when I mentioned it above – as well as you app id for the weather module. That’s all information you should keep secret, and edit out before you post your config in the forum.