FullCalendar Rails7

Question

Im trying to add fullcalendar to my rails project with the gem 'fullcalendar-rails', i have assigned tasks that I want to show in thje calendar, the had a start_time and an end_time. I do everything as it said but it doesn't show. Now I'm seeing simple calendar but is not the same. I install momentsjs-rails gem, then in application.js and application.scss

js

//= require moment

//= require fullcalendar

//= require fullcalendar/locale-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

But the problem is that i create a div in the home page and it doesn't show a calendar

div id="calendar"

Sorry my english

user_17971507 · Answer

Basically what i did to be able to use fullcanlendar but not to its full pontential. 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();
    });

`

And then create the correspondings js , modals and partial view but drag and drop doesn't work, onclick it doesn't show the modals but i can send alerts, but if I create an event it appears on the calendar and with color, I hope, it is usefull for anybody out there trying to use fullcalendar with rails 7

FullCalendar Rails7

1 Answers