使用jquery / ajax更改fullcalendar的事件选项

时间:2013-08-09 08:39:13

标签: jquery ajax select fullcalendar

我正在使用fullCalendar插件来显示可用的房间。

<script>
    var $c = jQuery.no

    Conflict();
      $c(document).ready(function() {

          $c('#calendar').fullCalendar({
              monthNames: ['January','February','March','April','May','June','July','August','September','October','November','December'],
              dayNamesShort: ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'],
              height: 530,
              theme: true,
              firstDay: 1,
              month:8,

              events: "json-events.php?roomtype_id=5<?//=$_GET['rtype']?>",
              eventDrop: function(event, delta) {
                  alert(event.title + ' was moved ' + delta + ' days\n' +
                      '(should probably update your database)');
              },

              loading: function(bool) {
                  if (bool) $c('#loading').show();
                  else $c('#loading').hide();
              }

          });

      });

   </script>

我有一个选择框。

<select name="side_room_type" id="room_type" class="input-medium">
    <option value="0">Select Room Type</option>
    <option value="5">Family Room</option>
    <option value="7">Seaside Rooms</option>
</select>

我可以使用

显示可用的房间

事件:“json-events.php?roomtype_id = xxx”

从中获取数据。 我试图获取所选的选项值并使用它更改“事件”值。如果选择Seaside Room,则应更改此事件:

事件:“json-events.php?roomtype_id = 5

到此:

事件:“json-events.php?roomtype_id = 7

当然它应该在没有刷新页面的情况下获得可用的房间。

如果你能帮我解决这个问题,我将很高兴。

1 个答案:

答案 0 :(得分:2)

您可以使用方法“removeEventsSource”和“addEventSource”。 请看:http://arshaw.com/fullcalendar/docs/event_data/removeEventSource/

var url = 'json-events.php?roomtype_id=';
var old_id = 5;

$('#room_type').change(function() {
    $('#calendar').fullCalendar('removeEventSource', url + old_id);

    old_id = $(this).val();
    $('#calendar').fullCalendar('addEventSource', url + old_id);
});

当然,这只是一个想法。