fullcalendar 4，日历完全渲染后的回调 [英] fullcalendar 4, callback when calendar is completely rendered

问题描述

Fullcalendar版本3曾经有一个回调函数，一旦所有事件都呈现出来，该函数就会触发.我会用这个:

Fullcalendar version 3 used to have a callback function that would fire once all events have rendered. I would use this:

eventAfterAllRender: function( view ) { 
    load_call_list();
}

load_call_list是我根据某些事件的状态对它们进行计数的功能.它还会查询我的数据库以获取其他信息.

load_call_list is a function I made to count certain events based on their status. It also queries my database for other information.

使用全日历4，一旦日历已完全加载并且所有事件都已呈现，我想调用该函数.这是现在如何初始化我的日历...

Using fullcalendar 4, once the calendar has fully loaded and all the events have rendered, I want to call that function. Here's how my calendar is initialized now...

<script>
document.addEventListener('DOMContentLoaded', function() {
  var calendar_full = document.getElementById('calendar_full');
  var calendar = new FullCalendar.Calendar(calendar_full, {
        height: 700,
        selectMirror: true,
        events: {
            url: 'ajax_get_json.php?what=location_appointments'
        },
  ....

我想我对javascript的缺乏理解限制了我对日历事件全部完全加载时可以捕获的位置的了解.

I suppose my lack of understanding about javascript is limiting me in understanding where I can catch when the calendar events have all fully loaded.

我考虑过使用eventrender，但是我也不希望每次都使用该函数查询数据库时触发load_call_list.

I thought about using eventrender, but I don't want the load_call_list to be fired every time as my database is queried with that function too.

我尝试使用jquery $(document).ready(function(){})，但在事件呈现之前就触发了.

I tried using jquery $(document).ready(function(){}) but that fires before the events have been rendered.

有关如何实现此目标的任何建议?

Any advice on how to accomplish this?

推荐答案

好的，那怎么办?我可以使用加载功能.日历加载完成后，我可以调用load_call_list函数.我正在使用bool变量来阻止每次加载日历时都不会触发它，而不会刷新页面(例如，循环数月或数周时).

Ok, so how about this? I can use the loading function. When the calendar is done loading, I can call my load_call_list function. I am using a bool variable to stop it from firing everytime the calendar loads without a page refresh (like when cycling through months or weeks, for instance).

第一次加载页面时，我有一个名为initial_load = true的变量.当日历完成加载"后，如果这是真的，那么我将调用函数并将我的initial_load设置为false，这样它就不会像我之前解释的那样触发.

When the page first loads, I have a var called initial_load = true. When the calendar has finished 'loading', if this is true, then I'll call my function and set my initial_load to false so it won't just fire off as I explained before.

<script>
//set initial_load so when the calendar is done loading, it'll get call list info
var initial_load = true;

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


    var calendar1 = document.getElementById('calendar_mini');
    var calendar_mini = new FullCalendar.Calendar(calendar1, {
       ....
       ....
       loading: function(bool) {

        if (bool) {
            $('.loader').show();
            $('#show_cancelled_appts').hide();
            $('#show_rescheduled_appts').hide();
            $('#print_calendar').hide();
        } else {
            $('.loader').hide();
            $('#show_cancelled_appts').show();
            $('#show_rescheduled_appts').show();
            $('#print_calendar').show();

            //once it's done loading, load call list with current date stuff; set 
            initial_load = false so it doesn't keep loading call list when calendar changes while cycling months/weeks/etc
                var today = moment().format('YYYY-MM-DD');
                if (initial_load) {
                    load_call_list(today);
                    initial_load = false;
                }


        }
 },

它确实有效！有什么想法吗?这样可以编程吗?到目前为止，我还没有看到任何不利之处.

It does actually work! Thoughts on that? Is this okay programming? I don't see any downside as of now.

这篇关于fullcalendar 4，日历完全渲染后的回调的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！