2

我正在尝试使用 gem 'fullcalendar-rails' 将 fullcalendar 添加到我的 rails 项目中，我已经分配了我想在日历中显示的任务，有一个 start_time 和一个 end_time。我按照它说的做了一切，但它没有显示出来。现在我看到了简单的日历，但不一样。我安装了 momentjs-rails gem，然后在 application.js 和 application.scss

js

//= 需要时刻

//= 需要完整日历

//= 需要全日历/区域设置-all

$('#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="日历"

对不起我的英语

4

1 回答 1

2

基本上我所做的就是能够使用 fullcanlendar 但不能发挥其全部潜力。在`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 ，模态和局部视图，但拖放不起作用，onclick 它不显示模态，但我可以发送警报，但如果我创建一个事件，它会出现在日历上并带有颜色，我希望，它对任何尝试在 rails 7 中使用 fullcalendar 的人都有用

于 2022-01-25T19:19:24.027 回答