时间戳

首页 > 解决方案 > 想在我的 java 脚本日历中创建一个事件。那就是向特定事件添加文本，基本上是我日历中的各个日期旁边的文本

javascript - 想在我的 java 脚本日历中创建一个事件。那就是向特定事件添加文本，基本上是我日历中的各个日期旁边的文本

问题描述

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>

我想在本月 20 日添加一个文本，比如“在办公室开会”。我该怎么做呢？我想在日历的不同日期创建事件（基本上是文本）。我尝试这样做，但最终使用相同的文本填充所有字段，并且我无法定位包含日期数据的特定单元格，以便我可以单独定位单元格。我还附上了我的日历图片的链接。日历图像

标签： javascripthtml

解决方案

请下次分享您的尝试，这里的人们希望看到您确实尝试了一些东西并帮助修复了代码，而不是为您编写所有内容，欢迎来到 SO。

这是我们的一种方法：

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

请记住，您需要将其包装到函数中并调用页面加载以及日历导航按钮（如果日历中的某些内容是动态加载的）。

所以把它全部放在 function events(){调用它的结尾events()，也放在里面的每一个变化的结尾jump() previous() next()

见片段。

此外，将文本添加到日历会破坏其格式，我建议在悬停时使用数据属性加上工具提示或类似的东西，然后突出显示日期。 我在这里使用 Jquery 为自己制作了这个，请参见示例。

示例片段：

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>

推荐阅读