Skip to content

Commit

Permalink
issue KirAsh4#2 fixed: calendar not updated when month is switched
Browse files Browse the repository at this point in the history
  • Loading branch information
Rustem Shaikhutdinov committed Jun 5, 2017
1 parent 6131ad4 commit 3a41ecd
Showing 1 changed file with 129 additions and 201 deletions.
330 changes: 129 additions & 201 deletions calendar_monthly.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,241 +6,169 @@
*/

Module.register("calendar_monthly", {

// Module defaults
defaults: {
debugging: false,
initialLoadDelay: 0,
fadeSpeed: 2, // How fast 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()];
},

// return css path for theme css style
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);
Log.info("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);

this.scheduleUpdate();
},

scheduleUpdate: function() {
this.midnight = moment().endOf("day").add(1 + this.config.updateDelay, "seconds");
var self = this;
setTimeout(function() {
self.updateDom(this.config.fadeSpeed * 1000);
self.scheduleUpdate();
}, this.midnight.diff(moment()));
Log.info("[calendar_monthly] next update in: " + this.midnight.diff(moment(), "minutes") + "minutes");
},

// 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 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 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-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++;
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";
}
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";
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);
}

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("= = = = = = = = = = = = = = = = = = = = = = = = = = = = = =");
// 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() {
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);
}


});

0 comments on commit 3a41ecd

Please sign in to comment.