Estoy tratando de agregar fullcalendar a mi proyecto de rieles con la gema 'fullcalendar-rails', asigné tareas que quiero mostrar en el calendario, tenían una hora de inicio y una hora de finalización. Hago todo como dice pero no se nota. Ahora estoy viendo calendario simple pero no es lo mismo. Instalo la gema momentjs-rails, luego en application.js y application.scss
js
//= requiere momento
//= requiere calendario completo
//= requiere 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);scs
*= require fullcalendar *= require fullcalendar.printPero el problema es que creo un div en la página de inicio y no muestra un calendario.
div id="calendario"
Perdon por mi inglés
Básicamente, lo que hice para poder usar fullcanlendar pero no en todo su potencial. en`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>`Y luego creo los correspondientes js, modales y vista parcial, pero arrastrar y soltar no funciona, al hacer clic no muestra los modales, pero puedo enviar alertas, pero si creo un evento, aparece en el calendario y con color, yo Espero que sea útil para cualquiera que intente usar fullcalendar con Rails 7