Cách chọn nhiều phạm vi ngày từ Fullcalendar?

Question

Tôi đang cố gắng tạo một tính năng lịch trong đó người dùng có thể chặn nhiều phạm vi ngày bằng cách chỉ chọn ngày bắt đầu và ngày kết thúc. Tôi đã nghĩ đến việc sử dụng FullCalendar nhưng tôi không chắc chắn làm thế nào để tiến hành với điều này.

Tôi đã xem một số ví dụ về cách chặn một số ngày không được chọn bằng cách thêm séc của tôi vào số dayClick nhưng những điều này không xử lý phạm vi ngày. Tôi sẽ đánh giá cao bất kỳ sự giúp đỡ nào, tôi không thực sự tìm kiếm toàn bộ nguồn mà là một số gợi ý về cách thực hiện điều này.

Answer 1

Đây là sự cố nhiều phần. Đây là ý tưởng cơ bản.

• Cho phép người sử dụng để thực hiện một nhấp chuột + kéo lựa chọn với selectable: true
• Trong select gọi lại, thêm một background event với addEventSource.
• Khi thêm sự kiện, hãy cho nó một thuộc tính tùy chỉnh: block: true.
• Sử dụng hàm tùy chỉnh cho selectOverlap trả về false nếu event.block.

Một cái gì đó như thế này JSFiddle.

selectable: true, 
select: function (start, end, jsEvent, view) { 
    $("#calendar").fullCalendar('addEventSource', [{ 
     start: start, 
     end: end, 
     rendering: 'background', 
     block: true, 
    }, ]); 
    $("#calendar").fullCalendar("unselect"); 
}, 
selectOverlap: function(event) { 
    return ! event.block; 
} 

Sự kiện nền là tùy chọn, nhưng điều này thường được mong muốn (trực quan).

Nếu muốn kéo và thả các sự kiện đã tạo, bạn cũng có thể sử dụng chức năng selectOverlap trong eventOverlap.