无法添加自定义函数组成的数组作为事件源

Question

我已经使用 AJAX 通过 API 从数据库请求数据。这是 function.Since dB 中的格式与完整日历要求的格式不同，我创建了一个名为 schedule 的对象，它看起来与事件对象相同，用于存储每个事件项。然后将每个对象推送到一个名为 schedules 的数组中。（如果有人问，reformattingTime() 只是将我从数据库中获取的字符串从 HHMM 更改为 HH:MM:SS 格式）

    function getCourse(arr){
        $.ajax({
            type: "GET",
            url: '/course',
            success: function(req){
                for (var i = 0; i < req.length;i++){
                    var schedule = {daysOfWeek:[]};
                    schedule.title = req[i].course_name;
                    schedule.daysOfWeek = req[i].course_day;
                    schedule.startTime = reformattingTime(req[i].course_starttime);
                    schedule.endTime = reformattingTime(req[i].course_endtime);
                    arr.push(schedule);
                }

            },
            error: function(err){
                alert('Error:' + err);
            }
        }
        )
    }

here's how schedules[0] looks like

接下来，当我加载页面时，我将日程添加为事件源，然后呈现日历。但是，事件不会出现在日历中。

    <script>
        var schedules = [];

        $(document).ready(function(){
            getCourse(schedules);
            var calendarEl = document.getElementById('calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, {
                plugins: ['timeGrid', 'dayGrid', 'interaction', 'list'],
                header:{
                    left: 'timeGridWeek,listMonth'
                },
                defaultView: 'timeGridWeek',
            });
            calendar.addEventSource(schedules);
            calendar.render();
        });

如果我对数组进行硬编码，就可以显示事件。我已经检查过 getCourse() 中的时间表对象是否与我硬编码的相同。

index 0 is hard coded while index 1 is generated from the function. At this situation, only 0 is displayed

<script>
        var schedules = [{
          title: "A1",
          startTime: "18:00:00",
          endTime: "20:00:00",
          daysOfWeek:['1']
        }];

        $(document).ready(function(){
            getCourse(schedules);
            var calendarEl = document.getElementById('calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, {
                plugins: ['timeGrid', 'dayGrid', 'interaction', 'list'],
                header:{
                    left: 'timeGridWeek,listMonth'
                },
                defaultView: 'timeGridWeek',
            });
            calendar.addEventSource(schedules);
            calendar.render();
        });

Answer 1

您的问题是 AJAX 请求是异步的。这意味着其余代码在请求完成之前继续执行。这意味着当日历被实例化时，你的日程总是空的。因此你需要等到请求完成。所以你必须做如下的事情。我还添加了一些您可以利用 ES6+ 功能的进一步代码改进。

我不知道 API 调用等，所以无法真正测试所有内容，但这是您需要做的。

function getCourse(arr) {
  return $.ajax({ // return the promise
    type: "GET",
    url: '/course'
  })
}

function renderCalendar(courseList) {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: ['timeGrid', 'dayGrid', 'interaction', 'list'],
    header: {
      left: 'timeGridWeek,listMonth'
    },
    defaultView: 'timeGridWeek',
  });
  calendar.addEventSource(schedules);
  calendar.render();
}


function toCourseModel(course) {
  return {
    daysOfWeek: [],
    title: req[i].course_name,
    daysOfWeek: req[i].course_day,
    startTime: reformattingTime(req[i].course_starttime),
    endTime: reformattingTime(req[i].course_endtime),
  }
}

// DOMContentLoaded
// @see https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
document.addEventListener('DOMContentLoaded', async (event) => { // ES6+ Native javascript.
  console.log('DOM fully loaded and parsed');

  const coursesList = await getCourse().catch(console.error) // await till async promise is complete
  const transFormed = coursesList.map((course) => { // ES6 Array.map() method
    return toCourseModel(course);
  });

  // Now create the calendar
  renderCalendar(transFormed);

});

无法添加自定义函数组成的数组作为事件源

unable to add an array formed by self-defined function as an event source

javascript

fullcalendar

fullcalendar-4