How can I do this? (Calendar search, find, match then edit)

19 Views Asked by At

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

   }


}
0

There are 0 best solutions below