Events not displayed in full calendar

Question

I've been trying to display some events with fullcalendar but it's not working. I've been googling and trying different values but it never worked. For example I tried this :

                                events: [
                                {
                                    title  : 'event1',
                                    start  : '2020-04-01'
                                },
                                {
                                    title  : 'event2',
                                    start  : '2020-04-05',
                                    end    : '2020-04-07'
                                },
                                {
                                    title  : 'event3',
                                    start  : '2020-04-03T12:30:00',
                                    allDay : false // will make the time show
                                }
                            ],

and also this :

                                events: [
                                {"id":"1","start":"2020-04-14T13:00:00","end":"2020-04-14T1‌​6:00:00","title":"Pe‌​r Hour: 11.00,Per Mile: 11.00"},
                                {"id":"2","start":"2020-04-15T13:00:00","end":"2020-04-15T16‌​:00:00","title":"Per Hour: 11.00,Per Mile: 11.00"},
                                {"id":"3","start":"2020-04-16T13:00:00","end":"2020-04-16T16‌​:00:00","title":"Per Hour: 11.00,Per Mile: 11.00"}
                            ]

among other tests. All of the values that I tested were found on internet, from people sharing their experience, but for me none of them worked.

Any idea of what's wrong with these values ?

Then I'll write the script that will retrive the data from my db but first I have to make it work with hard-coded values.

---

I'll try to be clearer : I copied / pasted this code from full calendar demo and it's working fine, displaying events correctly :

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

var calendar = new FullCalendar.Calendar(calendarEl, {
    schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
  plugins: [ 'resourceTimeGrid' ],
  timeZone: 'UTC',
  defaultView: 'resourceTimeGridFourDay',
  datesAboveResources: true,
  header: {
    left: 'prev,next',
    center: 'title',
    right: 'resourceTimeGridDay,resourceTimeGridFourDay'
  },
  views: {
    resourceTimeGridFourDay: {
      type: 'resourceTimeGrid',
      duration: { days: 4 },
      buttonText: '4 days'
    }
  },
  resources: [
    { id: 'a', title: 'Room A' },
    { id: 'b', title: 'Room B' }
  ],
  events: 'https://fullcalendar.io/demo-events.json?with-resources=2'
});

calendar.render();  });

Then I commented the line that was retrieving the events from fullcalendar website and added my own hard-coded events, like this :

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

var calendar = new FullCalendar.Calendar(calendarEl, {
    schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
  plugins: [ 'resourceTimeGrid' ],
  timeZone: 'UTC',
  defaultView: 'resourceTimeGridFourDay',
  datesAboveResources: true,
  header: {
    left: 'prev,next',
    center: 'title',
    right: 'resourceTimeGridDay,resourceTimeGridFourDay'
  },
  views: {
    resourceTimeGridFourDay: {
      type: 'resourceTimeGrid',
      duration: { days: 4 },
      buttonText: '4 days'
    }
  },
  resources: [
    { id: 'a', title: 'Room A' },
    { id: 'b', title: 'Room B' }
  ],
  //events: 'https://fullcalendar.io/demo-events.json?with-resources=2'
  events: [
                            {
                                title  : 'event1',
                                start  : '2020-04-01'
                            },
                            {
                                title  : 'event2',
                                start  : '2020-04-05',
                                end    : '2020-04-07'
                            },
                            {
                                title  : 'event3',
                                start  : '2020-04-03T12:30:00',
                                allDay : false // will make the time show
                            }
    ]
});

calendar.render();  });

And when I do so, the events are not displayed.

Answer 1

Thanks for the edit.

The reason is clearer now - you're using resource-enabled views, but your events don't have any matching resource IDs. So how is fullCalendar supposed to know which resource to place them on, do you think? It cannot decide, which means it can't display the events.

You can assign your events to different resources, depending on where they belong. Like this, for example:

events: [
  {
    title  : 'event1',
    start  : '2020-04-01',
    resourceId: 'b'
  },
  {
    title  : 'event2',
    start  : '2020-04-05',
    end    : '2020-04-07',
    resourceId: 'a'
  },
  {
    title  : 'event3',
    start  : '2020-04-03T12:30:00',
    allDay : false, // will make the time show
    resourceIds: ['a', 'b']
  }
]

Demo: https://codepen.io/ADyson82/pen/LYVoZvK?editable=true&editors=001

Here is the relevant fullCalendar documentation page: Associating Events with Resources