cột đầy đủ thay đổi thành hàng

Question

có cách thay đổi hiển thị toàn bộ lịch để hiển thị ngày (Chủ Nhật, Thứ Hai, ...) trong trục dọc và thời gian trong trục hoành, tôi phải hiển thị theo cách đó khách hàng của tôi.

Kính trọng.-

Answer 1

Không có cách nào được chỉ định để thực hiện việc đó. Nhưng bạn có thể tự làm.

Fullcalendar xem được hiển thị như bảng với cấu trúc sau:

<tr class="fc-week0 fc-first" style=""> 
    <td class="fc-sun fc-widget-content fc-day0 fc-first fc-other-month">…</td> 
    <td class="fc-mon fc-widget-content fc-day1 fc-other-month">…</td> 

Như bạn có thể thấy có một hàng cho mỗi yếu, và một tế bào cho mỗi ngày.

Bạn có 2 lựa chọn để thực hiện những gì bạn muốn:

1. Sửa đổi các nguồn plugin. Chế độ xem được hiển thị trong BasicView.js. Chỉ cần thay đổi các dòng 140 và dưới đây và "thay thế" td < -> tr.

2. Viết một số mã phụ để sắp xếp lại các phần tử. Viết một kịch bản nhỏ và đơn giản được gọi ngay khi lịch được chèn vào DOM. Tập lệnh phải xây dựng lại bảng theo thứ tự bạn muốn.

Answer 2

Jarno Kurlin đã chia hai một cái nhìn Fullcalendar ngang cho quản lý tài nguyên:

https://github.com/jarnokurlin/fullcalendar

Dựa vào liên kết cũ này: http://tux.fi/~jarnok/fullcalendar-resourceviews/

Nó không hiển thị chi tiết thời gian trên trục ngang , nhưng bạn có thể dễ dàng tinh chỉnh điều này để làm cho nó phù hợp với yêu cầu của bạn.

Answer 3

Ghi đè phương thức eventRender và bạn có thể thực hiện các sự kiện FullCalendar xuất hiện theo bất kỳ cách nào bạn chọn. Câu hỏi How to adjust width and position of events in jQuery Full Calendar in week-view and day view giải quyết một vấn đề tương tự.

Phương pháp eventRender được mô tả trong API của họ vào đây: http://arshaw.com/fullcalendar/docs/event_rendering/eventRender/

Trong trường hợp bạn cần đến nó, bạn cũng có thể sử dụng phương pháp eventAfterRender của họ: http://arshaw.com/fullcalendar/docs/event_rendering/eventAfterRender/

var $yourCalendar = $('#calendarId'); 
$yourCalendar.fullCalendar({ 
    events[//your events 
    ], 
    eventRender: function(event, element, view) { 
    // Reposition your element here 
    }, 
    eventAfterRender: function(event, element, view) { 
    // Make minor post-rendering corrections to your element here 
    } 
});