Kích hoạt jQuery Qtip trên FullCalendar ngày Bấm

Question

Tôi có một jquery fullcalendar. Tôi muốn kích hoạt jquery QTip (hoặc giải pháp jquery khác (chẳng hạn như hộp đèn)) khi tôi nhấp vào một ngày để hiển thị danh sách các tùy chọn. Câu hỏi này tương tự như this question already posted, tuy nhiên đủ khác nhau để đảm bảo một câu hỏi mới.

Có một event callback cho điều này nhưng tôi không chắc chắn làm thế nào để tích hợp này với jQuery Qtip ...

$('#calendar').fullCalendar({ 
    dayClick: function(date, allDay, jsEvent, view) { 

     if (allDay) { 
      alert('Clicked on the entire day: ' + date); 
     }else{ 
      alert('Clicked on the slot: ' + date); 
     } 

     alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY); 

     alert('Current view: ' + view.name); 

     // change the day's background color just for fun 
     $(this).css('background-color', 'red'); 

    } 
}); 

Điều này rõ ràng sẽ trả về cảnh báo và thay đổi màu sắc của màu đỏ di động nhấp vào.

Dưới đây là một ví dụ khác cho thấy QTip được tích hợp để di chuột lên các sự kiện.

$('#calendar').fullCalendar({ 
    ... 
    eventRender: function(event, element, view) 
    { 
     element.qtip({ content: "My Event: " + event.title }); 
    } 
    ... 
}); 

Ví dụ này cho thấy gọi lại di chuột được sử dụng để kích hoạt QTIP.

Bây giờ tôi chỉ cần phải kết hợp hai ví dụ này ...

CẬP NHẬT 26/05/2010

Craig trên các diễn đàn Qtip đã đề nghị sử dụng gọi lại viewDisplay như một thay thế cho các callback DayClick mà dường như đang gây ra tất cả các loại vấn đề. (Khóa trình duyệt trở nên nổi bật nhất).

Here is the post:

Đây là mã:

viewDisplay: function() { 
        var calendar = $(this); 

       $(this).qtip({ 
        content: 'TEST', 
        position: { 
       my: 'top center', 
       at: 'top center' 
        }, 
        show: 'click', 
        hide: 'click', 
        style: { 
       tip: true 
        } 
       }) 
     }, 

Phương pháp này cho thấy một tooltip khi một ngày được nhấp. Một vài vấn đề tuy nhiên.

1. Theo như tôi có thể nói không có thông tin về ngày có thể truy cập được qua gọi lại này, khiến bạn khó có thể hiển thị chú giải cụ thể cho ngày được nhấp.
2. Không có thông tin nhấp chuột X và Y có thể truy cập được qua lần gọi lại này khiến không thể đặt đầu bên cạnh ngày được nhấp.

Tất cả trợ giúp đều được đánh giá cao!

Cảm ơn,

Tim

Answer 1

này diễn ra như css được áp dụng cho các Qtip.

$.fn.qtip.styles.tipstyle = { 
    width: 400, 
    padding: 0, 
    background: '#FFFFFF', 
    color: 'black', 
    textAlign: 'center', 
    border: { 
     width: 3, 
     radius: 4 
    }, 
    tip: 'bottomMiddle', 
    name: 'dark' 
} 

Và đây là chức năng dayClick:

dayClick: function(date, allDay, jsEvent, view) { 
    if (typeof $(this).data("qtip") !== "object") { 
     $(this).qtip({ 
      content: { 
       prerender: true, 
       text: "Hello World" 
      }, 
      position: {corner: {tooltip: 'bottomMiddle', target: 'topMiddle'}}, 
      style: { 
       name: 'tipstyle' 
      }, 
      show: { 
       when: {event: 'click'}, 
       ready: true 
      }, 
      hide: { 
       fixed: true 
      } 
     }); 
    } 
} 

Các câu lệnh if bên trong hàm dayClick đảm bảo rằng Qtip không được tạo ra mỗi khi bạn click vào cùng ngày.

