I am trying to code a calendar, which has been done using a table, it displays sun-sat live to the current date. This part is working, complete, and I have no need to change it greatly. The issue lies in identifying the current day, and then editing the bg of that one date to stand out on the others. I can't seem to figure out/ find any working code or similar that can be adapted to my needs. I have tried a number of Stack Overflow, W3 and code camp solutions but none seem to work even after editing them for at least an hour each. (in total about 28 hours of trial and error on different snippets) Not once has it worked. I am on codepen for this project and the code for the calendar has already been adapted slightly from another project. (listed here: https://codepen.io/jacknumber/pen/RWLyQW )
Tl;Dr: Calendar no worky, can't find or make solution, need help finding active date to edit background.
function Calendar(month, year) {
var now = new Date();
// labels for week days and months
var days_labels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
months_labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
// test if input date is correct, instead use current month
this.month = (isNaN(month) || month == null) ? now.getMonth() + 1 : month;
this.year = (isNaN(year) || year == null) ? now.getFullYear() : year;
var logical_month = this.month - 1;
// get first day of month and first week day
var first_day = new Date(this.year, logical_month, 1),
first_day_weekday = first_day.getDay() == 0 ? 7 : first_day.getDay();
// find number of days in month
var month_length = new Date(this.year, this.month, 0).getDate(),
previous_month_length = new Date(this.year, logical_month, 0).getDate();
// calendar header
var html = '<h2>' + months_labels[logical_month] + ' ' + this.year + '</h2>';
// calendar content
html += '<table class="calendar-table" id="table">';
// week days labels row
html += '<thead>';
html += '<tr class="week-days">';
for (var i = 0; i <= 6; i++) {
html += '<th class="day">';
html += days_labels[i];
html += '</th>';
}
html += '</tr>';
html += '</thead>';
// define default day variables
var day = 1, // current month days
prev = 1, // previous month days
next = 1; // next month days
html += '<tbody>';
html += '<tr class="week">';
// weeks loop (rows)
for (var i = 0; i < 9; i++) {
// weekdays loop (cells)
for (var j = 1; j <= 7; j++) {
if (day <= month_length && (i > 0 || j >= first_day_weekday)) {
// current month
html += '<td class="day" id="day">';
html += '<div class="card"> <br>';
html += day;
html += '<p><button>View</button></p>';
html += '</div>';
html += '</td>';
day++;
} else {
if (day <= month_length) {
// previous month
html += '<td class="day other-month">';
html += '<div class="card"><br>';
html += previous_month_length - first_day_weekday + prev + 1;
html += '<p><button>View</button></p>';
html += '</div>';
html += '</td>';
prev++;
} else {
// next month
html += '<td class="day other-month">';
html += '<div class="card"><br>';
html += next;
html += '<p><button>View</button></p>';
html += '</div>';
html += '</td>';
next++;
}
}
}
// stop making rows if it's the end of month
if (day > month_length) {
html += '</tr>';
break;
} else {
html += '</tr><tr class="week">';
}
}
html += '</tbody>';
html += '</table>';
return html;
}
document.getElementById('calendar').innerHTML = Calendar();
//from here down is my most recent attempt
function myFunction(){
let filter = 23;
let myTable = $('#table');
let tr = document.getElementsByTagName('tr');
for(var i=0; i<tr.length; i++)
{
let td = tr[i].getElementsByTagName('td')[0];
if(td)
{
let textValue = td.innerHTML;
if(textValue == filter)
{
tr[i].style.backgroundColor = "red";
}
else
{
tr[i].style.backgroundColor = "blue";
}
document.getElementById('test').innerHTML = td;
}
}
}