我正在為活動預(yù)訂創(chuàng)建一個日歷。日歷已經(jīng)在活動注冊級別起作用。我無法在日歷上顯示數(shù)據(jù)庫中注冊的活動。 為了顯示數(shù)據(jù)庫中的數(shù)據(jù)，我嘗試這樣做:

var datta = [
   {PequenoAlm:  "Peq_Almo?o", Valencia: "Teste1", Ano: "2023", Mes: "6", Dia: "27", },
];

var verif = [];
var verif1 = [];
var verif2 = [];
var verif3 = [];
var verif4 = [];
for (var i = 0; i < datta.length; i++) {
  var PequenoAlm = datta[0].PequenoAlm;
  var Valencia = datta[0].Valencia;
  var Ano = datta[0].Ano;
  var Mes = datta[0].Mes;
  var Dia = datta[0].Mes;
  
  verif.push(PequenoAlm);
  verif1.push(Valencia);
  verif2.push(Ano);
  verif3.push(Mes);
  verif4.push(Dia);
}
    
 var event_data = {
   "events": [
     {
       "occasion": verif,
       "invited_count": verif1,
       "year": verif2,
       "month": verif3,
       "day": verif4,
       "cancelled": true
     }
   ]
 };

問題是日歷上沒有顯示任何信息。

我留下了我如何做的完整代碼，以及我試圖將數(shù)據(jù)從數(shù)據(jù)庫返回到日歷的部分代碼。

以下片段:

$(document).ready(function() {
  var date = new Date();
  var today = date.getDate();

  $(".right-button").click({
    date: date
  }, next_year);
  $(".left-button").click({
    date: date
  }, prev_year);
  $(".month").click({
    date: date
  }, month_click);
  $(".right-button1").click({
    date: date
  }, next_mes);
  $(".left-button1").click({
    date: date
  }, prev_mes);
  $("#add-button").click({
    date: date
  }, new_event);
  $(".months-row").children().eq(date.getMonth()).addClass("active-month");
  init_calendar(date);
  var events = check_events(today, date.getMonth() + 1, date.getFullYear());
  show_events(events, months[date.getMonth()], today);
});

function init_calendar(date) {
  $(".tbody").empty();
  $(".events-container").empty();
  var calendar_days = $(".tbody");
  var month = date.getMonth();
  var year = date.getFullYear();
  var day_count = days_in_month(month, year);
  var row = $("<tr class='table-row'></tr>");
  var today = date.getDate();

  date.setDate(1);
  var first_day = date.getDay();
  for (var i = 0; i < 35 + first_day; i++) {
    var day = i - first_day + 1;
    if (i % 7 === 0) {
      calendar_days.append(row);
      row = $("<tr class='table-row'></tr>");
    }

    if (i < first_day || day > day_count) {
      var curr_date = $("<td class='table-date nil'>" + "</td>");
      row.append(curr_date);
    } else {
      var curr_date = $("<td class='table-date'>" + day + "</td>");
      var events = check_events(day, month + 1, year);

      if (today === day && $(".active-date").length === 0) {
        curr_date.addClass("active-date");
        show_events(events, months[month], day);
      }

      if (events.length !== 0) {
        curr_date.addClass("event-date");
      }

      curr_date.click({
        events: events,
        month: months[month],
        day: day
      }, date_click);
      row.append(curr_date);
    }
  }

  calendar_days.append(row);
  $(".year").text(year);

  calendar_days.append(row);
  if (month == 0) {
    $(".mes").text("Janeiro");
  }
  if (month == 1) {
    $(".mes").text("Fevereiro");
  }
  if (month == 2) {
    $(".mes").text("Mar?o");
  }
  if (month == 3) {
    $(".mes").text("Abril");
  }
  if (month == 4) {
    $(".mes").text("Maio");
  }
  if (month == 5) {
    $(".mes").text("Junho");
  }
  if (month == 6) {
    $(".mes").text("Julho");
  }
  if (month == 7) {
    $(".mes").text("Agosto");
  }
  if (month == 8) {
    $(".mes").text("Setembro");
  }
  if (month == 9) {
    $(".mes").text("Outubro");
  }
  if (month == 10) {
    $(".mes").text("Novembro");
  }
  if (month == 11) {
    $(".mes").text("Dezembro");
  }
}

