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 76,990+ developers who get early access to new tutorials, screencasts, articles, and more.

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

    Screencast tutorials to help you learn Ruby on Rails, Javascript, Hotwire, Turbo, Stimulus.js, PostgreSQL, MySQL, Ubuntu, and more. Icons by Icons8

    © 2023 GoRails, LLC. All rights reserved.