在完整日历上更改月/周时更新事件json url

Question

每当我更改月份或周时，我都需要更新json url链接。

例：

启动Json url是：

/json/?start=2018-01-28&end=2018-03-10

当我改为下个月url改为：

/json/?start=2018-02-25&end=2018-04-07

我尝试通过存储更新URL，通过getDate（），但没有工作。

我目前的代码：

document.addEventListener('DOMContentLoaded', function() {

    var element = document.querySelector(".json-path");

    var jsonPath = element.innerText;
    $.ajax({
        type: 'GET',
        url: jsonPath,
        success: function(output) {
          let availability = output.availability
          calendar(availability);
          console.log(output);
       }

   });


   function calendar(availability){
      console.log(availability);
      let date = availability;

      $('#calendar').fullCalendar({
         header: {
         left: 'none',
         center: 'prev,title,next',
         right: 'month,agendaWeek'
      },
      height: 1000,
      navLinks: true,
      editable: false,
      eventLimit: true,
      selectHelper: true,
      businessHours: date,
      events: function(start,end,timezone,callback) {
          $.ajax({
            url: jsonPath,
            success: function(data) {
              var events = [];
              callback(data.events)
              console.log("Current path " + jsonPath);
          },
      });
    }
  });

编辑：

目前我使用以下代码获得当前月/周：

let day = document.querySelectorAll(".fc-day");

  let splitFirstDate = day[0].dataset.date.split('-');

  let getFirstYear = parseInt(splitFirstDate[0])
  let getFirstMonth = parseInt(splitFirstDate[1])
  let getFirstDay = parseInt(splitFirstDate[2])

  let splitLastDate = day[41].dataset.date.split('-');

  let getLastYear = parseInt(splitLastDate[0])
  let getLastMonth = parseInt(splitLastDate[1])
  let getLastDay = parseInt(splitLastDate[2])

获取日期后，我更新了json路径：

<p class="json-path">{% url 'agenda-json' object.professional.pk object.pk %}?start=<span class="start-date__year"></span><span class="start-date__month"></span><span class="start-date__day"></span>&end=<span class="end-date__year"></span><span class="end-date__month"></span><span class="end-date__day"></span></p>

Answer 1

如果我理解正确，那么当过滤器“月”或“周”更改时，您是否尝试使用AJAX调用从PHP检索JSON？

我创建了一个带有几个月和几天选择的小例子，对于这两个元素我添加了一个事件处理程序，在更改时执行函数getJson。

function getJson() {
  var month = $("#month").val();
  var day = $("#day").val();
  
  var ajax_url = "http://example.com/getjson.php?month=" + month + "&day=" + day;
  
  console.log(ajax_url);
  
  //execute your ajax with the 'ajax_url'
}

$("#month").change(getJson);
$("#day").change(getJson);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="month">
  <option value="1">Januari</option>
  <option value="2">Februari</option>
  <option value="3">March</option>
  <option value="4">April</option>
  <option value="5">May</option>
  <option value="6">June</option>
  <option value="7">Jule</option>
  <option value="8">August</option>
  <option value="9">September</option>
  <option value="10">Oktober</option>
  <option value="11">November</option>
  <option value="12">December</option>
</select>
<select id="day">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

Answer 2

得到它了！

我为解决这个问题做了什么：

在内部事件功能中，我放置了一个获取用户日期的代码。

events: function(start,end,timezone,callback) {

      let date = new Date()
      let day = date.getDate();
      let month = (date.getMonth() + 1);
      let year = date.getFullYear();

      startDateYear.innerText = year;
      startDateMonth.innerText = (month-3);
      if (startDateMonth.innerText <= 0) {
        startDateYear.innerText = (year-1) + '-';
        startDateMonth.innerText = 12 + "-";
      }else {
        startDateYear.innerText = year;
        startDateMonth.innerText = startDateMonth.innerText + "-";
      }
      startDateDay.innerText = 20;

      endDateYear.innerText = year;
      endDateMonth.innerText = (month+2);
      if (endDateMonth.innerText >= 13) {
        endDateYear.innerText = (year+1) + "-";
        endDateMonth.innerText = 1 + "-";
      }else {
        endDateYear.innerText = year + "-";
        endDateMonth.innerText= endDateMonth.innerText + "-";
      }
      endDateDay.innerText = 20;




      var element = document.querySelector(".json-path");
      var jsonPath = element.innerText;

      $.ajax({
        url: jsonPath,
        success: function(data) {
          var events = [];
          callback(data.events)
          // console.log("Path de dentro do calendario " + jsonPath);
        },
      });
    }
});

然后，当用户更改月份时，我获得当前月份并将此信息放在sessionStorage上。

let buttonPrevious = document.querySelector(".fc-prev-button")

buttonPrevious.addEventListener("click", () => {

  let day = document.querySelectorAll(".fc-day");

  let splitFirstDate = day[0].dataset.date.split('-');

  let getFirstYear = parseInt(splitFirstDate[0])
  let getFirstMonth = parseInt(splitFirstDate[1]) - 2
  let getFirstDay = parseInt(splitFirstDate[2])

  let splitLastDate = day[41].dataset.date.split('-');

  let getLastYear = parseInt(splitLastDate[0])
  let getLastMonth = parseInt(splitLastDate[1]) + 2
  let getLastDay = parseInt(splitLastDate[2])


  if (getFirstMonth <= 0) {
    getFirstYear = (getFirstYear-1);
    getFirstMonth = 12;
  }else {
    getFirstMonth = getFirstMonth;
  }

  if (getLastMonth >= 13) {
    getLastYear = (getLastYear+1);
    getLastMonth = 1;
  }else {
    getLastMonth = getLastMonth;
  }

  sessionStorage.setItem('firstDateYear', getFirstYear + '-')
  sessionStorage.setItem('firstDateMonth', getFirstMonth + '-')

  sessionStorage.setItem('lastDateYear', getLastYear + '-')
  sessionStorage.setItem('lastDateMonth', getLastMonth + '-')

})

let buttonNext = document.querySelector(".fc-next-button")

buttonNext.addEventListener("click", () => {

  let day = document.querySelectorAll(".fc-day");

  let splitFirstDate = day[0].dataset.date.split('-');

  let getFirstYear = parseInt(splitFirstDate[0])
  let getFirstMonth = parseInt(splitFirstDate[1]) - 2
  let getFirstDay = parseInt(splitFirstDate[2])

  let splitLastDate = day[41].dataset.date.split('-');

  let getLastYear = parseInt(splitLastDate[0])
  let getLastMonth = parseInt(splitLastDate[1]) + 2
  let getLastDay = parseInt(splitLastDate[2])


  if (getFirstMonth <= 0) {
    getFirstYear = (getFirstYear-1);
    getFirstMonth = 12;
  }else {
    getFirstMonth = getFirstMonth;
  }

  if (getLastMonth >= 13) {
    getLastYear = (getLastYear+1);
    getLastMonth = 1;
  }else {
    getLastMonth = getLastMonth;
  }


  sessionStorage.setItem('firstDateYear', getFirstYear + '-')
  sessionStorage.setItem('firstDateMonth', getFirstMonth + '-')

  sessionStorage.setItem('lastDateYear', getLastYear + '-')
  sessionStorage.setItem('lastDateMonth', getLastMonth + '-')

})

然后，在内部事件函数我验证了是否有存储并替换json url

if (sessionStorage.getItem('firstDateYear')) {
        startDateYear.innerText = sessionStorage.getItem('firstDateYear')
        startDateMonth.innerText = sessionStorage.getItem('firstDateMonth')

        endDateYear.innerText = sessionStorage.getItem('lastDateYear')
        endDateMonth.innerText =sessionStorage.getItem('lastDateMonth')
      }