Question

我有全日历日历，除非我使用涡轮链接，否则不会显示。但是我不想使用turbolink。是否有另一种加载日历的方式。

我的calendar.js看起来像：

var initialize_calendar;
initialize_calendar = function() {
    $('.calendar').each(function(){
        var calendar = $(this);
        calendar.fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            lang: "en",
            selectable: true,
            selectHelper: true,
            editable: true,
            eventLimit: true,
            events: '/events.json',

            select: function(start, end) {
                $.getScript('/events/new', function() {
                    $('#event_date_range').val(moment(start).format("MM/DD/YYYY HH:mm") + ' - ' + moment(end).format("MM/DD/YYYY HH:mm"));
                    date_range_picker();
                    $('.start_hidden').val(moment(start).format('YYYY-MM-DD HH:mm'));
                    $('.end_hidden').val(moment(end).format('YYYY-MM-DD HH:mm'));
                });

                calendar.fullCalendar('unselect');
            },

            eventDrop: function(event, delta, revertFunc) {
                event_data = {
                    event: {
                        id: event.id,
                        start: event.start.format(),
                        end: event.end.format()
                    }
                };
                // noinspection Annotator
                $.ajax({
                    url: event.update_url,
                    data: event_data,
                    type: 'PATCH'
                });
            },

            eventClick: function(event, jsEvent, view) {
                // noinspection Annotator
                $.getScript(event.show_url, function() {
                    $('#event_date_range').val(moment(event.start).format("MM/DD/YYYY HH:mm") + ' - ' + moment(event.end).format("MM/DD/YYYY HH:mm"));
                    date_range_picker();
                    $('.start_hidden').val(moment(event.start).format('YYYY-MM-DD HH:mm'));
                    $('.end_hidden').val(moment(event.end).format('YYYY-MM-DD HH:mm'));
                });
            }
        });
    })
};

（我在底部删除了以下内容，因为我正在从应用程序中删除涡轮链接：$(document).on('turbolinks:load', initialize_calendar); ）

在我的index.html.erb中，我有：

  <div class="homepage_box_top_dashboard">
        <div class='calendar' id="calendar"></div>
      </div>

请帮忙吗？

Answer 1

您仍然需要触发initialize_calendar()函数触发的功能。

此是由TurboLinks触发。现在您需要其他一些东西来触发它。

简单地说：

$(document).on('turbolinks:load', initialize_calendar);

表示：“当turbolinks:load事件触发时，调用initialize_calendar”

现在，您只是告诉浏览器initialize_calendar存在，但是您永远不会打开它。

您应该可以使用：

// Jquery
$(document).on('ready', initialize_calendar());

-或-

// JQuery shorthand
$(document).ready(initialize_calendar());

表示“ document:ready事件触发时，调用initialize_calendar”

-或-

// pure Javascript
document.addEventListener('DOMContentLoaded', function() {
   initialize_calendar();
});

表示“ DOMContentLoaded事件触发时，调用initialize_calendar”

您总是必须告诉JavaScript什么时候做某事。页面加载时不一定必须如此。例如，您可以将此操作分配给按钮：

$('#initialize_calendar_button').on('click', initialize_calendar);

希望有帮助。

Turbolink-Fullcalendar仅在重新加载时显示

1 个答案: