Calendar overlapping problem

StrikeBack83 · Jul 13, 2017, 4:09 AM

Hi everyone,
as you can see on the attached picture, my calendar is overlapping with weather forecast module.
I tried to show absolute Dates like “30 Jan”, not “In one month”, but it’s not working.
And, as you can see, the line under the calendar module is underneath the weather forecast module… why are they not at the same height, aligned correctly?
I’m using an old netbook screen with a low resolution of 1024x600 rotatet.

var config = {
port: 8080,
ipWhitelist: ["127.0.0.1", "::ffff:127.0.0.1", "::1"], // Set [] to allow all IP addresses
// or add a specific IPv4 of 192.168.1.5 :
// ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.1.5"],
// or IPv4 range of 192.168.3.0 --> 192.168.3.15 use CIDR format :
// ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.3.0/28"],

language: "de",
timeFormat: 24,
units: "metric",

modules: [
{
module: "alert"
},

{
module: "updatenotification",
position: "top_bar"
},

{
module: "clock",
position: "top_left"
},

{
module: "calendar",
header: "Österreichische Feiertage",
position: "top_left",
timeFormat: "absolute",
maxTitleLength: 17,
maximumNumberOfDays: 7,
dateFormat: "DD MMM",
fullDayEventDateFormat: "DD MMM",
urgency: 0,
getRelative: 0,
config: {
calendars: [
{
//symbol: "calendar-check-o ",
url: "https://www.ferienwiki.at/exports/feiertage/2017/at/wien"
}
]
}
},

{
module: "compliments",
position: "lower_third",
config: {
compliments: {
"day_sunny" : [
"Heute ist ein sonniger Tag",
"Heute ist ein schöner Tag"
],
"snow" : [
"Schneeball Schlacht!"
],
"rain" : [
"Regenschirm nicht vergessen"
],
"anytime" : [
"Hi Sexy!"
],
"morning" : [
"Guten morgen, Sonnenschein!",
"Gut geschlafen?",
"Wer braucht Kaffee wenn er dein Lächeln hat? :-)"
],
"afternoon" : [
"Hitting your stride!",
"Du machst den Unterschied!"
],
"evening" : [
"Du hast heute jemanden zum lachen gebracht :-)",
"Du machst den Unterschied!"
]
}
}
},

{
module: "currentweather",
position: "top_right",
config: {
location: "",
locationID: "2761369",  //ID from http://www.openweathermap.org/help/city_list.txt
appid: ""
}
},

{
module: "weatherforecast",
position: "top_right",
header: "Weather Forecast",
config: {
location: "",
locationID: "2761369",  //ID from http://www.openweathermap.org/help/city_list.txt
appid: "",
colored: "true"
}
},

{
module: "newsfeed",
position: "bottom_bar",
config: {
feeds: [
{
title: "Kurier",
url: "http://kurier.at/xml/rssd"
},
{
title: "Der Standard",
url: "http://derStandard.at/?page=rss&ressort=Seite1"
},
{
title: "Giga",
url: "http://www.giga.de/feed/"
}
],
showSourceTitle: true,
showPublishDate: true
}
}

] //module wird geschlossen
}; //config wird geschlossen

/*************** DO NOT EDIT THE LINE BELOW ***************/
if (typeof module !== "undefined") {module.exports = config;}

Thanks in advanced,
Gery!

PS: I tried to get rid of the icon bevore each calendar entry by supressing the symbol config, it didn’t work.

strawberry 3.141 · Jul 12, 2017, 7:58 AM

@StrikeBack83 you didn’t put the config options in the right place, try:

{
  module: "calendar",
  header: "Österreichische Feiertage",
  position: "top_left",
  config: {
    timeFormat: "absolute",
    maxTitleLength: 17,
    maximumNumberOfDays: 7,
    dateFormat: "DD MMM",
    fullDayEventDateFormat: "DD MMM",
    urgency: 0,
    getRelative: 0,
    calendars: [
      {
        //symbol: "calendar-check-o ",
        url: "https://www.ferienwiki.at/exports/feiertage/2017/at/wien"
      }
    ]
  }
},

Furthermore you can get mor space out of your monitor, by applying the following css rule in custom.css

body {
  margin: 10px;
  height: calc(100% - 20px);
  width: calc(100% - 20px);
}

StrikeBack83 · Jul 12, 2017, 2:24 PM

Great thanks for your help!
I’ll try this as soon as i get home.
Do you know how to remove the symbol in front of each entry?
Best regards,
Gery

Mykle1 · Jul 12, 2017, 3:45 PM

@StrikeBack83 said in Calendar overlapping problem:

Do you know how to remove the symbol in front of each entry?

In your custom.css file, add :

.calendar .symbol {
  display: none;
}

Save!
Restart MM.
That should do it.

StrikeBack83 · Jul 12, 2017, 5:51 PM

.calendar .symbol {
display: none;
}

