Save 36% for Black Friday! Learn more

All threads / Fullcalendar-Scheduler Timeline is not show events in Rails 5.0

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.

Join the discussion

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

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

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

    logo Created with Sketch.

    Ruby on Rails tutorials, guides, and screencasts for web developers learning Ruby, Rails, Javascript, Turbolinks, Stimulus.js, Vue.js, and more. Icons by Icons8

    © 2020 GoRails, LLC. All rights reserved.