Một vấn đề nhỏ có thể xảy ra, là nếu bạn muốn truy cập một số dữ liệu sự kiện của mình trong hàm dayClick. Nhưng một lần nữa có thể có cách giải quyết cho điều đó là tốt.

Chúc mừng, Lionheart

Answer 2

tôi thấy hai khả năng có thể làm việc ra. Một, bạn thêm div vô hình vào tài liệu, 20px x 20px hoặc hơn. Trong ngày bấm gọi lại, bạn định vị ở giữa ô bảng trong ngày đang được đề cập (hãy giữ nó bằng phương tiện $('td.fc-day' + dayNr)) và làm cho nó hiển thị (bạn cũng có thể định vị nó ở con trỏ chuột). Sau đó, gọi click() trên đó để làm cho chú giải công cụ xuất hiện.

Khả năng thứ hai: Bạn gọi qtip trên mỗi ô bảng (theo số $('div.fc-content').find('td') hoặc hơn) và không sử dụng dayClick. Hoặc, bạn kết hợp cả hai ý tưởng và kích hoạt sự kiện cho qtip trong cuộc gọi lại dayClick.

Tôi sẽ tìm kiếm một khả năng, tôi đoán, bởi vì nó liên quan đến ít người nghe sự kiện hơn.Tuy nhiên, nó giả sử bạn có cùng một tooltip bất kể ngày cụ thể (nhưng tooltip cũng có thể được cấu hình trước khi bạn hiển thị nó).

Hy vọng có ý nghĩa gì.

Answer 3

Không biết chính xác những gì bạn muốn hiển thị trong tooltip, nhưng bạn không thể sử dụng này:

$('#calendar').fullCalendar({ 
    dayClick: function(date, allDay, jsEvent, view) { 
     $(this).qtip({ content: 'some html content' }); 
    } 
}); 

Trong callback 'này' là <td> trong ngày nhấp. Có lẽ làm một chức năng để render html dựa trên 'date' và gọi nó là từ cò qtip:

$(this).qtip({ content: yourQtipRenderer(date) }); 

Answer 4

tôi đã không được sử dụng qTip phải trung thực, nhưng theo tài liệu của nó tùy chọn 'show' xác định thời gian hiển thị tooltip, nó dường như được thiết lập để 'mouseover' như mặc định, vì vậy hãy thử thay đổi nó để nghe tiếng 'click', như thế này:

$('#calendar').fullCalendar({ 
    dayClick: function(date, allDay, jsEvent, view) { 
     $(this).qtip({ content: 'some html content', show: 'click' }); 
    } 
}); 

Answer 5

tôi đang làm việc với fullCalendar và Qtip cho một tuần nay, và với tôi giải pháp của knepe nên làm việc trong trường hợp lý tưởng.

Bạn có thể kiểm tra trước xem chức năng có thực sự được gọi hay không. Hãy thử một cái gì đó như:

$('#calendar').fullCalendar({ 
    dayClick: function(date, allDay, jsEvent, view) { 
     alert(date); 
     } 
}); 

Nếu việc nhấp vào một ngày mang đến cho bạn một cảnh báo với ngày đó, thì vấn đề nằm với thực hiện Qtip. Nếu bạn không nhận được cảnh báo, sự cố xảy ra với việc triển khai fullCalendar.

Theo đề xuất của knepe, 'show: click' sẽ hiển thị Qtip. Nhưng nếu nó không phải là, hãy thử:

show: { when: { event: 'click' } } 

Cuối cùng, đừng quên kiểm tra các tài liệu: http://craigsworks.com/projects/qtip/docs/reference/#show

Answer 6

Nếu popup không làm việc cho bạn, hãy thử sử dụng một phiên bản cũ của jquery.

Tôi đã thử với jquery-1.4 và bây giờ nó hoạt động. Tôi đã thử với jquery-1.2.6 và nó hoạt động hoàn hảo.

Xem a discussion about using older jquery for making qtips work with fullcalendar