Question: Return data from database and show in calendar

I'm creating a calendar for event bookings. The calendar is already working at the event registration level. I'm having trouble then showing the events registered in the database on the calendar.
To show the data in the database I am trying this way:
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
     }
   ]
 };

The problem is that it doesn't show any information on the calendar.
I leave the complete code of how I am doing it and with the part of the code that I am trying to return the data from the database to the calendar.
Snippet below:


$(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>



codepen
Can you help overcome this difficulty?
I'm trying like this:
var event_data = {
  "events": []
};

$(document).ready(function () {

  $.getJSON('consrefeicoes.php', function (datta) {
  
    for (var i = 0; i < datta.length; i++) {

      PequenoAlm = datta[i].PequenoAlm;     
      Valencia = datta[i].Valencia;
      Ano = datta[i].Ano;
      mes = datta[i].mes;
      dia = datta[i].dia;
      
      event_data.events.push({
        "occasion": PequenoAlm,
        "invited_count": Valencia,
        "year": Number(Ano),
        "month": Number(mes),
        "day": Number(dia),
        "cancelled": true
      })
      
    };

  });
});

php:
$Colaborador = $_SESSION['usuarioId'];

$query = $conn->prepare("SELECT PequenoAlm, Alm, Lan, jant, Ceia, Valencia, YEAR(Data) AS Ano, Colaborador, MONTH(Data) AS mes, DAY(Data) AS dia

FROM raddb.MarcErpi WHERE raddb.MarcErpi.Colaborador = ?");

$query->execute([$Colaborador]);

$json = [];
while($row=$query->fetch(PDO::FETCH_ASSOC)){
    extract($row);

    $json[]= ['PequenoAlm' =>(string)$PequenoAlm, 'Alm' =>(string)$Alm, 'Lan' =>(string)$Lan, 'jant' =>(string)$jant, 'Ceia' =>(string)$Ceia, 'Valencia' =>(string)$Valencia, 
    'Ano' =>(string)$Ano, 'Colaborador' =>(string)$Colaborador, 'mes' =>(string)$mes, 'dia' =>(string)$dia];
}

echo json_encode($json);


(3) [{…}, {…}, {…}]  
0 :  {PequenoAlm: 'Peq_Almoço', Alm: 'Almoço', Lan: 'Lanche', jant: '', Ceia: '', …}  
1 :  {PequenoAlm: 'Peq_Almoço', Alm: 'Almoço', Lan: '', jant: '', Ceia: '', …}  
2 :  {PequenoAlm: '', Alm: '', Lan: 'Lanche', jant: 'Jantar', Ceia: '', …} length :   
3 [[Prototype]] :  Array(0)



Answer:
You are configuring your event incorrectly - when defining event_data, you define a single event that has arrays of all of the events. For example, the first event has the date of all of them. Since there is only one, you end up with day = ["23"] instead of 23, which is breaking the calendar code. You also need to convert each element to a number, as they are currently strings. Here is the correction:
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
    });
}

This code adds an event to event data for each item in verif.
In addition, earlier in your code, you define Dia incorrectly, with the month rather than the day.
Correction:
var Dia = datta[0].Dia;

rather than
var Dia = datta[0].Mes;

Updated pen: https://codepen.io/CoderMuffin/pen/RweXKJM