Thêm hovertext sự kiện vào fullcalendar

Question

Tôi đang cố bao gồm văn bản di chuột lên các sự kiện trong trang lịch tháng của toàn bộ lịch.

Tôi có và đối tượng mảng khai báo các sự kiện cần phải có trên trang được tải bởi tập lệnh php. Có vẻ như sau:

$('#calendar').fullCalendar({ 
events: [ 
    { 
     title : 'event1', 
     start : '2010-01-01' 
    }, 
    { 
     title : 'event2', 
     start : '2010-01-05', 
     end : '2010-01-07' 
    } 
] 

});

Tôi đang cố gắng sử dụng hàm eventMouseover để bao gồm văn bản di chuột với từng sự kiện. Nguyên mẫu của hàm này như sau: function (event, jsEvent, view) {} Trong trường hợp sự kiện là đối tượng sự kiện, jsEvent là sự kiện JavaScript nguyên gốc với thông tin cấp thấp như tọa độ chuột. và khung nhìn giữ đối tượng xem của fullcalendar. Tôi không thể gọi chính xác các đối số của hàm này. Thông tin của tôi đến từ đây: http://arshaw.com/fullcalendar/docs/mouse/eventMouseover/ và tôi hoàn toàn tuyệt vời với các cách khác để đạt được một hovertext trên mỗi sự kiện. Cảm ơn bạn.

Answer 1

Bạn đang đi đúng hướng. Tôi đã làm một cái gì đó tương tự để hiển thị thời gian kết thúc sự kiện ở cuối sự kiện trong chế độ xem chương trình làm việc.

Tùy chọn trên lịch:

eventMouseover: function(event, jsEvent, view) { 
    $('.fc-event-inner', this).append('<div id=\"'+event.id+'\" class=\"hover-end\">'+$.fullCalendar.formatDate(event.end, 'h:mmt')+'</div>'); 
} 

eventMouseout: function(event, jsEvent, view) { 
    $('#'+event.id).remove(); 
} 

CSS cho di chuột qua:

.hover-end{padding:0;margin:0;font-size:75%;text-align:center;position:absolute;bottom:0;width:100%;opacity:.8} 

Hy vọng rằng đây sẽ giúp bạn!

Answer 2

Nếu bạn đang sử dụng bootstrap, đây là giải pháp rất thanh lịch:

eventRender: function(event, element) { 
    $(element).tooltip({title: event.title}); 
} 

(tôi đã nhận nó từ câu trả lời này: https://stackoverflow.com/a/27922934/2941313)