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
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();
});
</script>`
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