@strawberry 3.141
Made all changes and they worked very well, thanks!

@Mykle1
I add this in the body in custom.css right?
I made this change and now i get no entries for my calendar at all.

Mykle1 · Jul 12, 2017, 6:54 PM

@StrikeBack83 said in Calendar overlapping problem:

I add this in the body in custom.css right?

No sir. That won’t work.

I made this change and now i get no entries for my calendar at all.

Take it out of the body.

body {
  blah: blah;
}

.calendar .symbol {
  display: none;
}

StrikeBack83 · Jul 12, 2017, 7:03 PM

Ok, i made the changes. Still no calendar entries hmmm!?

config.js

var config = {
              port: 8080,
              ipWhitelist: ["127.0.0.1", "::ffff:127.0.0.1", "::1"], // Set [] to allow all IP addresses
                                                                     // or add a specific IPv4 of 192.168.1.5 :
                                                                     // ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.1.5"],
                                                                     // or IPv4 range of 192.168.3.0 --> 192.168.3.15 use CIDR format :
                                                                     // ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.3.0/28"],

              language: "de",
              timeFormat: 24,
              units: "metric",

modules: [
         {
          module: "alert"
         },

         {
          module: "updatenotification",
          position: "top_bar"
         },

         {
          module: "clock",
          position: "top_left"
         },

         {
          module: "calendar",
          header: "Österreichische Feiertage",
          position: "top_left",
          config: {
                   timeFormat: "absolute",
                   maxTitleLength: 17,
                   maximumNumberOfDays: 7,
                   dateFormat: "DD MMM",
                   fullDayEventDateFormat: "DD MMM",
                   urgency: 0,
                   getRelative: 0,
                   calendars: [
                              {
                               url: "https://www.ferienwiki.at/exports/feiertage/2017/at/wien"
                              }
                              ]
                  }
         },

         {
          module: "compliments",
          position: "lower_third",
          config: {
                   compliments: {
                                 "day_sunny" : [
                                 "Heute ist ein sonniger Tag",
                                 "Heute ist ein schöner Tag"
                                               ],
                                 "snow" : [
                                 "Schneeball Schlacht!"
                                          ],
                                 "rain" : [
                                 "Regenschirm nicht vergessen"
                                          ],
                                 "anytime" : [
                                 "Hi Sexy!"
                                             ],
                                 "morning" : [
                                 "Guten morgen, Sonnenschein!",
                                 "Gut geschlafen?",
                                 "Alles was du tun willst schaffst du!",
                                 "Wer braucht Kaffee wenn er dein Lächeln hat? :-)"
                                             ],
                                 "afternoon" : [
                                 "Du machst den Unterschied!"
                                               ],
                                 "evening" : [
                                 "Du hast heute jemanden zum lachen gebracht :-)",
                                 "Du machst den Unterschied!"
                                             ]
                                }
                  }
         },

         {
          module: "currentweather",
          position: "top_right",
          config: {
                   location: "",
                   locationID: "2761369",  //ID from http://www.openweathermap.org/help/city_list.txt
                   appid: ""
                  }
         },

         {
          module: "weatherforecast",
          position: "top_right",
          header: "Weather Forecast",
          config: {
                   location: "",
                   locationID: "2761369",  //ID from http://www.openweathermap.org/help/city_list.txt
                   appid: "",
                   colored: "true"
                  }
         },

         {
          module: "newsfeed",
          position: "bottom_bar",
		  showSourceTitle: true,
          showPublishDate: true,
          config: {
                   feeds: [
                          {
                           title: "Kurier",
                           url: "http://kurier.at/xml/rssd"
                          },
                          {
                           title: "Der Standard",
                           url: "http://derStandard.at/?page=rss&ressort=Seite1"
                          },
                          {
                           title: "Giga",
                           url: "http://www.giga.de/feed/"
                          }
                          ]
                  }
         }

] //module wird geschlossen
}; //config wird geschlossen

/*************** DO NOT EDIT THE LINE BELOW ***************/
if (typeof module !== "undefined") {module.exports = config;}

custom.css

 body {
 margin: 10px;
 height: calc(100% - 20px);
 width: calc(100% - 20px);
}
.calendar .symbol {
  display: none;
}

Any idea?

Mykle1 · Jul 12, 2017, 7:18 PM

@StrikeBack83 said in Calendar overlapping problem:

Any idea?

Ok, remove that entry from your custom.css file altogether. Revert any changes you made regarding " supressing the symbol config" and add this to your calendar config entry"
displaySymbol: false,

It’s right there in the ReadMe file of the calendar module. 3rd entry, configuration options.
https://github.com/MichMich/MagicMirror/tree/develop/modules/default/calendar

StrikeBack83 · Jul 12, 2017, 7:32 PM

@Mykle1 said in Calendar overlapping problem:

displaySymbol: false,

THANKS! I’ve overseen this config option ;-)
My bad!