Fullcalendar sự kiện là mất tích

Question

tôi chạy Fullcalendar wih tùy chọn này

defaultEventMinutes:30, 
timeFormat: 'HH:mm { - HH:mm}', 

Tôi có một số sự kiện (30 phút dài mỗi), nhưng chỉ thời gian bắt đầu của họ được hiển thị.

10:00 - 
14:30 - 

khi kéo một sự kiện, sự khởi đầu của nó và EndTime dường như tôi nên có.

10:00 - 10:30 
14:30 - 15:00 

Answer 1

Tôi nghĩ lý do là FullCalendar đặt tiêu đề vào thời div khi không có đủ không gian để hiển thị các tiêu đề trên một dòng riêng biệt (thường là trường hợp khi một sự kiện chỉ kéo dài 30 phút). Khi thời gian và tiêu đề được đặt trong cùng một div, FullCalendar chỉ chuyển thời gian bắt đầu cho trình định dạng ngày.

Để làm cho nó làm việc bạn có thể thay đổi dòng số 4020 trong fullcalendar.js từ (v 1.6.1.):

eventElement.find('div.fc-event-time') 
         .text(formatDate(event.start, opt('timeFormat')) + ' - ' + event.title); 

để

eventElement.find('div.fc-event-time') 
         .text(formatDates(event.start, event.end, opt('timeFormat')) + ' - ' + event.title); 

Nếu bạn không muốn thay đổi mã nguồn của FullCalendar, thay vào đó bạn có thể nhìn vào cuộc gọi lại eventRender.

---

câu trả lời Cập nhật

Đây có thể là tốt hơn để sửa lỗi này mà không thay đổi mã nguồn của FullCalendar, và nó thực sự khá đơn giản để làm điều đó "đúng cách". Tuy nhiên, eventRender không phải là quá hữu ích, vì FullCalendar thu gọn thời gian và tiêu đề sau cuộc gọi lại này và các thay đổi của chúng tôi sẽ bị ghi đè.

May mắn có một callback eventAfterRender mà có thể được sử dụng:

eventAfterRender: function(event, $el, view) { 
    var formattedTime = $.fullCalendar.formatDates(event.start, event.end, "HH:mm { - HH:mm}"); 
    // If FullCalendar has removed the title div, then add the title to the time div like FullCalendar would do 
    if($el.find(".fc-event-title").length === 0) { 
     $el.find(".fc-event-time").text(formattedTime + " - " + event.title); 
    } 
    else { 
     $el.find(".fc-event-time").text(formattedTime); 
    } 
} 

Dưới đây là một ví dụ về jsfiddle: http://jsfiddle.net/kvakulo/zutPu/

Answer 2

fullcalendar 2.1xxxx hiển thị end time

chỉnh sửa dòng 5689

return calendar.formatDate(start, opt('timeFormat')); 

để

return calendar.formatRange(start, end, opt('timeFormat')); 

Answer 3

Câu trả lời của Regin đã không làm việc cho tôi (tôi giả sử một phiên bản mới hơn của FullCalendar).

Tôi đã tìm thấy hai giải pháp.

Đầu tiên, cách dễ nhất duy trì hầu hết kiểu dáng cho các sự kiện ngắn. Kiểu này trở lại giá trị mặc định:

.fc-time-grid-event.fc-short .fc-time span { 
    display: inline; 
} 

.fc-time-grid-event.fc-short .fc-time:before { 
    content: normal; 
} 

.fc-time-grid-event.fc-short .fc-time:after { 
    content: normal; 
} 

Thứ hai, bạn có thể thêm logic sau vào sự kiệnAfterRender. Xin lưu ý rằng điều này có thể có các hiệu ứng khác trong đó một số kiểu dáng nhỏ nhất định sẽ khác nhau, nhưng nếu đây không phải là vấn đề lớn trong môi trường của bạn thì nó hoạt động hoàn hảo.

eventAfterRender: function (event, $el, view) { 
       $el.removeClass('fc-short'); 
      } 

Answer 4

FullCalendar v3.0.0

.fc-time-grid-event.fc-short .fc-time:before { 
    content: attr(data-full); 
} 

.fc-time-grid-event.fc-short .fc-time:after { 
    content: normal; 
} 

Answer 5

Trong các phiên bản cập nhật của FullCalendar từ v 2.4.0 có là một lựa chọn "displayEventTime" mà có thể được sử dụng để thiết lập thời gian xem có hiển thị trong các sự kiện .

Đây là link.

Bằng cách đặt cài đặt chung này có thể ẩn thời gian được hiển thị trong các sự kiện.