Thời gian sự kiện Jquery FullCalendarlàmột phương pháp di chuột

Question

Tôi đã bật và chạy FullCalendar và nó rất đẹp. Câu hỏi của tôi ở đây là cách tốt nhất để thực hiện chức năng di chuột thời gian. Nó sẽ rất tốt đẹp nếu người dùng có thể có một gợi ý trực quan cho bất kỳ khoảng thời gian nhất định mà họ đang lơ lửng trên.

Tôi tìm thấy liên kết sau http://code.google.com/p/fullcalendar/issues/detail?id=269 cung cấp giải pháp thêm cấu trúc mới trong hàng ô chương trình làm việc để cung cấp quyền truy cập vào các ô riêng lẻ. Tuy nhiên, nó được chỉ ra rằng giải pháp này sẽ khiến FullCalendar trở nên chậm chạp.

Trước khi tôi bắt đầu xem mã FullCalendar, tôi nghĩ mình sẽ hỏi xem có ai khác có ý tưởng hay giải pháp nào không.

những suy nghĩ của tôi về việc tiếp cận này như sau:

1. sự kiện Add giữ chỗ cho mỗi khe thời gian. Người dùng sẽ không thấy các sự kiện này nhưng các sự kiện vô hình này có thể được sử dụng để cho phép đánh dấu "di chuột". Mối quan tâm của tôi ở đây là việc thêm các sự kiện phụ sẽ khiến FullCalander trở nên chậm chạp. Ngoài ra, chức năng kéo và thả có thể bị ảnh hưởng.

2. FullCalender có thể xác định thời gian nào người dùng đã nhấp vào. Có thể sử dụng mã được nhấp vào thời gian để cung cấp tham chiếu cho đánh dấu di chuột không?

3. Khác?

Tôi đang xem xét tùy chọn 2 là nơi bắt đầu. Tuy nhiên, nếu bất cứ ai có ý tưởng khác cho một giải pháp khả thi, tôi sẽ rất vui khi nghe nó.

Nếu tôi đưa ra giải pháp, tôi sẽ đăng nó ở đây.

Cảm ơn,

Jim

Dưới đây là một liên kết đến trang web FullCalendar: http://fullcalendar.io/
tôi đã tìm thấy nó rất thoải mái để làm việc với.

Answer 1

Tôi gặp vấn đề tương tự vì đôi khi rất khó để biết bạn sẽ thực sự nhấp vào thời gian nào. Để khắc phục điều này, tôi đã viết một dòng để thay đổi fullcalendar.js. Không phải là giải pháp lý tưởng, nhưng nó là một sửa chữa nhanh chóng.

Đây là dòng:

"<input type='hidden' class='timeslot-value' value='" + formatDate(d, opt('axisFormat')) +"'>" + 

Và đặt nó bên (khoảng dòng mã 3080):

"<th class='fc-agenda-axis " + headerClass + "'>" + 
((!slotNormal || !minutes) ? formatDate(d, opt('axisFormat')) : '&nbsp;') + 
"</th>" + 
"<td class='" + contentClass + "'>" + 
"<input type='hidden' class='timeslot-value' value='" + formatDate(d, opt('axisFormat')) +"'>" + 
"<div style='position:relative'>&nbsp;</div>" + 
"</td>" + 

Bây giờ bạn chỉ có thể đặt một hover tooltip trên tất cả các fc-khe mà có .ui-widget-content class (số <td> bạn thấy ở trên trong mã). Và nhận giá trị đầu vào bị ẩn để hiển thị trong chú giải công cụ đó.

Nếu jQuery, bạn có thể sử dụng sự kiện trực tiếp và nhận con đầu tiên tương ứng và lấy giá trị của nó.

Nếu ExtJS

Ext.onReady(function(){ 

Ext.QuickTips.init(); 

var tip = Ext.create('Ext.tip.ToolTip', { 
    target: 'your-calendar-id', 
    width: 140, 
    minHeight: 30, 
    delegate: '.ui-widget-content', 
    autoHide: false, 
    renderTo: Ext.getBody(), 
    listeners: { 
     beforeshow: function updateTipBody(tip) { 
      tip.update('<dl><dt style="font-weight: 600;"><?php echo $this->translate('Start time')?>: </dt><dd>' + Ext.get(this.triggerElement).first().getValue() + '</dd></dl>'); 
     } 
    } 
}); 
}); 

Answer 2

Các mã sau đây đã làm các trick cho tôi.

$('.ui-widget-content').hover(function(){ 
    if(!$(this).html()){  
     for(i=0;i<7;i++){ 
      $(this).append('<td class="temp_cell" style="border: 0px; width:'+(Number($('.fc-day').width())+2)+'px"></td>'); 
     } 

     $(this).children('td').each(function(){ 
      $(this).hover(function(){ 
       $(this).css({'background-color': '#ffef8f', 'cursor': 'pointer'}); 
      },function(){ 
       $(this).prop('style').removeProperty('background-color'); 
      }); 
     }); 
    } 
},function(){ 
    $(this).children('.temp_cell').remove(); 
}); 

Đảm bảo thêm mã sau khi mã khởi tạo lịch và nó sẽ hoạt động AS IS nếu thuộc tính defaultView của lịch JQuery là 'AgendaWeekly'.

Chúc mừng, M

Answer 3

Tôi nhận ra đây không phải là thực sự là một câu trả lời nhưng một nhận xét về câu trả lời trước nhưng tôi đã chưa đạt được danh tiếng bình luận về câu trả lời.

W.R.T với câu trả lời của @ user4243287 một bước bổ sung mà tôi phải thực hiện là đặt logic này trong tùy chọn 'viewRender' khi khởi tạo lịch của tôi để đảm bảo rằng điều này tiếp tục hoạt động khi di chuyển giữa các tuần.