jquery fullcalendar jquery fullcalendarを使用しようとすると、JSON

Question

でカスタムパラメータを送信し、カレンダーをリフレッシュしてください。イベントデータは、JSONを使用してサーバーから取得されます。 マイページには、ドロップダウン要素とフルカレンダーのdivがあります。

私が必要とするのは、ユーザーがドロップダウンを変更するたびにカレンダーを更新することです。ドロップダウンリストの選択した値は、ここで新しいイベントデータに

をフェッチするために、サーバーにポストされなければならない私のコード

 $(document).ready(function() { 
     $('#calendar').fullCalendar({ 
      events: { 
       url : '/myfeed', 
       data : {personId : $('#personDropDown').val() } 
      } 
     }); 

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

    }); 

しかしdoesntの仕事上のコードです。 ヘルプがありますか？

Answer 1

はこれを試して変更したとき は、私の場合は、日付を取る：これは、少なくとも2.0.2で動作します

$(document).ready(function() { 
    $('#calendar').fullCalendar({ 
     events: { 
      url: '/myfeed', 
      data: function() { // a function that returns an object 
       return { 
        personId: $('#personDropDown').val(), 
       }; 

      } 
     }); 


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

}); 

Answer 2

私はそれを働かせることができませんでした。 は、だから私はこれに似た解決策になってしまった：

$('#personDropDown').change(function() { 
      var source = { 
       data: { 
        filter: $('#personDropDown').val() 
       }, 
       url : '/myfeed' 
      }; 
      $('#calendar').fullCalendar('removeEvents'); 
      $('#calendar').fullCalendar('addEventSource', source); 
     }); 

Answer 3

は最後に、次のコードで働いていた：私はAJAXイベントの後、このようにリフレッシュ

$(document).ready(function() { 
     loadCalendar(); 
     $('#siteSelect').change(function(){ 
      var selectedSite = $('#siteSelect').val(); 
      var events = { 
        url: '/myfeed2', 
        type: 'POST', 
        data: { 
        siteid: selectedSite 
        } 
      } 
      $('#calendar').fullCalendar('removeEventSource', events); 
      $('#calendar').fullCalendar('addEventSource', events); 
     }); 

    }); 

Answer 4

インスタンスのモーダルを使用してイベントを追加します。

$('#cal').fullCalendar('removeEvents'); 
$('#cal').fullCalendar('addEventSource', "../calendar/json-events2.php") 
$('#cal').fullCalendar('rerenderEvents'); 

Answer 5

これは、関数をイベントソースとして使用することで実現できます。 refetchEventsイベントでは、fullCalendarはカスタム値を返す関数を呼び出し、サービスに通知します。

$(document).ready(function() { 
     $('#valueSelect').change(function(){ 
      if ($('#calendar').hasClass('fc')) 
      { 
       $('#calendar').fullCalendar('refetchEvents'); 
      } 
      else 
      { 
       $('#calendar').fullCalendar({ 
        events: function(start, end, callback) { 
         $.ajax({ 
          url: 'web-service-link', 
          type: 'GET', 
          dataType: "json", 
          contentType: "application/json; charset=utf-8", 
          data: { 
           start: Math.round(start.getTime()/1000), 
           end: Math.round(end.getTime()/1000), 
           customValue: GetCustomValue() 
          } 
         }); 
        } 
       }); 
      } 
     }); 
}); 

function GetCustomValue() 
{ 
    return $('#valueSelect').val(); 
{ 

Answer 6

問題は、ドロップダウンリストの元の値のコピーを持つイベントオブジェクトを作成した後、あなたがドロップダウンの値を変更しているということです。次は何が必要です：

$('#dropdownId').change(function() { 
    events.data.customParam = $(this).val(); 
    $('#calendar').fullCalendar('refetchEvents'); 
}); 

これは私がように解決し、それがドロップダウンのonchangeからアクセスできる領域とfullcalendar初期化（例えば、ドキュメントのonload）

Answer 7

で作成されたイベントオブジェクトに依存していますthis

  data: function() { // a function that returns an object 
     return { 
       custom_param1: date_start, 
      custom_param2: date_end 
      }; 
     }, 

この関数は、date_startとdate_endの値を変更した後、新しい値を取得します。ビューが

viewRender: function(view,element){ 
     date_start = $.fullCalendar.formatDate(view.start,'dd/MM/yyyy'); 
     date_end = $.fullCalendar.formatDate(view.end,'dd/MM/yyyy'); 
}, 

Answer 8

。 dataは、動的ドロップダウン値が入力されたオブジェクトを返す関数になります。新しいドロップダウン値が選択されたときにカレンダーを更新するにはchangeが追加されます。

$("#calendar").fullCalendar({ 
    events: { 
     url: "/myfeed", 
     data: function() { 
      return { 
       dynamicValue: $("#dropdownList").val() 
      }; 
     }, 
     type: "POST" 
    } 
}); 

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

Answer 9

私はこのに自分自身を実行し、値がカレンダーが初期化されるときに保存されたデータオブジェクトのニーズが変更されたため、これを行うための、より動的な方法があります。

$(document).ready(function() { 
     $('#calendar').fullCalendar({ 
      events: { 
       url : '/myfeed', 
       data : {personId : $('#personDropDown').val() } 
      } 
     }); 

     $('#personDropDown').change(function(){ 
      $('#calendar').data('fullCalendar').options.events.data.personId = $(this).val(); 
      $('#calendar').fullCalendar('refetchEvents'); 
     }); 

    }); 

Answer 10

This is right way. 

$.ajax({ 
    url: 'ABC.com/Calendar/GetAllCalendar/', 
    type: 'POST', 
    async: false, 
    data: { Id: 1 }, 
    success: function (data) { 
     obj = JSON.stringify(data); 
    }, 
    error: function (xhr, err) { 
     alert("readyState: " + xhr.readyState + "\nstatus: " + xhr.status); 
     alert("responseText: " + xhr.responseText); 
    } 
}); 

/* initialize the calendar 
-----------------------------------------------------------------*/ 
var date = new Date(); 
var d = date.getDate(); 
var m = date.getMonth(); 
var y = date.getFullYear(); 

var calendar = $('#calendar').fullCalendar({ 
    //isRTL: true, 
    buttonHtml: { 
     prev: '<i class="ace-icon fa fa-chevron-left"></i>', 
     next: '<i class="ace-icon fa fa-chevron-right"></i>' 
    }, 
    header: { 
     left: 'prev,next today', 
     center: 'title', 
     right: 'month,agendaWeek,agendaDay' 
    }, 
    //obj that we get json result from ajax 
    events: JSON.parse(obj) 
    , 
    editable: true, 
    selectable: true  
});