function days_in_month(month, year) {
  var monthStart = new Date(year, month, 1);
  var monthEnd = new Date(year, month + 1, 1);
  return (monthEnd - monthStart) / (1000 * 60 * 60 * 24);
}

function date_click(event) {
  $(".events-container").show(250);
  $("#diaalog").hide(250);
  $(".active-date").removeClass("active-date");
  $(this).addClass("active-date");
  show_events(event.data.events, event.data.month, event.data.day);
};

function month_click(event) {
  $(".events-container").show(250);
  $("#diaalog").hide(250);
  var date = event.data.date;
  $(".active-month").removeClass("active-month");
  $(this).addClass("active-month");
  var new_month = $(".month").index(this);
  date.setMonth(new_month);
  init_calendar(date);
}

function next_year(event) {
  $("#diaalog").hide(250);
  var date = event.data.date;
  var new_year = date.getFullYear() + 1;
  $("year").html(new_year);
  date.setFullYear(new_year);
  init_calendar(date);
}

function prev_year(event) {
  $("#diaalog").hide(250);
  var date = event.data.date;
  var new_year = date.getFullYear() - 1;
  $("year").html(new_year);
  date.setFullYear(new_year);
  init_calendar(date);
}

function next_mes(event) {
  $("#diaalog").hide(250);
  var date = event.data.date;
  var new_mes = date.getMonth() + 1;
  $("mes").html(new_mes);
  date.setMonth(new_mes);
  init_calendar(date);
}

function prev_mes(event) {
  $("#diaalog").hide(250);
  var date = event.data.date;
  var new_mes = date.getMonth() - 1;
  $("mes").html(new_mes);
  date.setMonth(new_mes);
  init_calendar(date);
}

function new_event(event) {
  if ($(".active-date").length === 0)
    return;
  $("inpuut").click(function() {
    $(this).removeClass("error-inpuut");
  })
  $("#diaalog input[type=text]").val('');
  $("#diaalog input[type=number]").val('');
  $(".events-container").hide(250);
  $("#diaalog").show(250);

  $("#cancel-button").click(function() {
    $("#reff").removeClass("error-inpuut");
    $("#reff1").removeClass("error-inpuut");
    $("#reff2").removeClass("error-inpuut");
    $("#almm").removeClass("error-inpuut");
    $("#almm1").removeClass("error-inpuut");
    $("#almm2").removeClass("error-inpuut");
    $("#almm3").removeClass("error-inpuut");
    $("#valref").removeClass("error-inpuut");
    $("#Dataref").removeClass("error-inpuut");
    $("#diaalog").hide(250);
    $(".events-container").show(250);
  });
}

function show_events(events, month, day) {
  $(".events-container").empty();
  $(".events-container").show(250);
  console.log(event_data["events"]);

  if (events.length === 0) {
    var event_card = $("<div class='event-card'></div>");
    var event_name = $("<div class='event-name'>N?o há refei??es marcadas para " + day + "  " + month + ".</div>");
    $(event_card).css({
      "border-left": "10px solid #FF1744"
    });
    $(event_card).append(event_name);
    $(".events-container").append(event_card);
  } else {
    for (var i = 0; i < events.length; i++) {
      var event_card = $("<div class='event-card'></div>");
      var event_name = $("<div class='event-name'>" + events[i]["occasion"] + ":</div>");
      var event_count = $("<div class='event-count'>" + events[i]["invited_count"] + " Invited</div>");

      if (events[i]["cancelled"] === true) {
        $(event_card).css({
          "border-left": "10px solid #FF1744"
        });
        event_count = $("<div class='event-cancelled'>Cancelled</div>");
      }
      $(event_card).append(event_name).append(event_count);
      $(".events-container").append(event_card);
    }
  }
}

