Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: calendar not updating on month change #18

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

fix: calendar not updating on month change #18

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
77e0245
fix: update once per day
d-Rickyy-b Feb 10, 2020
7b942d6
fix: remove unnecessary check for midnight
d-Rickyy-b Feb 10, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
325 changes: 140 additions & 185 deletions calendar_monthly.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
* 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.register("calendar_monthly", {

// Module defaults
defaults: {
Expand Down Expand Up @@ -41,208 +41,163 @@
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 = 'xsmall';
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;

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 = 'xsmall';
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";

scheduleUpdate: function(delay) {
var footerTD = document.createElement("td");
footerTD.colSpan ="7";
footerTD.className = "footer";
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);
footerTD.innerHTML = "Calendar currently in DEBUG mode!<br />Please see console log.";
} else {
footerTD.innerHTML = "&nbsp;";
}

if (typeof delay !== "undefined" && delay >= 0) {
nextReload = delay;
}
footerTR.appendChild(footerTD);
footer.appendChild(footerTR);
wrapper.appendChild(footer);

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("= = = = = = = = = = = = = = = = = = = = = = = = = = = = = =");
}
// 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().endOf('month').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";
}
}

var self = this;
setTimeout(function() {
self.reloadDom();
}, nextReload);
bodyContent.appendChild(bodyTR);
wrapper.appendChild(bodyContent);

this.loaded = true;
return wrapper;
},

reloadDom: function() {

scheduleUpdate: function(initialDelay = 0) {
let nextUpdate = moment().startOf('day').add({ days: 1, seconds: this.config.updateDelay + initialDelay});
let timeout = nextUpdate.diff(moment());
setTimeout(() => {
this.update();
}, timeout);
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");
Log.info(`Current time: ${moment()}`);
Log.info(`${this.name} Next update scheduled at ${nextUpdate} which is in exactly ${timeout}ms`);
}

},

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

update: function() {
this.updateDom(this.config.fadeSpeed * 1000);
this.scheduleUpdate();
}
});