Динамически добавлять ресурсы в fullcalendar - PullRequest
Новая
       8

Динамически добавлять ресурсы в fullcalendar

0 голосов
/ 09 июня 2018

У меня есть сценарий, в котором у меня есть все ресурсы для отображения в раскрывающемся списке, который представляет собой раскрывающийся список с множественным выбором.

Я хочу добавить ресурс в календарь, когда ресурс выбран в раскрывающемся списке.

enter image description here

Вот мой код для календаря: 

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 );

});

Как я могу вызвать действие, передав выпадающий выбранный идентификатори привязать ресурс к календарю?

1 Ответ

0 голосов
/ 11 июня 2018

Согласно https://fullcalendar.io/docs/addResource и https://fullcalendar.io/docs/removeResource, методы «addResource» и «removeResource» принимают объект ресурса, а не набор параметров ajax, поэтому их нельзя использовать вкак вы показали выше.Это эквивалентно работе с объектом события, а не с источником события.

Поскольку в fullCalendar понятия «Источники ресурсов» нет понятия, как в случае с источниками событий, вам, вероятно, лучше использовать подходопределение пользовательского фида «ресурсов», который может читать выбранное значение из раскрывающегося списка при каждом запуске, а затем запускать его с помощью «refetchResources», когда в раскрывающемся списке делается новый выбор.

Вы также можете выполнитьто же самое с данными о вашем событии.

Примерно так: 

$('#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');
});

См. https://fullcalendar.io/docs/resources-function и https://fullcalendar.io/docs/events-function для получения более подробной информации.

...