function check_events(day, month, year) {
  var events = [];
  for (var i = 0; i < event_data["events"].length; i++) {
    var event = event_data["events"][i];
    if (event["day"] === day &&
      event["month"] === month &&
      event["year"] === year) {
      events.push(event);
    }
  }
  return events;
}

var datta = [{
  PequenoAlm: "Peq_Almo?o",
  Valencia: "Teste1",
  Ano: "2023",
  Mes: "6",
  Dia: "27",
}, ];

var verif = [];
var verif1 = [];
var verif2 = [];
var verif3 = [];
var verif4 = [];
for (var i = 0; i < datta.length; i++) {
  var PequenoAlm = datta[0].PequenoAlm;
  var Valencia = datta[0].Valencia;
  var Ano = datta[0].Ano;
  var Mes = datta[0].Mes;
  var Dia = datta[0].Mes;

  verif.push(PequenoAlm);
  verif1.push(Valencia);
  verif2.push(Ano);
  verif3.push(Mes);
  verif4.push(Dia);
}

var event_data = {
  "events": [{
    "occasion": verif,
    "invited_count": verif1,
    "year": verif2,
    "month": verif3,
    "day": verif4,
    "cancelled": true
  }]
};

const months = [
  "Janeiro",
  "Fevereiro",
  "Mar?o",
  "Abril",
  "maio",
  "Junho",
  "Julho",
  "Agosto",
  "Setembro",
  "Outubro",
  "Novembro",
  "Dezembro"
];

