• 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. *
  *****************************************************/

body {

#yearDigits {
color: #fff;
font-weight: normal;
}

#monthName {
font-weight: normal;
}

#monthName:after {
content: " •";
color: #80ff00;
font-weight: bold;
}

.monthPrev {
color: #333333;
}

.monthNext {
color: #333333;
}

.square-box {
position: relative;
width: 50%;
overflow: hidden;
margin: 0px auto;
}

.square-box:before {
content: “”;
display: block;
padding-top: 20%;
}

.square-content {
top: 0;
left: 0;
bottom: 0;
right: 0;
}

.square-content .today {
border: 1px solid #80ff00;
font-weight: normal;
color: #80ff00;
}

.square-content div {
display: table;
width: 100%;
height: 100%;
}

.square-content span {
display: table-cell;
text-align: center;
vertical-align: middle;
}

.OfficeHours {
text-align: left;
color: #fff;
font-size: 50px;
}

header {
text-transform: none;
font-size: 65px;
font-family: “Roboto Condensed”, Arial, Helvetica, sans-serif;
font-weight: 600;
border-bottom: 2px solid #0084ff;
line-height: 55px;
padding-bottom: 5px;
margin-bottom: 10px;
color: #fff;
}

}

// Module config defaults.
defaults: {
	access_token: "",
	page_id: "",
	refresh_interval_sec: 10, //minimum 30. If your daily visitors of page are under 10, use 30 as this value.
	size: "default"
},

getStyles: function() {
	return ["MMM-fbPageCounter.css", "flipcounter.css"]
},

getScripts: function() {
	return [
		this.file("js/flipcounter.js")
	]
},

start: function() {
	this.fb = {}
	this.myCounter = null
	this.apiUrl = "https://graph.facebook.com/v2.10/"
		+ this.config.page_id
		+ "/?fields=fan_count,name&access_token="
		+ this.config.access_token

	if (this.config.refresh_interval_sec < 10) {
		this.config.refresh_interval_sec = 10
	}
},

getDom: function() {
	var wrapper = document.createElement("div")
	wrapper.className = "fb_board"
	var myCounter = document.createElement("ul")
	myCounter.className = "flip-counter " + this.config.size
	myCounter.id = "myCounter_" + this.data.identifier
	wrapper.appendChild(myCounter)

	return wrapper
},


notificationReceived:function(noti, payload, sender) {
	if (noti == "DOM_OBJECTS_CREATED") {
		this.myCounter = new flipCounter("myCounter_" + this.data.identifier, {value: 0, pace:100, auto: false})
		this.updateCounter()
		var self = this
		setInterval(function() {
			self.updateCounter()
		}, this.config.refresh_interval_sec * 1000)
	}
},

updateCounter: function() {
	var self = this
	this.loadJSON(this.apiUrl,
		function (result) {
			self.fb = result
		},
		function (err) {
			console.log("[FBKCNT] ERROR!", err)
		}
	)
	if (this.fb.fan_count) {
		this.myCounter.incrementTo(this.fb.fan_count, 100, 20)
	}
},

loadJSON: function(path, success, error) {
	var xhr = new XMLHttpRequest()
	xhr.onreadystatechange = function() {
		if (xhr.readyState === XMLHttpRequest.DONE) {
			if (xhr.status === 200) {
				if (success) {
					success(JSON.parse(xhr.responseText))
				}
			} else {
				if (error) {
					error(xhr)
				}
			}
		}
	}
	xhr.open("GET", path, true)
	xhr.send()
},

})

// Default module config.
defaults: {
	text: ""
},

getTemplate: function () {
	return "OfficeHours.njk"
},

getTemplateData: function () {
	return this.config
}

});

• v1.0 - June 2016
• By Ashley M. Kirchner kirash4@gmail.com
• Beer Licensed (meaning, if you like this module, feel free to have a beer on me, or send me one.)
  */

