3

I have a scenario where I have all the resources to be displayed in a dropdown list which is a multi-select dropdown.

I want to add a resource to the calendar when the resource is selected in the dropdown.

enter image description here

Here is my code for the calendar:

var source = '/Request/GetBookingInfo?envid=0';
var resources = '/Request/GetEnvironments?envid=0';// + $('#ddlenv').val();

$('#calendar').fullCalendar({
    resourceAreaWidth: 230,
    editable: true,
    aspectRatio: 1.5,
    scrollTime: '00:00',
    header: {
      left: 'promptResource today prev,next',
      center: 'title',
      right: 'timelineDay,timelineThreeDays,timelineWeek,timelineMonth,timelineQuarter,timelineYear'
    },
    defaultView: 'timelineDay',
    views: {
      timelineThreeDays: {
        type: 'timeline',
        duration: { days: 3 }
      },
      timelineWeek: {
          type: 'timeline',
          duration: { days: 7 }
      },
      timelineMonth: {
          type: 'timeline',
          duration: { days: 30 }
      },
      timelineQuarter: {
          type: 'timeline',
          duration: { days: 90 }
      },
      timelineYear: {
          type: 'timeline',
          duration: { days: 365 }
      }
    },
    resourceLabelText: 'Rooms',
    resources:resources,
    events: source
});

//Dropdown change event

$('#ddlenv').on('change', function () {
    var resources = '/controller/actiontogetresources?envid=' + $('#ddlenv').val();
    var source = '/controller/actiontogetevents?envid=0';
    newSource = '/controller/actiontogetevents?envid=' + $('#ddlenv').val();
    var newResources = '/controller/actiontogetresources?envid=' + $('#ddlenv').val();
    resources = newResources;
    $('#calendar').fullCalendar('removeEventSource', source)
    $('#calendar').fullCalendar('refetchEvents')
    $('#calendar').fullCalendar('addEventSource', newSource)
    $('#calendar').fullCalendar('refetchEvents');
    source = newSource;

    var resour = {
        url: '/Request/GetEnvironments',
        type: 'POST',
        data: {
            envid: $('#ddlenv').val()
        }
    }

    $('#calendar').fullCalendar('removeResource', resour);
    $('#calendar').fullCalendar('addResource',  resour );

});

How can I call the action by passing the dropdown selected ID and bind the resource to the calendar?

ADyson
  • 57,178
  • 14
  • 51
  • 63
Raviteja.K
  • 31
  • 1
  • 4

1 Answers1

0

As per https://fullcalendar.io/docs/addResource and https://fullcalendar.io/docs/removeResource, the "addResource" and "removeResource" methods accept a resource object, not a set of ajax parameters, which is why you can't use them in the way you've shown above. It's the equivalent of working with an event object, rather than an event source.

Since there's no concept in fullCalendar of "resource Sources" as there is with event sources, you're probably better to take the approach of defining a custom "resources" feed which can read the selected value from the dropdown each time it runs, and then triggering it using "refetchResources" when a new selection is made in the dropdown.

You can also do the same thing with your event data.

Something like this:

$('#calendar').fullCalendar({
  //..all your other options, and then define your resources like this...
  resources: function (callback) {
    $.ajax({
      url: '/Request/GetEnvironments',
      data: {
        envid: $('#ddlenv').val() //dynamically get the current selected option from the dropdown
      }
    }).done(function(response) {
      callback(response); //return resource data to the calendar via the provided callback function
    });
  },
  //..and your events like this...
  events: function(start, end, timezone, callback) {
    $.ajax({
      url: '/Request/GetBookingInfo',
      data: {
        envid: $('#ddlenv').val(), //dynamically get the current selected option from the dropdown
        //pass currently displayed start and end times to the server, so it can return just the data needed for the current display (and not do not return lots of irrelevant historical data)
        start: start.format("YYYY-MM-DD"),
        end: end.format("YYYY-MM-DD"),
      }
    }).done(function(response) {
      callback(response); //return event data to the calendar via the provided callback function
    });
});

//and now your "change" event handler is really simple:
$('#ddlenv').on('change', function () {
    $('#calendar').fullCalendar('refetchEvents')
    $('#calendar').fullCalendar('refetchResources');
});

See https://fullcalendar.io/docs/resources-function and https://fullcalendar.io/docs/events-function for more detail.

ADyson
  • 57,178
  • 14
  • 51
  • 63
  • So the only way to 'update' a resource of our calendar is modifying its data in DB and then using `refetchResources`? – Jorge Antequera Nov 26 '18 at 12:26
  • You don't need to change any data in the database to do this. The resource data can be there already, beforehand. Your question was talking about how to add and remove resource rows in the calendar display. You were trying to add a single resource by specifying a URL for it. But that's not how fullCalendar works. You must specify one URL to fetch _all_ the resources. Then you can use the selected value(s) in the dropdown to filter which resources are actually returned from the server and displayed on the calendar. – ADyson Nov 26 '18 at 16:29
  • It wasn’t my question but my doubts trying to modify resources data in memory like events led me here since there is not an `updateResource` method. – Jorge Antequera Nov 26 '18 at 16:39
  • 1
    @JorgeAntequera Ok sorry...yeah if you want to actually change the data of an individual resource yes you'd have to update the database and re-fetch. Resources are not meant to change frequently (e.g. a list of rooms or people does not generally change so fast that you have to alter it during the lifetime of one web page). That's my take on it anyway - I didn't create fullCalendar so you'd have to ask the maintainers about their intention on that one. – ADyson Nov 26 '18 at 16:44