heskja / mmm-calendarweek Goto Github PK

I have several calendars configured differently and some of them might sometimes not show anything. But instead of being hidden they display "No upcoming events" or whatever the English translation is of "Inga kommande händelser."
I normally use hideEmptyDays: true but I also tried displayBlankDays: true from #29 but that only affects days and not calendars.

{
        module: "MMM-CalendarWeek",
        position: "top_left", 
        config: {
                colored: true,
                calendarTitle: "Viktigt",
                maximumNumberOfDays: "10",
                displayLocation: true,
                showEndDate: true,
                maximumDaysPerLine: "1",
                maximumEntries: "3",
                hideEmptyDays: true,
                calendars: [
                        {
                                symbol: "calendar",
                                url: "https://calendar.google.com/calendar/basic.ics",
                                color: '#72b8ff'
                       }
                ]
        }
},

This shows three calendars and the second one (from the config above) is empty except from "Inga kommande händelser." in grey.

Recurring (google calendar) events shown 1 day earlier.

Have a birthday in my Agenda on January 2 as a full day event. But on MM it was at January 1. How can I change this

hi - This is a great module and I have this and a number of others running on my first mirror project. I am trying to get a 7 day display going. The first 5 days display very well in terms of column size however when i up the display , days 6 and 7 get squashed to the right of the screen, regardless of whether maximumnumberofdays is set to 6 or 7.

This feels like a formatting bug to me but maybe this is configurable?

Any help you can give much appreciated.

Adrian

Hi!

When trying to use this module I get the following error in the logs.

[01.08.2023 11:22.56.846] [ERROR] Error: Cannot find module 'valid-url'
Require stack:
- /opt/magic_mirror/modules/MMM-CalendarWeek/node_helper.js
- /opt/magic_mirror/js/app.js
- /opt/magic_mirror/serveronly/index.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1075:15)
    at Module._resolveFilename (/opt/magic_mirror/node_modules/module-alias/index.js:49:29)
    at Module._load (node:internal/modules/cjs/loader:920:27)
    at Module.require (node:internal/modules/cjs/loader:1141:19)
    at require (node:internal/modules/cjs/helpers:110:18)
    at Object.<anonymous> (/opt/magic_mirror/modules/MMM-CalendarWeek/node_helper.js:9:16)
    at Module._compile (node:internal/modules/cjs/loader:1254:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Module._load (node:internal/modules/cjs/loader:958:12)
    at Module.require (node:internal/modules/cjs/loader:1141:19)
    at require (node:internal/modules/cjs/helpers:110:18)
    at loadModule (/opt/magic_mirror/js/app.js:184:19)
    at loadNextModule (/opt/magic_mirror/js/app.js:220:6)
    at loadNextModule (/opt/magic_mirror/js/app.js:222:6)
    at loadNextModule (/opt/magic_mirror/js/app.js:222:6) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/opt/magic_mirror/modules/MMM-CalendarWeek/node_helper.js',
    '/opt/magic_mirror/js/app.js',
    '/opt/magic_mirror/serveronly/index.js'
  ]
}

I am using the following configuration:

                {
                        module: "MMM-CalendarWeek",
                        position: "bottom_bar", // This can be any of the regions. Best results in bottom region.
                        header: "Calendars",
                        config: {
                                calendarTitle: "false",
                                maximumEntries: "20",
                                maximumNumberOfDays: "6",
                                displaySymbol: "true",
                                showEndDate: "true",
                                allowDuplicate: "false",
                                maxTitleLength: "25",
                                hideEmptyDays: "false",
                                wrapEvents: "false",
                                tableClass: "small",
                                calendars: [
                                        {
                                                url: "http://www.calendarlabs.com/templates/ical/US-Holidays.ics",
                                                symbol: "calendar"
                                        }
                                ]
                        }
                },

So I have had this setup for multiple months with 2 different google calendars updating and showing perfectly fine. Today, my main calendar just disappeared and would not show after multiple attempts. I tried changing the iCal to public, reset the private iCal, and I replaced my other calendar's slot with it, but nothing worked. I am extreme beginner at all of this, it was kind of a struggle to set everything, so I may struggle to understand things. Thanks so much in advance!!

