Ask A Question

Notifications

You’re not receiving notifications from this thread.

Fullcalendar-Scheduler Timeline is not show events in Rails 5.0

erniux third asked in Rails

Hello, I am using postgres as database, rails 5.0 and ruby 2.4. The problem is, that I have this pur html calendar unsing timeline and timegrid, works ok, when I pass it to my RoR project, only work fine the timegrid and timeline only show calendar without events. here is my code:

<style>

    html, body {
      margin: 0;
      padding: 0;
      font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
      font-size: 14px;
    }

    #calendar {
      max-width: 1000px;
      margin: 80px auto;
    }

  </style>

    <%= stylesheet_link_tag('fullcalendar/packages/core/main.min.css') %>
    <%= stylesheet_link_tag('fullcalendar/packages/timeline/main.min.css') %>
    <%= stylesheet_link_tag('fullcalendar/packages/resource-timeline/main.min.css') %>
    <%= stylesheet_link_tag('fullcalendar/packages/bootstrap/main.min.css') %>
    <%= javascript_include_tag('fullcalendar/packages/core/main.min.js') %>
    <%= javascript_include_tag('fullcalendar/packages/core/main.min.js') %>
    <%= javascript_include_tag('fullcalendar/packages/interaction/main.min.js') %>
    <%= javascript_include_tag('fullcalendar/packages/resource-timeline/main.min.js') %>
    <%= javascript_include_tag('fullcalendar/packages/resource-common/main.min.js') %>
    <%= javascript_include_tag('fullcalendar/packages/daygrid/main.min.js') %>
    <%= javascript_include_tag('fullcalendar/packages/timegrid/main.min.js') %>
    <%= javascript_include_tag('fullcalendar/packages/timeline/main.min.js') %>
    <%= javascript_include_tag('fullcalendar/packages/resource-daygrid/main.min.js') %>
    <%= javascript_include_tag('fullcalendar/packages/resource-timegrid/main.min.js') %>
    <%= javascript_include_tag('fullcalendar/packages/bootstrap/main.min.js') %>

  <script>

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

    var calendar = new FullCalendar.Calendar(calendarEl, {
      schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
       plugins: [ 'interaction', 'resourceTimeline', 'resourceDayGrid', 'resourceTimeGrid', 'bootstrap' ],  

      header: {
        left: 'today prev,next',
        center: 'title',
        right: 'resourceTimelineDay, resourceTimelineTenDay, resourceTimelineMonth, dayGridMonth '
      },
      aspectRatio: 1.5,
      //defaultView: 'resourceTimelineMonth',
      editable: true,
      selectable: true,
      groupByResource: true,

      views: {

        resourceTimelineTenDay: {
          type: 'resourceTimeline',
          duration: { days: 7 },
          buttonText: '7 dias'
        },

        resourceTimelineDay: {
          buttonText: 'por dia'
        },

        resourceTimelineMonth: {
          buttonText: 'Mes/Asignacion'
        },

        dayGridMonth: {
          buttonText: 'Mensual'
        }
      },

      resourceGroupField: 'servicio',
      resourceLabelText: 'Asignacion',
      resources: [
        { id: 'a', servicio: 'BR', title: 'GCV' },
        { id: 'b', servicio: 'BR', title: 'ABC' },
        { id: 'c', servicio: 'BR', title: 'DEF' },
        { id: 'd', servicio: 'BR', title: 'GTF' },
        { id: 'e', servicio: 'BR', title: 'GCV' },
        { id: 'f', servicio: 'CM', title: 'GCV' },
        { id: 'g', servicio: 'CM', title: 'MGS' },
        { id: 'h', servicio: 'CM', title: 'ABC' },
        { id: 'i', servicio: 'UT', title: 'OLS' }
      ],
      events: [
      {
          title: 'CINEPOLIS',
          start: '2019-03-21',
          resourceId: 'a',
          color: 'green'
        },
        {
          title: 'OPERADORA ZIBATA',
          start: '2019-03-21',
          end: '2019-03-10',
          resourceId: 'a'
        },
        {
          title: 'FLEX N GATE',
          start: '2019-03-21T16:00:00',
          end: '2019-03-23T16:00:00',
          resourceId: 'b'
        },
        {
          title: 'FLEX N GATE',
          start: '2019-03-22T16:00:00',
          resourceId: 'c'
        },
        {
          title: 'LUIS EDDY LOPEZ NAVARRETE',
          start: '2019-03-22',
          end: '2019-03-13',
          resourceId: 'c'
        },
        {
          title: 'CINEPOLIS',
          start: '2019-03-22T10:30:00',
          end: '2019-03-22T12:30:00',
          resourceId: 'd',
          color: 'green'
        },
        {
          title: 'MEGALOPOLI',
          start: '2019-03-22T12:00:00',
          resourceId: 'd',
          color: 'orange'
        },
        {
          title: 'MEGALOPOLI',
          start: '2019-03-22T14:30:00',
          resourceId: 'd',
          color: 'orange'
        },
        {
          title: 'POLATECNIA',
          start: '2019-03-22T07:00:00',
          resourceId: 'a',
          color: 'red'
        },
      ]
    });

    calendar.setOption('locale', 'es');
    calendar.render();
  });

</script>

</head>
<body>
  <div id='calendar'></div>
</body>

Thanks in advance.

Reply
Join the discussion
Create an account Log in

Want to stay up-to-date with Ruby on Rails?

Join 86,651+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.