Module.register(“calendar_monthly”, {

// Module defaultsca
defaults: {
	debugging:		false,
	initialLoadDelay:	0,		// How many seconds to wait on a fresh start up.
						// This is to prevent collision with all other modules also
						// loading all at the same time. This only happens once,
						// when the mirror first starts up.
	fadeSpeed:		2,		// How fast (in seconds) to fade out and in during a midnight refresh
	showHeader:		true,		// Show the month and year at the top of the calendar
	cssStyle:		"block",	// which CSS style to use, 'clear', 'block', 'slate', or 'custom'
	updateDelay:		5,		// How many seconds after midnight before a refresh
						// This is to prevent collision with other modules refreshing
						// at the same time.
},

// Required styles
getStyles: function() {
	return [this.data.path + "/css/mcal.css", this.getThemeCss()];
},

getThemeCss: function() {
	return this.data.path + "/css/themes/" + this.config.cssStyle + ".css";
},

// Required scripts
getScripts: function() {
	return ["moment.js"];
},

// Override start method
start: function() {
	Log.log("Starting module: " + this.name);
	// Set locale
	moment.locale(config.language);
	
	// Calculate next midnight and add updateDelay
	var now = moment();
	this.midnight = moment([now.year(), now.month(), now.date() + 1]).add(this.config.updateDelay, "seconds");

	this.loaded = false;

	this.scheduleUpdate(this.config.initialLoadDelay * 1000);
},

// Override dom generator
getDom: function() {

	if ((moment() > this.midnight) || (!this.loaded)) {

		var month = moment().month();
		var year = moment().year();
		var monthName = moment().format("MMMM");
		var monthLength = moment().daysInMonth();

		// Find first day of the month, LOCALE aware
		var startingDay = moment().date(1).weekday();

		var wrapper = document.createElement("table");
		wrapper.className = 'large';
		wrapper.id = 'calendar-table';

		// Create THEAD section with month name and 4-digit year
		var header = document.createElement("tHead");
		var headerTR = document.createElement("tr");

		// We only fill in the THEAD section if the .showHeader config is set to true
		if (this.config.showHeader) {
			var headerTH = document.createElement("th");
			headerTH.colSpan = "7";
			headerTH.scope = "col";
			headerTH.id = "calendar-th";
			var headerMonthSpan = document.createElement("span");
			headerMonthSpan.id = "monthName";
			headerMonthSpan.innerHTML = monthName;
			var headerYearSpan = document.createElement("span");
			headerYearSpan.id = "yearDigits";
			headerYearSpan.innerHTML = year;
			// Add space between the two elements
			// This can be used later with the :before or :after options in the CSS
			var headerSpace = document.createTextNode(" ");

			headerTH.appendChild(headerMonthSpan);
			headerTH.appendChild(headerSpace);
			headerTH.appendChild(headerYearSpan);
			headerTR.appendChild(headerTH);
		}
		header.appendChild(headerTR);
		wrapper.appendChild(header);

		// Create TFOOT section -- currently used for debugging only
		var footer = document.createElement('tFoot');
		var footerTR = document.createElement("tr");
		footerTR.id = "calendar-tf";

		var footerTD = document.createElement("td");
		footerTD.colSpan ="7";
		footerTD.className = "footer";
		if (this.config.debugging) {
			footerTD.innerHTML = "Calendar currently in DEBUG mode!<br />Please see console log.";
		} else {
			footerTD.innerHTML = "&nbsp;";
		}

		footerTR.appendChild(footerTD);
		footer.appendChild(footerTR);
		wrapper.appendChild(footer);

		// Create TBODY section with day names
		var bodyContent = document.createElement("tBody");
		var bodyTR = document.createElement("tr");
		bodyTR.id = "calendar-header";

		for (var i = 0; i <= 6; i++ ){
			var bodyTD = document.createElement("td");
			bodyTD.className = "calendar-header-day";
			bodyTD.innerHTML = moment().weekday(i).format("ddd");
			bodyTR.appendChild(bodyTD);
		}
		bodyContent.appendChild(bodyTR);
		wrapper.appendChild(bodyContent);

		// Create TBODY section with the monthly calendar
		var bodyContent = document.createElement("tBody");
		var bodyTR = document.createElement("tr");
		bodyTR.className = "weekRow";

		// Fill in the days
		var day = 1;
		var nextMonth = 1;
		// Loop for amount of weeks (as rows)
		for (var i = 0; i < 9; i++) {
			// Loop for each weekday (as individual cells)
			for (var j = 0; j <= 6; j++) {
				var bodyTD = document.createElement("td");
				bodyTD.className = "calendar-day";
				var squareDiv = document.createElement("div");
				squareDiv.className = "square-box";
				var squareContent = document.createElement("div");
				squareContent.className = "square-content";
				var squareContentInner = document.createElement("div");
				var innerSpan = document.createElement("span");

				if (j < startingDay && i == 0) {
					// First row, fill in empty slots
					innerSpan.className = "monthPrev";
					innerSpan.innerHTML = moment().subtract(1, 'months').endOf('month').subtract((startingDay - 1) - j, 'days').date();
				} else if (day <= monthLength && (i > 0 || j >= startingDay)) {
					if (day == moment().date()) {
						innerSpan.id = "day" + day;
						innerSpan.className = "today";
					} else {
						innerSpan.id = "day" + day;
						innerSpan.className = "daily";
					}
					innerSpan.innerHTML = day;
					day++;
				} else if (day > monthLength && i > 0) {
					// Last row, fill in empty space
					innerSpan.className = "monthNext";
					innerSpan.innerHTML = moment([year, month, monthLength]).add(nextMonth, 'days').date();
					nextMonth++;
				}
				squareContentInner.appendChild(innerSpan);
				squareContent.appendChild(squareContentInner);
				squareDiv.appendChild(squareContent);
				bodyTD.appendChild(squareDiv);	
				bodyTR.appendChild(bodyTD);
			}
			// Don't need any more rows if we've run out of days
			if (day > monthLength) {
				break;
			} else {
				bodyTR.appendChild(bodyTD);
				bodyContent.appendChild(bodyTR);
				var bodyTR = document.createElement("tr");
				bodyTR.className = "weekRow";
			}
		}	

		bodyContent.appendChild(bodyTR);
		wrapper.appendChild(bodyContent);

		this.loaded = true;
		return wrapper;

	}

},

scheduleUpdate: function(delay) {
	if (this.config.debugging) {
		Log.log("= = = = = = = = = = = = = = = = = = = = = = = = = = = = = =");
		Log.log("CALENDAR_MONTHLY IS IN DEBUG MODE!");
		Log.log("Remove 'debugging' option from config/config.js to disable.");
		Log.log("             Current moment(): " + moment() + " (" + moment().format("hh:mm:ss a") + ")");
		Log.log("scheduleUpdate() delay set at: " + delay);
	}

	if (typeof delay !== "undefined" && delay >= 0) {
		nextReload = delay;
	}

	if (delay > 0) {
		// Calculate the time DIFFERENCE to that next reload!
		nextReload = moment.duration(nextReload.diff(moment(), "milliseconds"));
		if (this.config.debugging) {
			var hours = Math.floor(nextReload.asHours());
			var  mins = Math.floor(nextReload.asMinutes()) - hours * 60;
			var  secs = Math.floor(nextReload.asSeconds()) - ((hours * 3600 ) + (mins * 60));
			Log.log("  nextReload should happen at: " + delay + " (" + moment(delay).format("hh:mm:ss a") + ")");
			Log.log("                  which is in: " + mins + " minutes and " + secs + " seconds.");
			Log.log("              midnight set at: " + this.midnight + " (" + moment(this.midnight).format("hh:mm:ss a") + ")");
			Log.log("= = = = = = = = = = = = = = = = = = = = = = = = = = = = = =");
		}
	}

	var self = this;
	setTimeout(function() {
		self.reloadDom();
	}, nextReload);

},

reloadDom: function() {
	if (this.config.debugging) {
		Log.log("          Calling reloadDom()!");
	}

	var now = moment();
	if (now > this.midnight) {
		this.updateDom(this.config.fadeSpeed * 1000);
		this.midnight = moment([now.year(), now.month(), now.date() + 1]).add(this.config.updateDelay, "seconds");
	}

	var nextRefresh = moment([now.year(), now.month(), now.date(), now.hour() + 1]);
	this.scheduleUpdate(nextRefresh);
}

});

We can also chat on discord.

1. MMM-Calendar
   etc.

The copy your config.js entries (MagicMirror/config) in thier entirety using the code option </> above.

Then post your custom.css file (MagicMirror/css) using the code option </>

This will give the coders and people willing to assist a headstart .

This project seems perfect for some of the pro’s on this forum.

@Module-Developers