MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    Can someone do the coding for me? $$

    Scheduled Pinned Locked Moved Unsolved Troubleshooting
    8 Posts 3 Posters 1.1k Views 3 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • H Offline
      Hellonoonan @BD0G
      last edited by

      @BD0G Ill give that a shot. Thanks for the suggestion!

      1 Reply Last reply Reply Quote 1
      • H Offline
        Hellonoonan
        last edited by

        /* Magic Mirror Module: calendar_monthly

        • 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);
        }
        

        });

        1 Reply Last reply Reply Quote 0
        • H Offline
          Hellonoonan
          last edited by Hellonoonan

          Module.register(“OfficeHours”,{

          // Default module config.
          defaults: {
          	text: ""
          },
          
          getTemplate: function () {
          	return "OfficeHours.njk"
          },
          
          getTemplateData: function () {
          	return this.config
          }
          

          });

          1 Reply Last reply Reply Quote 0
          • H Offline
            Hellonoonan
            last edited by

            Module.register(“MMM-fbPageCounter”,{

            // 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()
            },
            

            })

            1 Reply Last reply Reply Quote 0
            • H Offline
              Hellonoonan
              last edited by

              /*****************************************************

              • 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;
              }

              }

              1 Reply Last reply Reply Quote 0
              • 1 / 1
              • First post
                Last post
              Enjoying MagicMirror? Please consider a donation!
              MagicMirror created by Michael Teeuw.
              Forum managed by Sam, technical setup by Karsten.
              This forum is using NodeBB as its core | Contributors
              Contact | Privacy Policy