When starting the MMM_CalendarWeek I seems a new default calender entry is being created with the Label "Event" - this is matching the start time of magicmirror having opened. A bit annyoing - I have tried to filter this via excludedEvents but I'm not able to properly configurate the exclude statement...
excludedEvents: ['Event', {filterBy:'Event'}],

The Event time is the being updated each time the calender refreshes after 5 minutes

The event occurs every October 5th, but this module is displaying it on December 5th.

I want only two days to display, but they are very far apart from each other.
is there a way to put them next to each other?
settings:
maximumDaysPerLine = 2
maximumNumberOfDays = 2

Since the update ov 2.13.0 I'm not able the Calendar sync which was working before seamlessly with three iCloud public calendar links is not syncing properly the weekly events anymore.

The weekly recurring events are always shown one day too early. The first 7 days work fine anything beyond gets messed up in terms of weekly recurring events - they all appear one-day in advance. I'm living in Central European Timezone.

Fortnightly events are shown accurately.

Please help.

When hideEmptyDays is false, display a label informing the user of no upcoming events on empty days.

Added the following 2 sections to your code.

line 34
overwritePrivate: false, overwritePrivateText: "--Private--",

line 620
`
else if (this.config.overwritePrivate) {
if(event.class === "PRIVATE") {
event.title = this.config.overwritePrivateText;
}

			}

`

Ive got kind of a big Problem. I tested this Module with 2 Google Accounts to make sure its not my fault.
The first Google Account is my personal one, the calender has all the events i need, including birthdays and my school time table.
The second Google Account had an empty google calender. So i filled it up with a appointment that repeats every day. Then i put in some random appointments and a birthday for testing (which obviously repeats once a year).
The second calender is displaying just fine on the MagicMirror, but is useless, because its just filled with testing.
The first calender isnt displaying at all. It just says "No upcoming Events" even tho, I have alot of Events in it.
For both of these calenders i used the private ical link to implement it, so that cant be the Problem.
Can anyone tell me what the problem could be?
The fact that i used diffrent colors? Are there just to may appointments? I really need help...

Would it be possible to add a Calendar Title above the calendar, for instance, if you have 2 calendars, one for Birthdays, and one for Special Events in different positions, in order to distinguish them.

As an example, Google Calendar allows you to display emoji in event titles. The emoji are not imported correctly into the MM interface. Would it be possible to correctly show emoji?

When there is no events for a day, or period of days, the calendar shows the date and underneath it shows "No upcoming events". I don't want to hide empty days, kinda like when it's shown. But I would like just to have it blank (or optionally a custom text).

My screen can handle 6-7 days without scaling is affected.
If I want more than one week listed, the days are presented "outside of the screen".
Could it be possible to have multiple lines of days when presenting that amount of days?

Hi,
To begin with, a big thank you for this gorgeous module ! Made my life so easier ! Now for the issue :
Location and Summary parameters are not displaying on my calendar:

I invistigated a bit about the type of Ical format i'm using, i found out that it uses a weird LANGUAGE parameter before the LOCATION and SUMMARY value :

LOCATION;LANGUAGE=fr:Paris
SUMMARY;LANGUAGE=fr:blablabla

I'm pretty sure that this is what causes the values to not display properly. I found

I think that modifying the ParseParams function in ical.js, the thing is that i'm pretty new to js so i have no idea how to fix it !

Thank youu !

Every passed event disappears from my view as intended.

But if it's a recurring event it stays. Which is unexpected.

Time is now (Tuesday) 20:00
I have a recurring event Thursday and Wednesday 1800-1900.

I expect only to see the upcoming event tomorrow, not the passed today.

Today the configuration excludedEvents filter on all configured calendars.
I would like to set this filter on calendar level (aswell) since the event title should be visible for some calendars.

Thanks in advance

The possibility to show end date of an event

Hi, I'm seeing duplication of recurring events just in the part of the calendar that is today. I created a calendar just to show the issue, with a minimum config.

