CODEWITHSUNDEEP
fullcalendar
petercli
petercli

Reputation: 693

how to call fullcalendar events() with a paremeter?

Is there a way to filter events based on a drop down? I tried :

  events: '/Controller/action?id='+id,


        $("#drop").change(function () {
            id = $('#drop').val();     
            $('#calendar').fullCalendar('refetchEvents');

But the controller does not see the new id. Any suggestions on passing a paremter to the events() method?

Upvotes: 0

Views: 1054

Answers (1)

ADyson
ADyson

Reputation: 61904

You gave the result of '/Controller/action?id='+id to the calendar as the events feed when the calendar was initialised. e.g. you passed in /Controller/action?id=3, for example. That code has run and does not run again. fullCalendar stores that static string as the URL of the events feed. It doesn't pay any attention to the value of "id" later.

The simplest way to solve this is probably using a custom event feed, as per https://fullcalendar.io/docs/event_data/events_function/ :

//declare the calendar with a custom "events" functions
$("#calendar").calendar({
  //..all your calendar options, and then the events:
  events: function( start, end, timezone, callback ) {
    $.ajax({
      //whatever ajax parameters you need, but make sure:
      url: /Controller/action,
      data: { "id": $('#drop').val(), "start": start.format("YYYY-MM-DD"), "end": end.format("YYYY-MM-DD") }
    });
  }
});

$("#drop").change(function () {
  $('#calendar').fullCalendar('refetchEvents');
});

That way, when "refetchEvents" is called, it runs the function that you passed as the "events" parameter, which can look up the value of the dropdown dynamically at that moment in time.

Note I've also added "start" and "end" parameters to your data, because your event source is supposed to filter the events returned by the dates actually being displayed on the calendar, otherwise you end up returning all events every time the view or date changes.

Upvotes: 1

Related Questions