Skip to content

Commit

Permalink
Update MMM-MyMonthlyCalendar.js
Browse files Browse the repository at this point in the history 
fix: remove unnecessary check for midnight
The check if moment() > this.midnight is not necessary.
getDom should always get the dom, no matter what time it is. This is also one reason why the issue KirAsh4#2 exists. Also this commits changes some strange usages of moment() and removes  unused code.

Author: d-Rickyy-b
  • Loading branch information
@htilburgs
htilburgs authored Jun 21, 2023
1 parent 15ac190 commit 41374a2
Showing 1 changed file with 107 additions and 141 deletions.
248 changes: 107 additions & 141 deletions MMM-MyMonthlyCalendar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
* Beer Licensed (meaning, if you like this module, feel free to have a beer on me, or send me one.)
*/

Module.register("MMM-MyMonbthlyCalendar", {
Module.register("MMM-MyMonbthlyCalendar", {

// Module defaults
defaults: {
Expand Down Expand Up @@ -43,157 +43,123 @@
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() {
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;";
}

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);
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++ ){
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);
}
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.";
// Don't need any more rows if we've run out of days
if (day > monthLength) {
break;
} 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);
var bodyTR = document.createElement("tr");
bodyTR.className = "weekRow";
}
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;
}
bodyContent.appendChild(bodyTR);
wrapper.appendChild(bodyContent);

this.loaded = true;
return wrapper;
}

},
Expand Down

0 comments on commit 41374a2

Please sign in to comment.