As you can see, the event for today is duplicated, but the following days are not. Those days will only duplicate when they are occurring on the current day.
The config to reproduce this is, as I said, very minimal; there are no other modules running, and no custom css changes. I did truncate the ical URL:

{
        module: "MMM-CalendarWeek",
        position: "bottom_bar",
        config: {
                allowDuplicate: true,
                calendars: [
                        {
                                symbol: "calendar",
                                url: "https://calendar.google.com/calendar/ical...
                        }
                ]
        }
}

To recreate the issue, just add a recurring event (I started mine last week), and then edit the title for just today's entry.

I'm attaching the entire ics file below, since its fairly short, and I'm not sure which parts are needed to look into this:

BEGIN:VCALENDAR
PRODID:-//Google Inc//Google Calendar 70.9054//EN
VERSION:2.0
CALSCALE:GREGORIAN
METHOD:PUBLISH
X-WR-CALNAME:mirror bug display
X-WR-TIMEZONE:America/New_York
BEGIN:VTIMEZONE
TZID:America/New_York
X-LIC-LOCATION:America/New_York
BEGIN:DAYLIGHT
TZOFFSETFROM:-0500
TZOFFSETTO:-0400
TZNAME:EDT
DTSTART:19700308T020000
RRULE:FREQ=YEARLY;BYMONTH=3;BYDAY=2SU
END:DAYLIGHT
BEGIN:STANDARD
TZOFFSETFROM:-0400
TZOFFSETTO:-0500
TZNAME:EST
DTSTART:19701101T020000
RRULE:FREQ=YEARLY;BYMONTH=11;BYDAY=1SU
END:STANDARD
END:VTIMEZONE
BEGIN:VEVENT
DTSTART;TZID=America/New_York:20221130T103000
DTEND;TZID=America/New_York:20221130T113000
DTSTAMP:20221128T154529Z
UID:[email protected]
RECURRENCE-ID;TZID=America/New_York:20221130T103000
CREATED:20221128T152952Z
DESCRIPTION:
LAST-MODIFIED:20221128T153036Z
LOCATION:
SEQUENCE:0
STATUS:CONFIRMED
SUMMARY:Test event - edit 3
TRANSP:OPAQUE
END:VEVENT
BEGIN:VEVENT
DTSTART;TZID=America/New_York:20221129T103000
DTEND;TZID=America/New_York:20221129T113000
DTSTAMP:20221128T154529Z
UID:[email protected]
RECURRENCE-ID;TZID=America/New_York:20221129T103000
CREATED:20221128T152952Z
DESCRIPTION:
LAST-MODIFIED:20221128T153024Z
LOCATION:
SEQUENCE:0
STATUS:CONFIRMED
SUMMARY:Test event - edit 2
TRANSP:OPAQUE
END:VEVENT
BEGIN:VEVENT
DTSTART;TZID=America/New_York:20221128T103000
DTEND;TZID=America/New_York:20221128T113000
DTSTAMP:20221128T154529Z
UID:[email protected]
RECURRENCE-ID;TZID=America/New_York:20221128T103000
CREATED:20221128T152952Z
DESCRIPTION:
LAST-MODIFIED:20221128T153011Z
LOCATION:
SEQUENCE:0
STATUS:CONFIRMED
SUMMARY:Test event - edit 1
TRANSP:OPAQUE
END:VEVENT
BEGIN:VEVENT
DTSTART;TZID=America/New_York:20221112T103000
DTEND;TZID=America/New_York:20221112T113000
RRULE:FREQ=DAILY
DTSTAMP:20221128T154529Z
UID:[email protected]
CREATED:20221128T152952Z
LAST-MODIFIED:20221128T152952Z
LOCATION:
SEQUENCE:0
STATUS:CONFIRMED
SUMMARY:Test event
TRANSP:OPAQUE
END:VEVENT
END:VCALENDAR

I'm using the maximumDaysPerLine option and I wanted to increase the spacing between the rows. I tried adding custom CSS but that just ended up changing the spacing between ALL the rows in the module. I just wanted to increase the row height between the rows that are created when the calendar entries wrap to multiple lines. Anyway, I created a kludge by editing the js as such:

