CODEWITHSUNDEEP
javascriptjqueryfullcalendarfullcalendar-schedulerfullcalendar-3
Manspider
Manspider

Reputation: 353

FullCalendar edit resource on click

So I'm using the Scheduler plugins from FullCalendar library version 3. I already have my event system working, letting me edit events on click via a modal box.

Now I would like to do the same with resources but I'm hitting a wall there.

Among other things, I tried this

resourceRender: function(resource, cellEls) {
    cellEls.on('click', function(resource) {
        $.getScript(resource.edit_url);
    })
}

But I can't access resource inside cellEls method.

I did not find any example of this so I'm not even sure it's possible.

Any ideas ? Thanks in advance

Upvotes: 1

Views: 1761

Answers (2)

moto_geek
moto_geek

Reputation: 580

This post is already outdated. This has since changed in version Full Calendar Resource Timeline Schedular version 4.0. I used an 'addEventListener' to the DOM object 'el' See the below snippet calling 'resourceRender' so you can see how to access this for a click event on the resource cell after render completes. 

    document.addEventListener('DOMContentLoaded', function () {
   var calendarEl = document.getElementById('calendar');
   var calendar = new FullCalendar.Calendar(calendarEl, {
        schedulerLicenseKey: '<hidden>',
        plugins: ['interaction', 'resourceTimeline'],
        resourceLabelText: 'Resources',
        resources: "<see fullcalendar support docs>",
        events: "<see fullcalendar support docs>",
        resourceRender: function (renderInfo) {
           renderInfo.el.addEventListener("click", function(){ console.log('clicked:' + renderInfo.resource.id); });
        }
    });
         calendar.render();
});

Upvotes: 0

ADyson
ADyson

Reputation: 61849

The first argument to any "click" callback is the JavaScript event object. You can't change that.

Simply allow the "resource" object to propagate down into the event handler naturally instead of trying to re-declare it:

resourceRender: function(resource, labelTds, bodyTds) {
    labelTds.on('click', function(event) {
        console.log(resource);
        $.getScript(resource.edit_url);
    });
}

Upvotes: 1

Related Questions