Want to create an event in my java script Calendar. That is add text to a specific events basically text alongside the various dates in my calendar

Question

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


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

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();

    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) {
                cell = document.createElement("td")
                cellText = document.createTextNode("");
                cell.appendChild(cellText);
                row.appendChild(cell);
            }
            else if (date > daysInMonth(month, year)) {
                break;
            }

            else {
                cell = document.createElement("td");
                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.
    }

}




// check how many days in a month code 
function daysInMonth(iMonth, iYear) {
    return 32 - new Date(iYear, iMonth, 32).getDate();
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
          integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
        integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
        crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
        integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
        crossorigin="anonymous"></script>

<div class= "container">
<div class="container col-sm-4 col-md-7 col-lg-4 mt-5">
    <div class="card">
        <h3 class="card-header" id="monthAndYear"></h3>
        <table class="table table-bordered table-responsive-sm" id="calendar">
            <thead>
            <tr>
                <th>Sun</th>
                <th>Mon</th>
                <th>Tue</th>
                <th>Wed</th>
                <th>Thu</th>
                <th>Fri</th>
                <th>Sat</th>
            </tr>
            </thead>

            <tbody id="calendar-body">

            </tbody>
        </table>

        <div class="form-inline">

            <button class="btn btn-outline-primary col-sm-6" id="previous" onclick="previous()">Previous</button>

            <button class="btn btn-outline-primary col-sm-6" id="next" onclick="next()">Next</button>
        </div>
        <br/>
        <form class="form-inline">
            <label class="lead mr-2 ml-2" for="month">Jump To: </label>
            <select class="form-control col-sm-4" name="month" id="month" onchange="jump()">
                <option value=0>Jan</option>
                <option value=1>Feb</option>
                <option value=2>Mar</option>
                <option value=3>Apr</option>
                <option value=4>May</option>
                <option value=5>Jun</option>
                <option value=6>Jul</option>
                <option value=7>Aug</option>
                <option value=8>Sep</option>
                <option value=9>Oct</option>
                <option value=10>Nov</option>
                <option value=11>Dec</option>
            </select>


            <label for="year"></label><select class="form-control col-sm-4" name="year" id="year" onchange="jump()">
            <option value=1990>1990</option>
            <option value=1991>1991</option>
            <option value=1992>1992</option>
            <option value=1993>1993</option>
            <option value=1994>1994</option>
            <option value=1995>1995</option>
            <option value=1996>1996</option>
            <option value=1997>1997</option>
            <option value=1998>1998</option>
            <option value=1999>1999</option>
            <option value=2000>2000</option>
            <option value=2001>2001</option>
            <option value=2002>2002</option>
            <option value=2003>2003</option>
            <option value=2004>2004</option>
            <option value=2005>2005</option>
            <option value=2006>2006</option>
            <option value=2007>2007</option>
            <option value=2008>2008</option>
            <option value=2009>2009</option>
            <option value=2010>2010</option>
            <option value=2011>2011</option>
            <option value=2012>2012</option>
            <option value=2013>2013</option>
            <option value=2014>2014</option>
            <option value=2015>2015</option>
            <option value=2016>2016</option>
            <option value=2017>2017</option>
            <option value=2018>2018</option>
            <option value=2019>2019</option>
            <option value=2020>2020</option>
            <option value=2021>2021</option>
            <option value=2022>2022</option>
            <option value=2023>2023</option>
            <option value=2024>2024</option>
            <option value=2025>2025</option>
            <option value=2026>2026</option>
            <option value=2027>2027</option>
            <option value=2028>2028</option>
            <option value=2029>2029</option>
            <option value=2030>2030</option>
        </select></form>
    </div>
</div>
</div>
<div style = "padding-bottom:25px"></div>

I wanted to add a text on to date 20 of this month saying like "meeting at office". How do i go about doing that? I want to create events(basically text) on different dates of my calendar. I tried doing it but end up populating all the fields with the same text and I am unable to target specific cells containing the date data so that I can target the cell individually. I have also attached a link of my calendar image.Calendar Image

Answer 1

Please next time share your attempt, people here like to see that you really did try something and help with fixing the code, not write it all for you from starch, welcome to SO.

Here us one way to do it:

    var outofoffice = "2020 Sep 20";
    //set the date
    var res = outofoffice.split(" ");
    //split it
    var outYear = res[0];
    var outMonth = res[1];
    var outDay = res[2];
    
    
var calHeaderData = document.querySelector("#monthAndYear").innerHTML;
    //fetch your calendar header containing month and year  "Sep 2020"
    
    if (calHeaderData === (outMonth + " " + outYear)) {
    //compare your calendar header year and month with your 
    //out of office year and month,  then if its the same:

      [...document.querySelectorAll('#calendar-body tr td')].forEach(td => {
    //fetch all td's inside calendar-body

        if (td.innerHTML === outDay) {
    // if td data (days number) is same as your out of office day

          td.innerHTML = td.innerHTML + " Out of office";
    //add text to it
          td.style.backgroundColor = "red";
    //just some styling
        }
      })
    }

Keep in mind that you need to wrap this into function and call on page load as well as your calendar navigating buttons (if something in calendar is dynamically loaded).

So put it all in function events(){ call it end events() and also at end of every change inside jump() previous() next()

See snippet.

Also adding text to calendar will break its format, I suggest using data attribute plus tool-tips on hover or something similar and just highlight the days. I made that for myself here using Jquery see example.

EXAMPLE SNIPPET:

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


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

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


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

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

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

function showCalendar(month, year) {

  let firstDay = (new Date(year, month)).getDay();

  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) {
        cell = document.createElement("td")
        cellText = document.createTextNode("");
        cell.appendChild(cellText);
        row.appendChild(cell);
      } else if (date > daysInMonth(month, year)) {
        break;
      } else {
        cell = document.createElement("td");
        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.
  }

}

// check how many days in a month code 
function daysInMonth(iMonth, iYear) {
  return 32 - new Date(iYear, iMonth, 32).getDate();
}


function events(){

var outofoffice = "2020 Sep 20";
var res = outofoffice.split(" ");
var outYear = res[0];
var outMonth = res[1];
var outDay = res[2];



var calHeaderData = document.querySelector("#monthAndYear").innerHTML;

if (calHeaderData === (outMonth + " " + outYear)) {
  [...document.querySelectorAll('#calendar-body tr td')].forEach(td => {
    if (td.innerHTML === outDay) {
      td.innerHTML = td.innerHTML + " Out of office";
      td.style.backgroundColor = "red";
    }
  })
}
}

events()

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

<div class="container">
  <div class="container col-sm-4 col-md-7 col-lg-4 mt-5">
    <div class="card">
      <h3 class="card-header" id="monthAndYear"></h3>
      <table class="table table-bordered table-responsive-sm" id="calendar">
        <thead>
          <tr>
            <th>Sun</th>
            <th>Mon</th>
            <th>Tue</th>
            <th>Wed</th>
            <th>Thu</th>
            <th>Fri</th>
            <th>Sat</th>
          </tr>
        </thead>

        <tbody id="calendar-body">

        </tbody>
      </table>

      <div class="form-inline">

        <button class="btn btn-outline-primary col-sm-6" id="previous" onclick="previous()">Previous</button>

        <button class="btn btn-outline-primary col-sm-6" id="next" onclick="next()">Next</button>
      </div>
      <br/>
      <form class="form-inline">
        <label class="lead mr-2 ml-2" for="month">Jump To: </label>
        <select class="form-control col-sm-4" name="month" id="month" onchange="jump()">
          <option value=0>Jan</option>
          <option value=1>Feb</option>
          <option value=2>Mar</option>
          <option value=3>Apr</option>
          <option value=4>May</option>
          <option value=5>Jun</option>
          <option value=6>Jul</option>
          <option value=7>Aug</option>
          <option value=8>Sep</option>
          <option value=9>Oct</option>
          <option value=10>Nov</option>
          <option value=11>Dec</option>
        </select>


        <label for="year"></label>
        <select class="form-control col-sm-4" name="year" id="year" onchange="jump()">
          <option value=1990>1990</option>
          <option value=1991>1991</option>
          <option value=1992>1992</option>
          <option value=1993>1993</option>
          <option value=1994>1994</option>
          <option value=1995>1995</option>
          <option value=1996>1996</option>
          <option value=1997>1997</option>
          <option value=1998>1998</option>
          <option value=1999>1999</option>
          <option value=2000>2000</option>
          <option value=2001>2001</option>
          <option value=2002>2002</option>
          <option value=2003>2003</option>
          <option value=2004>2004</option>
          <option value=2005>2005</option>
          <option value=2006>2006</option>
          <option value=2007>2007</option>
          <option value=2008>2008</option>
          <option value=2009>2009</option>
          <option value=2010>2010</option>
          <option value=2011>2011</option>
          <option value=2012>2012</option>
          <option value=2013>2013</option>
          <option value=2014>2014</option>
          <option value=2015>2015</option>
          <option value=2016>2016</option>
          <option value=2017>2017</option>
          <option value=2018>2018</option>
          <option value=2019>2019</option>
          <option value=2020>2020</option>
          <option value=2021>2021</option>
          <option value=2022>2022</option>
          <option value=2023>2023</option>
          <option value=2024>2024</option>
          <option value=2025>2025</option>
          <option value=2026>2026</option>
          <option value=2027>2027</option>
          <option value=2028>2028</option>
          <option value=2029>2029</option>
          <option value=2030>2030</option>
        </select>
      </form>
    </div>
  </div>
</div>
<div style="padding-bottom:25px"></div>