if (idx % this.config.maximumDaysPerLine == 0 && idx > 0) {
	wrapper.appendChild(row);
	row = document.createElement("tr");
        wrapper.appendChild(row);
	row = document.createElement("tr");
}

... I'm sure there's a better way. Ideally we could change the row height using CSS values (maybe line-height or something).

(also I'm not sure if this is the best way to submit suggestions so if there's a better way please let me know)

When I use maximumNumberOfDays to show 7 days. Only events 4 days in the future is shown. I can see all the 7 days in the calender, but after 4 days no events are shown even there are event in the calender. Do I need to do something more the just insert maximumNumberOfDays: 7, under config
It is my google calender I use in the module

thanks for help

Hi Heskja,

Sorry to bother you but I'm on this for hours now and I can't find the right syntax to have my google calendar on display... I went throught the questions & issues but was unable to find!
I would really appreciate your help in this matter.
I use ProfileSwitcher & TouchNavigation to manage several screens but even when they are disabled I have the same "no upcoming event"... frustrating :-(
In my browser, the very same URLs do retrieve the .ics file.
Here is the code i use:

 	{
		module: "MMM-CalendarWeek",
		position: "bottom_bar",
		classes: "1",
		config: {
			hideEmptyDays: "True",
			Calendars: [
				//{
					// Dominique
					//url: "https://calendar.google.com/calendar/ical/dominique.suinot%40gmail.com/private-aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa/basic.ics",
					//symbol: "google",
					//color: "#03F6FA",
				//},
				//{
					// Delphine
					//url: "https://calendar.google.com/calendar/ical/delphine.suinot%40gmail.com/private-bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb/basic.ics",
				//},
				{

					// Eloi
					url: "https://calendar.google.com/calendar/ical/eloi.suinot%40gmail.com/private-ccccccccccccccccccccccccccccccccccc/basic.ics",
				}
			]
		}
	},

Thanks for your help

Recurring weekly events are shown one day earlier, at the correct time. The events are loaded from a google calendar.

Any tips how to solve this?
Thanks

Adjust the columns-width or the space between two days

Related post:
https://forum.magicmirror.builders/topic/9039/mmm-calendarweek/20?page=2

Loading the module is still in "Caricamento in corso".. (loading in english I suppose) and nothing appears.

That is my config, and pay attention: with default calendar module all works correctly...

{
module: "MMM-CalendarWeek",
position: "bottom_bar", // This can be any of the regions. Best results in bottom region.
config: {
colored: false,
coloredSymbolOnly: false,
calendars: [
{
url: '"https://calendar.google.com/calendar/ical/.........',
symbol: 'calendar',
},
],
}
},

Any ideas? Pay attention that I use the module from a remote server in cloud.

Getting a blank screen when I load MM

command screen shows:
code: 'MODULE_NOT_FOUND',

If I disable the module, MM will work.

I have tried both:
npm install valid-url
and
npm install rrule-alt npm install valid-url

Issue still remained

Hello, I really enjoy using your MagicMirrorModule.

While there are requests to provide some kind of table layout, which could be achieved by simply adding "border: 1px solid white;" to the .col element in the css file, I'm curious on how to align the rows within each column.

When using a border you can see that all columns (up to three) in a row are aligned to the left (except the date) side which leads to irregular distances between each day.

Maybe someone can provide adivice. Maybe this improvement would refer to #28.

regards.

How is possible to mix 2 or more calendars with different symbol ?

I already try to mix 3 methods

calendars: [
{
url: 'URL 1.ics',
symbol: 'calendar',
url: 'URL 2.ics',
symbol: 'briefcase',
},
],

also I try

calendars: [
{
url: 'URL 1.ics',
symbol: 'calendar',
auth: {
}
},
],
calendars: [
{
url: 'URL 2.ics',
symbol: 'calendar',
}
},
],

Finally i Try

config: {
colored: false,
coloredSymbolOnly: false,
calendars: [
{
url: 'URL 1.ics',
symbol: 'calendar',
}
},
],
}

config: {
colored: false,
coloredSymbolOnly: false,
calendars: [
{
url: 'URL 2.ics',
symbol: 'calendar',

		}
	},
],

}

