fullcalendar chiều cao cố định của hàng

Question

Làm cách nào để đặt chiều cao cố định của hàng trong fullcalendar? Tôi muốn có thanh cuộn dọc, nếu có quá nhiều sự kiện.

$('#calendar').fullCalendar('option', 'contentHeight', 50); 

Answer 1

Nếu bạn muốn thay đổi chiều cao của mỗi hàng vùng thời gian, bạn có thể ghi đè lên lớp css.

.fc-agenda-slots td div { 
    height: 40px !important; 
} 

Nếu bạn muốn nói gì khác, vui lòng cho chúng tôi biết.

Nội dungĐược sử dụng để chỉ tính chiều cao của lịch.

Answer 2

Trong tập lệnh, tôi muốn tạo các hàng nhỏ hơn, nhưng bạn có thể sử dụng cùng một mã để làm cho chúng lớn hơn. Khi tạo các hàng nhỏ hơn, tôi phải hợp nhất mỗi 4 ô (khi làm việc trong độ chi tiết 15 phút) của cột đầu tiên để làm cho chỉ báo giờ phù hợp trong ô. Sử dụng mã sau để hợp nhất các ô:

$(function(){ 
    // Merge first column, each 4 rows to display time in larger format 
    $('table.fc-agenda-slots tbody tr:not(.fc-minor)').each(function(){ 
     $(this).find("th:first-child").css("font-size", "12px").attr('rowSpan',4); // 
     $(this).nextUntil("tr:not(.fc-minor)","tr.fc-minor").find("th:first-child").remove(); 
    }); 
}) 

Sau đó, sử dụng CSS để áp dụng chiều cao hàng phù hợp. Lưu ý rằng tôi đã thêm kiểu dáng chiều cao dòng, mà tôi cần để tương thích với bootstrap. Tôi cũng đảm bảo rằng khi kéo bên ngoài lịch, hành vi lựa chọn mặc định không áp dụng.

 body { 
      -moz-user-select: none; 
      -khtml-user-select: none; 
      -webkit-user-select: none; 
      user-select: none;    
     } 

     .fc-agenda-slots td div { 
      height: 6px; 
      line-height: 6px; 
     } 
     .fc-agenda-axis { 
      font-size:1px; 
      line-height: 1px; 
     } 

Answer 3

đối với tôi chỉ làm việc này

.fc-agendaWeek-view tr { 
    height: 40px; 
} 

.fc-agendaDay-view tr { 
    height: 40px; 
}