Thay đổi nguồn sự kiện Fullcalendar sau khi hiển thị

Question

Tôi đã sử dụng FullCalendar v1.5.3 để thay thế MS SharePoint.

Tôi đang cố gắng hiển thị lại nguồn của sự kiện lịch. Ví dụ, khi tải trang theo mặc định đây là cuộc gọi ajax

/lịch/sự kiện/feedTasks? Start = 1338094800 & cuối = 1341118800 & _ = 1339103302326

Chúng tôi đang sử dụng một lựa chọn hộp để thay đổi nguồn sự kiện để chỉ nhiệm vụ hiển thị (kéo từ bảng khác nhau), vì vậy sau khi một sự lựa chọn thay đổi cuộc gọi ajax để:

/lịch/sự kiện/feedEvents start = 1338094800 & cuối = 1341118800 012.322.492?_ = 1339103302326

Công trình này hoạt động. Tuy nhiên, thay vì chỉ thay đổi nguồn sự kiện lịch hiện tại, nó tạo ra một bảng lịch trùng lặp (tạo ra một mới div class="fc-content" div trên đầu trang của một hiện tại).

Đây là những gì tôi có cho đến nay:

$("#TaskSelector").change(onSelectChange); 
    function onSelectChange(){ 
     $('#calendar').fullCalendar({ 
      events: '/calendar/events/' + $('#TaskSelector').val() 
     }); 
    } 
}); 

tôi thiếu gì?

Answer 1

Có một số phương pháp được gọi là removeEventSource() và addEventSource() cho phép bạn tinh chỉnh danh sách nguồn. Tôi đã có một tình huống tương tự, nơi tôi cần phải ẩn một trong các nguồn trong chế độ xem theo tháng, nhưng hiển thị nó trong các ngữ cảnh khác và tôi đã xóa và thêm lại các phần tử trong mảng eventSources cách sạch nhất để đạt được điều này.

var fcSources = { 
     courses: { 
        url: base+'accessfm/calendar/courses', 
        type: 'GET', 
        cache: true, 
        error: function() { alert('something broke with courses...'); }, 
        color: 'purple', 
        textColor: 'white', 
        className: 'course' 
       }, 
     requests: { 
        url: base+'accessfm/calendar/requests', 
        type: 'GET', 
        cache: true, 
        error: function() { alert('something broke with requests...'); }, 
        textColor: 'white', 
        className: 'requests' 
       }, 
     loads: { 
        url: base+'accessfm/calendar/loads', 
        type: 'GET', 
        cache: true, 
        error: function() { alert('something broke with loads...'); }, 
        color: 'blue', 
        textColor: 'white', 
        className: 'loads' 
       } 
    }; 
<snip> 
    $('#fullcalendar').fullCalendar({ 
     header: { 
        left: 'title', 
        center: 'agendaDay,agendaWeek,month', 
        right: 'today prev,next' 
       }, 
     defaultView: 'agendaWeek', 
     firstDay: 1, 
     theme: true, 
     eventSources: [ fcSources.courses, fcSources.requests, fcSources.loads ], 
     viewDisplay: function(view) { 
      if (lastView != view.name){ // view has been changed, tweak settings 
       if (view.name == 'month'){ 
        $('#fullcalendar').fullCalendar('removeEventSource', fcSources.loads) 
             .fullCalendar('refetchEvents');; 
       } 
       if (view.name != 'month' && lastView == 'month'){ 
        $('#fullcalendar').fullCalendar('addEventSource', fcSources.loads); 
       } 
      } 
      lastView = view.name; 
     } 
    }); 

Không chỉ sao chép/dán mã này, vì nó không giải quyết chính xác vấn đề của bạn. Nhưng bạn sẽ có thể lấy một số ý tưởng từ nó. Tinh chỉnh mã băm fcSources để phù hợp với nguồn của bạn, sau đó khởi tạo đối tượng fullCalendar của bạn chỉ bằng một trong các nguồn và trao đổi xung quanh bằng các phương thức removeEventSource và addEventSource.

Cũng lưu ý việc sử dụng refetchEvents() - đó là điều cần thiết để đảm bảo màn hình được hiển thị lại chính xác.

Answer 2

Cảm ơn bạn cho ví dụ này :)

tôi đã không thể thực hiện điều này (trong mã trên mảng sự kiện) làm việc cho tôi, nhưng tôi tìm ra một cách khác để thêm nguồn sự kiện sử dụng một số mã bạn được cung cấp.

Đây là logic của tôi:

nguồn chủ yếu của tôi về sự kiện này (đây là nguồn sự kiện từ các ví dụ mặc định của Fullcalendar):