.conteent {
  overflow: none;
  max-width: 790px;
  padding: 0px 0;
  height: 500px;
  position: relative;
  margin: 20px auto;
  background: #52A0FD;
  background: -moz-linear-gradient(right, #52A0FD 0%, #00C9FB 80%, #00C9FB 100%);
  background: -webkit-linear-gradient(right, #52A0FD 0%, #00C9FB 80%, #00C9FB 100%);
  background: linear-gradient(to left, #52A0FD 0%, #00C9FB 80%, #00C9FB 100%);
  border-radius: 3px;
  box-shadow: 3px 8px 16px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  -moz-box-shadow: 3px 8px 16px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  -webkit-box-shadow: 3px 8px 16px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}


/*  Events display */

.events-container {
  overflow-y: scroll;
  height: 100%;
  margin: 0px auto;
  font: 13px Helvetica, Arial, sans-serif;
  display: inline-block;
  padding: 0 10px;
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;
}

.events-container:after {
  clear: both;
}

.event-card {
  padding: 20px 0;
  width: 350px;
  margin: 20px auto;
  display: block;
  background: #fff;
  border-left: 10px solid #52A0FD;
  border-radius: 3px;
  box-shadow: 3px 8px 16px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  -moz-box-shadow: 3px 8px 16px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  -webkit-box-shadow: 3px 8px 16px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.event-count,
.event-name,
.event-cancelled {
  display: inline;
  padding: 0 10px;
  font-size: 1rem;
}

.event-count {
  color: #52A0FD;
  text-align: right;
}

.event-name {
  padding-right: 0;
  text-align: left;
}

.event-cancelled {
  color: #FF1744;
  text-align: right;
}


/*  Calendar wrapper */

.calendar-container {
  position: relative;
  margin: 0px auto;
  height: 100%;
  background: #fff;
  font: 13px Helvetica, Arial, san-serif;
  display: inline-block;
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
}

.calendar-container:after {
  clear: both;
}

.calendar {
  display: table;
}


/* Calendar Header */

.year-header {
  background: #52A0FD;
  background: -moz-linear-gradient(left, #52A0FD 0%, #00C9FB 80%, #00C9FB 100%);
  background: -webkit-linear-gradient(left, #52A0FD 0%, #00C9FB 80%, #00C9FB 100%);
  background: linear-gradient(to right, #52A0FD 0%, #00C9FB 80%, #00C9FB 100%);
  font-family: Helvetica;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  height: 40px;
  text-align: center;
  position: relative;
  color: #fff;
  border-top-left-radius: 3px;
}

.year-header span {
  display: inline-block;
  font-size: 20px;
  line-height: 40px;
}

.left-button,
.right-button {
  cursor: pointer;
  width: 28px;
  text-align: center;
  position: absolute;
}

.left-button1,
.right-button1 {
  cursor: pointer;
  width: 28px;
  text-align: center;
  position: absolute;
}

.left-button {
  left: 0;
  -webkit-border-top-left-radius: 5px;
  -moz-border-radius-topleft: 5px;
  border-top-left-radius: 5px;
}

.left-button1 {
  left: 0;
  -webkit-border-top-left-radius: 5px;
  -moz-border-radius-topleft: 5px;
  border-top-left-radius: 5px;
}

.right-button {
  right: 0;
  top: 0;
  -webkit-border-top-right-radius: 5px;
  -moz-border-radius-topright: 5px;
  border-top-right-radius: 5px;
}

.right-button1 {
  right: 0;
  top: 0;
  -webkit-border-top-right-radius: 5px;
  -moz-border-radius-topright: 5px;
  border-top-right-radius: 5px;
}

.left-button:hover {
  background: #3FADFF;
}

.left-button1:hover {
  background: #3FADFF;
}

.right-button:hover {
  background: #00C1FF;
}

.right-button1:hover {
  background: #00C1FF;
}

.ajustebot {
  margin-top: -5%;
}


/* Buttons */

.bbuutton {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  font-size: 1rem;
  border-radius: 25px;
  padding: 0.65rem 1.9rem;
  transition: .2s ease all;
  color: white;
  border: none;
  box-shadow: -1px 10px 20px #9BC6FD;
  background: #52A0FD;
  background: -moz-linear-gradient(left, #52A0FD 0%, #00C9FB 80%, #00C9FB 100%);
  background: -webkit-linear-gradient(left, #52A0FD 0%, #00C9FB 80%, #00C9FB 100%);
  background: linear-gradient(to right, #52A0FD 0%, #00C9FB 80%, #00C9FB 100%);
}

#cancel-button {
  box-shadow: -1px 10px 20px #FF7DAE;
  background: #FF1744;
  background: -moz-linear-gradient(left, #FF1744 0%, #FF5D95 80%, #FF5D95 100%);
  background: -webkit-linear-gradient(left, #FF1744 0%, #FF5D95 80%, #FF5D95 100%);
  background: linear-gradient(to right, #FF1744 0%, #FF5D95 80%, #FF5D95 100%);
}

#add-button {
  display: block;
  position: absolute;
  right: 20px;
  bottom: 20px;
}

#add-button:hover,
#ok-button:hover,
#cancel-button:hover {
  transform: scale(1.03);
}

#add-button:active,
#ok-button:active,
#cancel-button:active {
  transform: translateY(3px) scale(.97);
}


/* Days/months tables */

.days-table,
.dates-table {
  border-collapse: separate;
  text-align: center;
}

.day {
  height: 26px;
  width: 26px;
  padding: 0 10px;
  line-height: 26px;
  border: 2px solid transparent;
  text-transform: uppercase;
  font-size: 90%;
  color: #9e9e9e;
}

.active-month {
  font-weight: bold;
  font-size: 14px;
  color: #FF1744;
  text-shadow: 0 1px 4px RGBA(255, 50, 120, .8);
}


/*  Dates table */

.table-date {
  cursor: default;
  color: #2b2b2b;
  height: 26px;
  width: 26px;
  font-size: 15px;
  padding: 10px;
  line-height: 26px;
  text-align: center;
  border-radius: 50%;
  border: 2px solid transparent;
  transition: all 250ms;
}

.table-date:not(.nil):hover {
  border-color: #FF1744;
  box-shadow: 0 2px 6px RGBA(255, 50, 120, .9);
}

.event-date {
  border-color: #52A0FD;
  box-shadow: 0 2px 8px RGBA(130, 180, 255, .9);
}

.active-date {
  background: #FF1744;
  box-shadow: 0 2px 8px RGBA(255, 50, 120, .9);
  color: #fff;
}

.event-date.active-date {
  background: #52A0FD;
  box-shadow: 0 2px 8px RGBA(130, 180, 255, .9);
}


/* input dialog */

.diaalog {
  z-index: 5;
  background: #fff;
  position: absolute;
  width: 438px;
  height: 500px;
  left: 352px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  display: none;
  border-left: 1px #aaa solid;
  top: 0%;
}

.diaalog-header {
  margin: 20px;
  color: #333;
  text-align: center;
}

.form-ccontainer {
  margin-top: 5%;
}

.form-labeel {
  color: #333;
}

.inpuut {
  border: none;
  background: none;
  border-bottom: 1px #aaa solid;
  display: block;
  margin-bottom: 50px;
  width: 200px;
  height: 40px;
  text-align: center;
  transition: border-color 250ms;
}

.inpuut:focus {
  outline: none;
  border-color: #00C9FB;
}

.error-inpuut {
  border-color: #FF1744;
}


/* Tablets and smaller */

@media only screen and (max-width: 780px) {
  .conteent {
    overflow: visible;
    position: relative;
    max-width: 100%;
    width: 370px;
    height: 100%;
    background: #52A0FD;
    background: -moz-linear-gradient(left, #52A0FD 0%, #00C9FB 80%, #00C9FB 100%);
    background: -webkit-linear-gradient(left, #52A0FD 0%, #00C9FB 80%, #00C9FB 100%);
    background: linear-gradient(to right, #52A0FD 0%, #00C9FB 80%, #00C9FB 100%);
  }
  .diaalog {
    width: 370px;
    height: 450px;
    border-radius: 3px;
    top: 0;
    left: 0;
  }
  .events-container {
    float: none;
    overflow: visible;
    margin: 0 auto;
    padding: 0;
    display: block;
    left: 0;
    border-radius: 3px;
  }
  .calendar-container {
    float: none;
    padding: 0;
    margin: 0 auto;
    margin-right: 0;
    display: block;
    left: 0;
    border-radius: 3px;
    box-shadow: 3px 8px 16px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    -moz-box-shadow: 3px 8px 16px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    -webkit-box-shadow: 3px 8px 16px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  }
}


/* Small phone screens */

@media only screen and (max-width: 400px) {
  .conteent,
  .events-container,
  .year-header,
  .calendar-container {
    width: 320px;
  }
  .diaalog {
    width: 320px;
  }
  .days-table {
    width: 320px;
    padding: 7px 7px;
  }
  .event-card {
    width: 300px;
  }
  .day {
    padding: 7px 7px;
  }
  .table-date {
    width: 320px;
    height: 20px;
    line-height: 20px;
  }
  .event-name,
  .event-count,
  .event-cancelled {
    font-size: .8rem;
  }
  #add-button {
    bottom: 2px;
    right: 5px;
    padding: 0.5rem 1.5rem;
  }
  .ajustebot {
    margin-top: -12%;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="conteent">
  <div class="calendar-container">
    <div class="calendar">
      <div class="year-header">
        <span class="left-button" id="prev"> &lang; </span>
        <span class="year" id="label"></span>
        <span class="right-button" id="next"> &rang; </span>
      </div>
      <div class="year-header">
        <span class="left-button1" id="prev1"> &lang; </span>
        <span class="mes" id="label"></span>
        <span class="right-button1" id="next1"> &rang; </span>
      </div>
      <table class="days-table">
        <td class="day">Dom</td>
        <td class="day">Seg</td>
        <td class="day">Ter</td>
        <td class="day">Qua</td>
        <td class="day">Qui</td>
        <td class="day">Sex</td>
        <td class="day">Sab</td>
      </table>
      <div class="frame">
        <table class="dates-table">
          <tbody class="tbody">
          </tbody>
        </table>
      </div>
      <button class="bbuutton" id="add-button">Marca??o</button>
    </div>
  </div>
  <div class="events-container"></div>
  <div class="diaalog" id="diaalog">
    <h2 class="diaalog-header"> Adicionar Nova Refei??o </h2>
    <form class="fform" id="fform">
      <div class="form-ccontainer" align="center">
        <p class="form-labeel">Pequenas Refei??es <span style="color: red;">*</span></p>
        <div class="radio_containner">
          <input type="checkbox" class="inradio" name="reff" id="reff" value="Peq_Almo?o">
          <label for="reff" class="labradio">Pequeno-Almo?o</label>
          <input type="checkbox" class="inradio" name="reff1" id="reff1" value="Lanche">
          <label for="reff1" class="labradio" style="margin-left: 3%;">Lanche</label>
          <input type="checkbox" class="inradio" name="reff2" id="reff2" value="Ceia">
          <label for="reff2" class="labradio" style="margin-left: 3%;">Ceia</label>
        </div>
        <p class="form-labeel">Refei??o <span style="color: red;">*</span></p>
        <div class="radio_containner">
          <input type="checkbox" class="inradio" name="almm" id="almm" value="Almo?o">
          <label for="almm" class="labradio">Almo?o</label>
          <input type="checkbox" class="inradio" name="almm1" id="almm1" value="Almo?o_(Dieta)">
          <label for="almm1" class="labradio" style="margin-left: 3%;">Almo?o Dieta</label>
          <input type="checkbox" class="inradio" name="almm2" id="almm2" value="Jantar">
          <label for="almm2" class="labradio" style="margin-left: 3%;">Jantar</label>
          <input type="checkbox" class="inradio" name="almm3" id="almm3" value="Jantar_(Dieta)">
          <label for="almm3" class="labradio" style="margin-left: 3%;">Jantar Dieta</label>
        </div>
        <div class="form-group">
          <p class="form-labeel"> Valência <span style="color: red;">*</span></p>
          <select class="js-states form-control ajuste sssinglett" name="valref" id="valref">
            <option></option>
            <option value="3" selected> ERPI</option>
          </select>
        </div>
        <label for="Dataref" class="form-labeel">Período de Marca??o </label>
        <input type="date" class="inpuut" name="Dataref" id="Dataref">
        <div class="ajustebot">
          <input type="button" value="Cancel" class="bbuutton" id="cancel-button">
          <input type="button" value="OK" class="bbuutton" id="ok-button">
        </div>
      </div>
    </form>
  </div>
</div>

您對事件的配置不正確——在定義event_data時，您定義了一個包含所有事件的數(shù)組的單個事件。例如，第一個事件包含所有事件的日期。因?yàn)橹挥幸粋€，所以最后得到的是day =[& quot；23 & quot]而不是23，這是打破了日歷代碼。您還需要將每個元素轉(zhuǎn)換為數(shù)字，因?yàn)樗鼈兡壳笆亲址８缦?

var event_data = {
    "events": []
};

for (var i = 0; i < verif.length; i++) {
    event_data.events.push({
        "occasion": verif[i],
        "invited_count": Number(verif1[i]),
        "year": Number(verif2[i]),
        "month": Number(verif3[i]),
        "day": Number(verif4[i]),
        "cancelled": true
    });
}

這段代碼將事件添加到verif中每一項(xiàng)的事件數(shù)據(jù)中。

此外，在前面的代碼中，您錯誤地定義了Dia，用月份而不是日期。 更正:

var Dia = datta[0].Dia;

而不是

var Dia = datta[0].Mes;

更新筆:https://codepen.io/CoderMuffin/pen/RweXKJM