My fullcalendar scheduler view ressource forget one ressource

Question

I'm a beginner with FullCalendar, I need to develop a calendar with schedular view with vertical ressources. My problem is when I want to insert ressources objects in my calendar, FullCalendar display only 14 ressources while I have 15 ressources. All the time my calendar forget one ressource.

See my code to insert ressources :

//Fetch all users from database
    function fetchAllUsers() {
        schedulerService.fetchAllUsers()
            .then(
            function(d) {
                self.users = d;
                for(var i = 0; i < d.length; i++)
                {             
                     $('#calendar').fullCalendar('addResource', {
                        id: d[i].nom,
                        title: d[i].prenom + " " + d[i].nom,
                    });
                }
            },
            function(errResponse) {
                console.error('Error while fetching activities');
            }
        );
    }

Please see the array object (with no data because I can't publish this data on Stackoverflow) :

[
    {
        "id": 601,
        "nom": "TEST4",
        "prenom": "TEST2",
    },
    {
        "id": 2,
        "nom": "TEST8",
        "prenom": "TEST6",
    },
    {
        "id": 1,
        "nom": "TEST7",
        "prenom": "TEST3",
    },
    {
        "id": 4,
        "nom": "TEST45",
        "prenom": "TEST6",
    },
    {
        "id": 6,
        "nom": "TEST23",
        "prenom": "TEST12",
    },
    {
        "id": 9,
        "nom": "TEST20",
        "prenom": "TEST25",
    },
    {
        "id": 10,
        "nom": "TEST74",
        "prenom": "TEST68",
    },
    {
        "id": 11,
        "nom": "TEST78",
        "prenom": "TEST87",
    },
    {
        "id": 12,
        "nom": "TEST456",
        "prenom": "TEST568",
    },
    {
        "id": 401,
        "nom": "TEST75",
        "prenom": "TEST454",
    },
    {
        "id": 501,,
        "nom": "TEST42",
        "prenom": "TEST125",
    },
    {
        "id": 617,
        "nom": "TEST754",
        "prenom": "TEST7512",
    },
    {
        "id": 619,
        "nom": "TEST45",
        "prenom": "TEST78",
    },
    {
        "id": 611,
        "nom": "TRUC",
        "prenom": "TEST",
    },
    {
        "id": 604,
        "nom": "TOTO",
        "prenom": "TUTUT",
    }
]

(length : 15)

Real IDs of my data :

enter image description here

Thanks for your help !

Answer 1

Your problem is because you have two resources with the same nom, and since you use nom as the resource ID, it fails because you cannot have duplicate IDs - if you did, fullCalendar would not be able to distinguish between them when doing things like adding to the calendar, or dragging events.

See https://jsfiddle.net/toytd26b/74 which demonstrates that issue - the second resource with nom: "TEST45" does not get added to the calendar.

Assuming that the id field in your objects is unique, I suggest you use that instead as the resource ID. One tiny change to your code is all that's needed:

for(var i = 0; i < d.length; i++)
{             
  $('#calendar').fullCalendar('addResource', {
    id: d[i].id, // use your id field as the resource ID
    title: d[i].prenom + " " + d[i].nom
  }, true);
}

Now see https://jsfiddle.net/toytd26b/75 which is using your id field as the resource ID. All the resources are present on the calendar.