0

利用可能な部屋を表示するために 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

もちろん、ページを更新せずに利用可能な部屋を取得する必要があります。

この件についてお役に立てれば幸いです。

4

1 に答える 1

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

もちろん、これは単なるアイデアです。

于 2013-08-09T09:50:37.267 に答える