How to align weekdays to dates using a table?

Question

I am working on making a working calendar. I need my dates to align with my dates (as of now, it is Wednesday 27th, yet my calendar makes it appear as Monday because the first dates are misaligned).

I know that the issue is the misaligned dates. I am struggling with figuring out a solution that would not require manual input (I want it to be automated)

var date = new Date();
// gets new date, which is the current date. 

function getMonthName(month) {
  // create array to hold name of each month
  var monthNames = new Array(12);
  monthNames[0] = "January";
  monthNames[1] = "February";
  monthNames[2] = "March";
  monthNames[3] = "April";
  monthNames[4] = "May";
  monthNames[5] = "June";
  monthNames[6] = "July";
  monthNames[7] = "August";
  monthNames[8] = "September";
  monthNames[9] = "October";
  monthNames[10] = "November";
  monthNames[11] = "December";

  // return name of specified month (parameter)
  return monthNames[month];
}

console.log(getMonthName(1)); // Februrary

var currentDay = date.getDay();
// gets the day within a week. (sunday - saturday, 0-6)

var totalDays = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
// -> (2022, 4 (May), 0 (last day of last month)).getDate(); -> 30
// console.log(totalDays);


let week0 = document.createElement("week0");
let tbody = document.querySelector("#dates");

tbody.appendChild(week0);
// for the for loop

for (day = 0; day < currentDay; day++) {
  // for first row
  // does 4 times for wed, 20/04/2022

  let new_td = document.createElement("td");
  let table_row = document.querySelector("#week0"); // selecting week0 - line 12
  table_row.appendChild(new_td); //adding to cells to row
  new_td.innerText = "";
}

// align the weekday to the date 

// for (weekDay = 0; weekDay < currentDay; weekDay++) {
  
// }

// needs to stop at 5 for friday = 1st. april 2022.



for (day = 0; day < totalDays; day++) {
  // for rest of the days

  let new_td = document.createElement("td");
  let table_row = document.querySelector(
    "#week" + parseInt((day + currentDay) / 7)
  );
  console.log(table_row);
  // "#week" + parseInt((1+3)/7), table_row = querySelector("#week + 5/7") -> week#0
  // "#week" + parseInt((4+3)/7), table_row = querySelector("#week + 5/7") -> week#1
  // parseInt() = string -> integer

  table_row.appendChild(new_td);
  // add
  new_td.innerText = day + 1;
  // changes the cell text
}

// simulate in mind


// add day view?
// https://www.youtube.com/watch?v=YL3ufzQ0QC4
// *create event using forms (for tracking locally)
// https://codepen.io/corvus-007/pen/MzEKyJ

@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;1,100;1,200;1,300;1,400;1,500&display=swap");

/* 'Roboto Mono', sans-serif;  */

* {
  text-align: center;
  font-family: "Roboto Mono", sans-serif;
}

table {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  border-collapse: collapse;
}

table,
th,
td {
  border: 1px solid;
  padding: 10px 0 40px 0;
  /* padding: 61px; */
  /* text-align: right; */
}

th {
  background-color: rgb(245, 143, 143);
  color: rgb(0, 0, 0);
  font-weight: bold;

}

td:hover {
  background-color: rgb(178, 172, 187);
  color: rgb(255, 255, 255);
}

.days_of_the_week th {
  padding: 3rem;
  text-align: center;
}





    
    
    
    
    

    Habit Tracker



    HABIT TRACKER
    Month
    
        
            Sunday
            Monday
            Tuesday
            Wednesday
            Thursday
            Friday
            Saturday

user_1712345 · Answer

Perhaps a solution like this could work for you.

Additionally, if you are looking for a solution without the "jump" buttons and etc. you can see this fiddle I made up as well. https://jsfiddle.net/treckstar/5mzwnysh/4

let today = new Date();
let currentMonth = today.getMonth();
let currentYear = today.getFullYear();
let selectYear = document.getElementById("year");
let selectMonth = document.getElementById("month");

let months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

let monthAndYear = document.getElementById("monthAndYear");
showCalendar(currentMonth, currentYear);


function next() {
    currentYear = (currentMonth === 11) ? currentYear + 1 : currentYear;
    currentMonth = (currentMonth + 1) % 12;
    showCalendar(currentMonth, currentYear);
}

function previous() {
    currentYear = (currentMonth === 0) ? currentYear - 1 : currentYear;
    currentMonth = (currentMonth === 0) ? 11 : currentMonth - 1;
    showCalendar(currentMonth, currentYear);
}

function jump() {
    currentYear = parseInt(selectYear.value);
    currentMonth = parseInt(selectMonth.value);
    showCalendar(currentMonth, currentYear);
}

function showCalendar(month, year) {

    let firstDay = (new Date(year, month)).getDay();
    let daysInMonth = 32 - new Date(year, month, 32).getDate();

    let tbl = document.getElementById("calendar-body"); // body of the calendar

    // clearing all previous cells
    tbl.innerHTML = "";

    // filing data about month and in the page via DOM.
    monthAndYear.innerHTML = months[month] + " " + year;
    selectYear.value = year;
    selectMonth.value = month;

    // creating all cells
    let date = 1;
    for (let i = 0; i < 6; i++) {
        // creates a table row
        let row = document.createElement("tr");

        //creating individual cells, filing them up with data.
        for (let j = 0; j < 7; j++) {
            if (i === 0 && j < firstDay) {
                let cell = document.createElement("td");
                let cellText = document.createTextNode("");
                cell.appendChild(cellText);
                row.appendChild(cell);
            }
            else if (date > daysInMonth) {
                break;
            }

            else {
                let cell = document.createElement("td");
                let cellText = document.createTextNode(date);
                if (date === today.getDate() && year === today.getFullYear() && month === today.getMonth()) {
                    cell.classList.add("bg-info");
                } // color today's date
                cell.appendChild(cellText);
                row.appendChild(cell);
                date++;
            }


        }

        tbl.appendChild(row); // appending each row into calendar body.
    }

}

How to align weekdays to dates using a table?

1 Answers