FullCalendar Rails7

Question

我试图添加完整日历到我的rails项目的创业板‘满日历-rails’，我已经分配了任务，我想显示在这个日历，有一个start_time和一个end_time。我照它说的做，但它没有显示出来。现在我看到的是简单的日历，但不一样。我在application.js和application.scss中安装了momentsjs rails宝石。

js

/要求时刻

//=需要完整的日历

//=需要完整的日历/地区-所有

$('#calendar').fullCalendar({
eventSources: ["/assigned_tasks"]});

function eventCalendar() {
return $('#calendar').fullCalendar({
    eventSources: ["/assigned_tasks"]
});

}；

function eventCalendar() {
return $('#calendar').fullCalendar({
    eventSources: ["/assigned_tasks"]
});

}；

function clearCalendar() {
$('#calendar').fullCalendar('delete');
$('#calendar').html('');

}；

$(document).on('turbolinks:load', function(){
eventCalendar();});

$(document).on('turbolinks:before-cache', clearCalendar);

scss

*= require fullcalendar
*= require fullcalendar.print

但问题是我在主页上创建了一个div，它没有显示日历

div id=“日历”

对不起，我的英语

Answer 1

基本上，我所做的是能够使用完整的日历，但不是它的全部投入。in`application.hmtl.erb

    document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {

            headerToolbar: {
                left: 'today',
                center: 'prev title next',
                right: 'dayGridMonth,timeGridWeek,timeGridDay'
            },
            selectable: true,
            droppable: true,
            selectHelper: true,
            editable: true,
            eventLimit:true,
            events: '/assigned_tasks.json',
            select: function (start, end){
                $.getScript('/assigned_tasks/news',function(){
                    $('#event_date_range').val(moment(start).format("MM/DD/YYYY HH:mm") + ' - ' + moment(end).format("MM/DD/YYYY HH:mm"))
                    date_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 (assigned_task, delta, revertFunc) {
                 assigned_task_data = {
                    assigned_task: {
                        id: assigned_task.id,
                        start_time: assigned_task.start_time.format(),
                        end_time: assigned_task.end_time.format()
                    }

                };
                $.ajax({
                    url: assigned_task.update_url,
                    data: assigned_task_data,
                    type: 'PATCH'
                });
            },
            eventClick: function (assigned_task, jsEvent, view){
                alert();


            },
            initialView: 'dayGridMonth'
        });
        calendar.render();
    });

</script>`

然后创建对应的js、modals和部分视图，但是拖放不起作用，单击它不会显示for，但我可以发送警报，但是如果我创建了一个事件，它会出现在日历上并带有颜色，我希望这对尝试使用完整日历和rails 7的任何人都是有用的。