events: function(start, end, callback) { 
      $.ajax({ 
       type: 'POST', 
       url: 'myurl', 
       dataType:'xml', 
       crossDomain: true, 
       data: { 
        // our hypothetical feed requires UNIX timestamps 
        start: Math.round(start.getTime()/1000), 
        end: Math.round(end.getTime()/1000),     
        'acc':'2',      
       }, 
       success: function(doc) {        
        var events = []; 
        var allday = null; //Workaround 
        var Editable = null; //Workaround 
        $(doc).find('event').each(function() 
        {      
         if($(this).attr('allDay') == "false") //Workaround 
           allday = false; //Workaround 
         if($(this).attr('allDay') == "true") //Workaround 
           allday = true; //Workaround 
         if($(this).attr('editable') == "false") //Workaround 
           Editable = false; //Workaround 
         if($(this).attr('editable') == "true") //Workaround 
           Editable = true; //Workaround      

         events.push({ 
          id: $(this).attr('id'), 
          title: $(this).attr('title'), 
          start: $(this).attr('start'), 
          end: $(this).attr('end'),      
          allDay: allday, 
          editable: Editable 
         });        
        }); 


        //calendar.fullCalendar('addEventSource', othersources.folgas); 
        //calendar.fullCalendar('addEventSource', othersources.ferias);  
        //calendar.fullCalendar('refetchEvents');    
        callback(events); 
       } 
      });  
     } 

Bây giờ tôi cần nó để thêm các nguồn khác và để làm điều này ở bên lịch (bên cạnh biến ngày từ ví dụ đầy đủ) tôi đã tạo một biến như mã ở trên, nhưng với các cuộc gọi ajax tương tự như mã chính của tôi:)

var othersources = { 

    anothersource: {    
      events: function(start, end, callback) { 
      $.ajax({ 
       type: 'POST', 
       url: 'myurl',    
       data: { 
        // our hypothetical feed requires UNIX timestamps 
        start: Math.round(start.getTime()/1000), 
        end: Math.round(end.getTime()/1000),     
        'acc':'7',      
       },   
       success: function(doc) {  

        var events = []; 
        var allday = null; //Workaround 
        var Editable = null; //Workaround 
        $(doc).find('event').each(function() 
        {      
         if($(this).attr('allDay') == "false") //Workaround 
           allday = false; //Workaround 
         if($(this).attr('allDay') == "true") //Workaround 
           allday = true; //Workaround 
         if($(this).attr('editable') == "false") //Workaround 
           Editable = false; //Workaround 
         if($(this).attr('editable') == "true") //Workaround 
           Editable = true; //Workaround      

         events.push({ 
          id: $(this).attr('id'), 
          title: $(this).attr('title'), 
          start: $(this).attr('start'), 
          end: $(this).attr('end'),      
          allDay: allday, 
          editable: Editable 
         });        
        });       

        callback(events); //notice this 
       } 
      });  

     },     
      cache: true, 
      //error: function() { alert('something broke with courses...'); }, 
      color: 'green', //events color and stuff 
      textColor: 'white', 
      //className: 'course' 
     }  
} 

Các mã sau đây là tương tự như trên và là một phần của proprietys lịch (bên trong biến lịch):

  eventSources: [ othersources.anothersource ],   

viewDisplay: function(view) {  
     if (view.name == 'month'){ 
     // alert(view.name); 
      //calendar.fullCalendar('addEventSource', othersources.folgas); 
      calendar.fullCalendar('addEventSource', othersources.anothersource); 
      //calendar.fullCalendar('refetchEvents'); //Notice i'm not doing the refetch events. And its working for me. but i'm calling thi elsewhere, every time i make an action. So you must figure it out ;)   
     } 

Answer 3

Đây là một câu hỏi cũ nhưng tôi đã gặp vấn đề tương tự và câu trả lời RET của thực sự đã giúp, trên cơ sở đó tôi vá nó với một bộ đếm reset để đảm bảo nó sẽ không thêm nguồn sự kiện trùng lặp

count = 0; 
fcSources = [wholePlan, allActivities]; 

//calendar initialization { 
viewRender: function(view) { 

     if (view.name == 'agendaWeek' || view.name == 'month') { 
      $('#fullcal').fullCalendar('removeEventSource', fcSources.allActivities); 

      if (count > 0) { 
       $('#fullcal').fullCalendar('addEventSource', fcSources.wholePlan); 
      } 

      count = 0; 
     } 

     if (view.name == 'agendaDay' && count == 0) { 
      $('#fullcal').fullCalendar('addEventSource', fcSources.allActivities); 
      $('#fullcal').fullCalendar('removeEventSource', fcSources.wholePlan); 

      count += 1; 
    } 
} 

Answer 4

sau hai ngày tôi đã nhận nó, đây là mã của tôi:

$("#search").on("keypress", function(evt){ 
     if(evt.keyCode == 13) { 
      var term = $(this).val(); 
      $.post(route_search, 
          { 
           term: term, 
           async: false 
          }, 
          function(data) { 
           var parsed = $.parseJSON(data); 
           $('#calendar').fullCalendar('removeEvents'); 
           $('#calendar').fullCalendar('addEventSource', parsed); 
          } 
      );    
     } 
    }); 

có là một đầu vào tìm kiếm, khi người dùng nhấn phím enter, một bài đăng ajax được gửi đến bộ điều khiển, người trả về một mảng os json values ​​(events). (xin lỗi về tiếng anh nghèo của tôi)