在完整日歷上更改月/周時更新事件json url

Question

每次更改月或周時，都需要更新json url鏈接。

例：

啟動Json網址為：

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

當我更改為下個月時，URL更改為：

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

我試圖通過getDate（）通過存儲更新url，但是沒有起作用。

我當前的代碼：

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

如果我對您的理解正確，那么當過濾器“ month”或“ week”更改時，您正在嘗試使用AJAX調用從PHP檢索JSON嗎？

我創建了一個選擇數月getJson天的小示例，向這兩個元素添加了一個事件處理程序，該事件處理程序在更改后執行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')
      }