I know that there is something wrong, maybe you can help me to fix it.

Thanks

When I have dates that doesn't have any events, it seems like the space is still reserved in the UI.
This will generate unnecessary space between the date columns.

this can be solved by reinstalling valid-url (npm install valid-url) in the module folder

Is there a way to display the details of the calendar events?

First I'd like to say that this is the first calendar I found that does not show deleted weekly reoccurring items in the calendar, which is awesome.

But I'd like to have my calendar displayed vertically and that seems to be done with maximumDaysPerLine. However that makes the day headers misaligned.
The first picture shows maximumNumberOfDays: "2" and maximumDaysPerLine: "1".
The second picture shows maximumNumberOfDays: "4" and maximumDaysPerLine: "2".

My CalendarWeek code:

{
    module: "MMM-CalendarWeek",
    position: "bottom_bar",
    config: {
        maximumNumberOfDays: "2",
        displayLocation: "true",
        showEndDate: "true",
        maximumDaysPerLine: "1",
        calendars: [
            {
                symbol: "calendar",
                url: "https://calendar.google.com/calendar/ical/xxgroup.calendar.google.com/private-xxx/basic.ics",
            }
        ]
    }
},

Fredag = Friday
Lördag = Saturday
Söndag = Sunday
Måndag = Monday

I'm looking in to use this module as a information bord on our company.
This module is perfect for showing me and my colleges appointments in "one schedule".
But instead of the "Font Awesome" symbol in front of each entry I would like to have different initials to each calendar instead. Is that possible to easily add to this module?

Add borders to display the calendar in table style.

Example:
https://forum.magicmirror.builders/uploads/files/1465506489126-weeklycal.png

Related post:
https://forum.magicmirror.builders/topic/9039/mmm-calendarweek/16?page=2

I have maximumNumberOfDays set to 5 but only 4 days worth of events are displayed. The 5th day is just blank and will fill itself in only after it becomes day 4.

