fullcalendar, cách giới hạn số sự kiện mỗi ngày trong chế độ xem theo tháng

Question

Tôi có nhiều sự kiện trong một ngày và hoạt động như mong đợi nhưng giờ nhìn vào chế độ xem theo tháng, lưới lịch của tôi cao hơn nhiều so với dự kiến. Tôi muốn ẩn một số sự kiện này từ chế độ xem theo tháng, như tóm tắt với một hàng đợi trực quan có nhiều hơn vào ngày này hơn là có thể được hiển thị.

Tôi có thể sử dụng eventRender và trả về false, nhưng tôi muốn biết có bao nhiêu sự kiện vào một ngày nhất định, vì vậy tôi có thể giới hạn hiển thị khoảng 4, sau đó có lẽ tôi sẽ thêm sự kiện cho biết "more .. . "

Vì vậy, câu hỏi có thể là: cách đếm các sự kiện vào một ngày nhất định?

hoặc đây có phải là yêu cầu tính năng hơn để hiển thị bộ đếm tối đa cho chế độ xem theo tháng không?

cảm ơn

Answer 1

hiện không khả thi. thấy yêu cầu tính năng: http://code.google.com/p/fullcalendar/issues/detail?id=304

Answer 2

Tôi có một yêu cầu tương tự và đã nghĩ đến việc làm một cái gì đó như thế này:

trong thức ăn chăn nuôi json, tôi sẽ quay trở lại sự kiện đặc biệt có chứa một số các sự kiện cho mỗi ngày.

Sử dụng sự kiện lịch đầy đủ thích hợpTrợ gọi lại, tôi sẽ chỉ hiển thị các sự kiện tổng số đặc biệt này tùy thuộc vào chế độ xem bằng cách trả về false trong eventRender() cho bất kỳ sự kiện nào tôi không muốn xem.

Tôi chưa triển khai điều này, nhưng có lẽ nó có thể là một đại lộ hợp lệ. Đúng nếu tôi sai.

Answer 3

tôi đã làm một cái gì đó như thế này:

function(start, end, callback) { 
       var viewName = $("#calendar").fullCalendar('getView'); 
       var startTime = Math.round(start.getTime()/1000); 
       var endTime = Math.round(end.getTime()/1000); 
       MyWebService.MyWebMethod.GetEventsByView(startTime, endTime, viewName.name, 
        function(args) { 
         callback(args); 
        }, 
        function(error) { 
         var e = error; 
        } 
       ); 
      } 

Đây là phương pháp GetEventsByView trả về một tập nhóm để xem tháng và thiết lập chi tiết cho quan điểm agendaWeek và ngày. Nhưng để làm việc này một cách chính xác, tôi phải đặt lazyFetching:false cho lịch.

Answer 4

Plugin lỗi (chủ yếu là bị bỏ rơi) này chính xác những gì bạn đang yêu cầu. Kiểm tra nó ra, và cảm thấy tự do để đóng góp. Cảnh báo: Đó là một hack, nhưng bản thân fullcalendar có một API cần nhiều công việc. Hầu hết các bộ phận quan trọng đang bị mắc kẹt trong một đóng cửa, mà làm cho nó rất khó khăn để mở rộng. Có thực sự là không có cách nào để thực hiện điều này mà không cần hackery, trừ khi bạn muốn chỉnh sửa mã nguồn của plugin.

đó đang được nói, đây là gần nhất tôi đã tìm thấy những gì bạn đang yêu cầu: https://github.com/lyconic/fullcalendar/tree/view-more

Answer 5

tôi đang làm như thế này

Css:

 .MaxHght 
     { 
     height:16px; 
     } 
     .viewMore 
     { 
     float:right; 
     color: rgb(219, 104, 28); 
     cursor:pointer; 
     } 

đang cắm

dayClick: function (date, allDay, jsEvent, view) { 
        $('#fullCalendar').fullCalendar('changeView', 'agendaDay').fullCalendar('gotoDate', date.getFullYear(), date.getMonth(), date.getDate()); 
       }, 
eventRender: function (event, element, view) { 
       element.qtip({ 
        content: event.QText, 

        position: { 
         my: 'CenterBottom', 
          at:'TopCenter' 

        }, 
        style: { 
         tip: 'bottomMiddle' 

        } 
       }); 
       $(element).removeClass('MaxHght'); 
       if (view.name == 'month') { 

         $(element).addClass('MaxHght'); 
        var year = event.start.getFullYear(), month = event.start.getMonth() + 1, date = event.start.getDate(); 
        var result = year + '-' + (month < 10 ? '0' + month : month) + '-' + (date < 10 ? '0' + date : date); 
        $(element).addClass(result); 
        var ele = $('td[data-date="' + result + '"]'),count=$('.' + result).length; 
        $(ele).find('.viewMore').remove(); 
        if (count> 3) { 
         $('.' + result + ':gt(2)').remove();       
         $(ele).find('.fc-day-number').after('<a class="viewMore"> More</a>'); 

        } 
       } 

      }, 
      eventAfterAllRender: function (view) { 
       if (view.name == 'month') { 
        $('td.fc-day').each(function() { 
         var EventCount = $('.' + $(this).attr('data-date')).length; 
         if (EventCount == 0) 
          $(this).find('.viewMore').remove(); 
        }); 
       } 
      }, 

Answer 6

Bạn không cần phải nỗ lực nhiều để lấy tổng số thậm chí ts. Tôi đã có một cách đơn giản để đếm tổng số sự kiện trên fullCalendar của tôi.Trong eventAfterAllRender, viết một cái gì đó như thế này,

eventAfterAllRender: function(view) { 
        var allevents = $('#calendar').fullCalendar('clientEvents'); 
        var countevents = 0; 
        if(allevents.length) { 
         countevents = countevents + allevents.length; 
        } 
        if(!countevents) { 
         // alert('event count is'+countevents); 
         console.log('event count is',countevents); 
        } 
       } 

-where calendar là lịch của tôi #

Đây là tất cả của tôi cách làm. Tôi đang rời khỏi đây. Nhưng tôi chắc chắn, nó không phải là khó khăn hơn nếu bạn thử một cái gì đó trên loading: function() của fullCalendar để hạn chế số lượng các sự kiện theo mong muốn của bạn.

Cảm ơn bạn.

Answer 7

Tính đến FullCalendar 2.1.0, tính năng này được bao gồm, chỉ cần sử dụng:

$('#calendarBlock').fullCalendar({ 
    eventLimit: true 
    [...] 
}); 

Demo: http://arshaw.com/js/fullcalendar-2.1.0-beta2/demos/agenda-views.html

Tài liệu: http://fullcalendar.io/docs/display/eventLimit/