@dxfan227 said in 2 Of the same module but different position via css?:

@ianperrin
Beautiful. Exactly what I was looking for. regarding your example below ( 2 calendars 1 module with different icons) what would it look like if I wanted sat just the title of of the event to be a different color ( but not the “in x amount of days” ) part

I believe the default calendar module allows colors to be configured, but these will affect the whole row, or only the symbol.

To color just the title, try this

1. Change the config to set the titleClass for each calendar, e.g.

{
	module: "calendar",
	header: "Holidays",
	position: "top_left",
	config: {
		calendars: [
			{
				symbol: "calendar",
				url: "webcal://www.calendarlabs.com/ical-calendar/ics/76/US_Holidays.ics",
				titleClass: "red"
			},{
				symbol: "calendar-check",
				url: "webcal://www.calendarlabs.com/ical-calendar/ics/75/UK_Holidays.ics",
				titleClass: "blue"
			}
		]
	}
},

2. Edit the custom.css file located in ~/MagicMirror/css to include the following

div.module.calendar td.red {
    color: #ad0143;
}
div.module.calendar td.blue {
    color: #0e66b3;
}

3. Restart the mirror

@dxfan227 - if you simply want to display two calendars, but are happy for them to appear in one list, you can try the following config - note how different symbols can be used to differentiate between the two calendars

{
	module: "calendar",
	header: "Holidays",
	position: "top_left",
	config: {
		calendars: [
			{
				symbol: "calendar",
				url: "webcal://www.calendarlabs.com/ical-calendar/ics/76/US_Holidays.ics",

			},{
				symbol: "calendar-check",
				url: "webcal://www.calendarlabs.com/ical-calendar/ics/75/UK_Holidays.ics"
			}
		],
		maximumEntries: 20
	}
},

@AdnanAhmed97 - if the default calendar module is being used, it is not necessary to clone it as multiple instances of the module can be added to the config.js file without having to use the clone trick.

@dxfan227 - assuming you are using the default calendar module, and want two calendar to be displayed side by side, try the following:

1. Add two instances of the calendar module to your config.js file

{
	module: "calendar",
	header: "US Holidays",
	position: "top_left",
	config: {
		calendars: [
			{
				symbol: "calendar-check",
				url: "webcal://www.calendarlabs.com/ical-calendar/ics/76/US_Holidays.ics"
			}
		]
	}
},
{
	module: "calendar",
	header: "UK Holidays",
	position: "top_left",
	config: {
		calendars: [
			{
				symbol: "calendar-check",
				url: "webcal://www.calendarlabs.com/ical-calendar/ics/75/UK_Holidays.ics"
			}
		]
	}
},

2. Edit the custom.css file located in ~/MagicMirror/css to include the following

div.module.calendar {
    float: left;
    padding-right: 20px;
}

3. restart the mirror

The result should be something similar to this:

@hattlegr it sounds like you’ve got at least a couple of issues here. One relating to the install of the module and another related to the authorisation process. Let’s take them one at a time.

What command are you running to install the module and which directory are you in at the time?

@hattlegr okay, so the Magic Mirror creates logs in two places.

1. On the Pi itself. If you use pm2 to start your mirror, these can be viewed by running pm2 logs mm

2. In the browser console. These can be viewed in the browser’s Developer Tools (usually activated by CTRL-SHIFT-i).

Let us know what you find.

@hattlegr how about the logs or debug console?

@hattlegr okay so we’re making progress. What is the output in the log file or the debug console in the browser? Once you’ve authorised the module, was a tokens.json file created in the MMM-Strava module folder?

@lavolp3 said in MMM-Strava:

@hattlegr You need to create an application in your strava account to use this module. Have you done that?

1. Go to www.strava.com/settings/api
2. Create an application. As far as I understand the only really important value is the callback domain. I GUESS (!!) this would need to be http://localhost OR the hostname (or IP) of your magicmirror, something like http://magicmirror
3. Then you get a client secret and access token, which you need for the further procedure.

The easiest way to authorise the module is

1. On the My API Application page update the application by entering localhost as the callback domain.

2. Once the Strava API application is updated, copy the client id and client secret from the same page, then use these to update the module configuration in the config.js file and restart the Magic Mirror.

3. Finally, on the Pi itself, browse to http://localhost:8080/MMM-Strava/auth/ and follow the steps.

If it helps, here are the settings I’ve been using to test the module:

@hattlegr thanks for testing and sorry to hear you’re having issues. Perhaps you can post your config and any logs from the mirror.

@lavolp3 said in MMM-Strava:

@ianperrin … it might be worth to think about several rotating charts. Like for weekdays and a range of several months?

Good idea, could you add it as an issue in the Github repository so I don’t forget it?