Here is my config file. I can post a picture too if you'd like(xxx for information control):
{ module: "MMM-CalendarWeek", header: "Events", position: "bottom_bar", // tableClass: "medium", maximumEntries: 40, config: { calendarTitle: "xxx", displaySymbol: false, colored: true, maximumNumberOfDays: 5, calendars: [ { color: "#FF4500", url: "xxx"}, { color: "#FF0000", url: "xxx" } ], }, },

Hi, this is my first project and I am fairly certain that it isn't an issue with the module so much as I don't know what I am doing completely yet. I copied everything over and confirmed my code with a friend who is a computer engineer. Now when I attempt to open using the pm2 command in the terminal I am getting a pm2 daemon error code. Any help would be greatly appreciated.

I have two different calendars (google ical files) where the same event (same title and the same starttime).

Only one of these events are listed and presented on my MagicMirror.

Expected behaviour is to have two events presented since they are not the same (different calendar origins)

Is it possible to show end time or duration of an event?

[12.07.2021 11:04.20.344] [ERROR] WARNING! Could not load config file. Starting with default configuration. Error found: Error: Cannot find module 'rrule-alt'
Require stack:

• /home/pi/MagicMirror/modules/MMM-CalendarWeek/vendor/ical.js/node-ical.js
• /home/pi/MagicMirror/modules/MMM-CalendarWeek/vendor/ical.js/index.js
• /home/pi/MagicMirror/modules/MMM-CalendarWeek/calendarfetcher.js
• /home/pi/MagicMirror/modules/MMM-CalendarWeek/node_helper.js
• /home/pi/MagicMirror/js/app.js
• /home/pi/MagicMirror/js/electron.js
• /home/pi/MagicMirror/node_modules/electron/dist/resources/default_app.asar/main.js

I tried fix in other issue post for v2.16 and it does not fix.

Hi,
In the last two weeks I've experienced two problems:

1. Some calendar events started to show up a day earlier than scheduled.
2. All new (added as of this week) recurring events do not show up at all.

In a bit of haste I replaced the events that were showing up a day early with new events. I thought that by deleting and re-adding them it might fix the issue. But then I discovered that all newly added recurring events don't show up at all. I still have an old recurring event that shows up fine though. I'm pasting relevant iCal exports below.

This is a recurring event that still shows correctly:

BEGIN:VEVENT
DTSTART;TZID=America/New_York:20190928T090000
DTEND;TZID=America/New_York:20190928T093000
RRULE:FREQ=WEEKLY;WKST=SU;UNTIL=20191130;BYDAY=SA
DTSTAMP:20191106T145408Z
UID:[email protected]
CREATED:20190731T154142Z
DESCRIPTION:stuff
LAST-MODIFIED:20190916T144401Z
LOCATION:the location
SEQUENCE:0
STATUS:CONFIRMED
SUMMARY:this is an old event that works fine
TRANSP:OPAQUE
END:VEVENT

This is a recurring event that does not show correctly. This event, like the event above, has an end date:

BEGIN:VEVENT
DTSTART;TZID=America/New_York:20191107T013000
DTEND;TZID=America/New_York:20191107T020000
RRULE:FREQ=WEEKLY;WKST=SU;UNTIL=20191201T045959Z;BYDAY=TH
DTSTAMP:20191106T160251Z
UID:[email protected]
CREATED:20191106T145202Z
DESCRIPTION:
LAST-MODIFIED:20191106T151538Z
LOCATION:
SEQUENCE:1
STATUS:CONFIRMED
SUMMARY:Test5 - this has an end date
TRANSP:OPAQUE
END:VEVENT

This is a newly added recurring event without an end date. This does not show correctly:

BEGIN:VEVENT
DTSTART;TZID=America/New_York:20191107T023000
DTEND;TZID=America/New_York:20191107T030000
RRULE:FREQ=WEEKLY;BYDAY=TH
DTSTAMP:20191106T160251Z
UID:[email protected]
CREATED:20191106T145226Z
DESCRIPTION:
LAST-MODIFIED:20191106T145226Z
LOCATION:
SEQUENCE:0
STATUS:CONFIRMED
SUMMARY:Test6
TRANSP:OPAQUE
END:VEVENT

This is a newly added event that works correctly but is not recurring:

BEGIN:VEVENT
DTSTART:20191107T083000Z
DTEND:20191107T090000Z
DTSTAMP:20191106T160251Z
UID:[email protected]
CREATED:20191106T145247Z
DESCRIPTION:
LAST-MODIFIED:20191106T151551Z
LOCATION:
SEQUENCE:1
STATUS:CONFIRMED
SUMMARY:Test7 - this does not repeat
TRANSP:OPAQUE
END:VEVENT

As far as I can tell the difference between the recurring event that shows correctly and the ones that do not is that:

• The event that shows correctly has an end date
• The events that do not show correctly either:
  • Do not have an end date
  • Include a time in their end date

I'm not sure why there is a discrepancy from Google. My old event doesn't have a time in the UNTIL field but my new event does.

Any ideas for further troubleshooting?

I noticed that when i rename or remove events on my Calendar
the event wont disappear/rename on the Mirror.

Is this a known issue or am i doing something wrong

If the behavior is reproducible, a setting option to decide weather local cache or new fetched data should be prioritized would be nice

I'm using icals published from Office365. Events are shown in the originators timezone (not local timezone).
Using latest release. Cloned 6/28/2020.

Hi, is there a setting #that will allow me to hide events that have passed their end time on the current day?

I noticed when adding a sunrise/sunset calendar to the list of calendars that the timezone was off. Is there a configuration to adjust this or can it be updated to use the system timezone setting to adjust for timezone differences?

This is the calendar I was loading...
https://calendar.google.com/calendar/ical/i_12.201.176.150%23sunrise%40group.v.calendar.google.com/public/basic.ics

Is there a method to access a locally stored calendar file, instead of an internet one?

Hi everyone,

I actually don't know anything about programming, but the Magic Mirror is something I got really interested in.

I added the module using the terminal and also made the necessary adjustments on the config.js, just as @heskja instructed. Unfortunately, I am not getting any results. At the bottom part, it only says, "No Schedules (keine Termine)". What am I doing wrong?

I would absolutely appreciate any help I can get.