Jquery Đầy đủ màu sắc lịch và sự kiện động

Question

Tôi muốn chuyển màu cho các sự kiện thông qua nguồn sự kiện json của tôi cho jquery fullcalendar, làm thế nào để tôi đạt được điều này?

Answer 1

Không có gì dễ dàng hơn thế. Nếu bạn kiểm tra tài liệu của jQuery Fullcalendar Event Colors bạn thấy rằng có một tham số className bạn có thể chỉ định cho từng đối tượng sự kiện. Nội dung của tham số đó được thêm vào làm lớp cho các sự kiện và do đó bạn chỉ cần chỉ định css với tên phù hợp.

Các sự kiện (lưu ý các thông số className trên EVENT1)

[ 
    { 
    title  : 'event1', 
    start  : '2012-06-10', 
    className : 'custom', 
    }, 
    { 
    title : 'event2', 
    start : '2012-06-05', 
    end : '2012-06-07' 
    }, 
    { 
    title : 'event3', 
    start : '2012-06-09 12:30:00', 
    allDay : false 
    } 
] 

CSS để làm cho event1 trông khác

.custom, 
.custom div, 
.custom span { 
    background-color: green; /* background color */ 
    border-color: green;  /* border color */ 
    color: yellow;   /* text color */ 
} 

Kiểm tra ở đây http://jsbin.com/ijasa3/96 cho một mẫu nhanh chóng. Lưu ý cách event1 có màu xanh lá cây làm nền và màu vàng làm màu văn bản.

---

Một cách hữu hiệu bằng các tùy chọn được mô tả trong jQuery Fullcalendar Event Colors có thể đi dọc theo những dòng:

Sử dụng Eventsources khác nhau cho các sự kiện mà cần một màu:

$('#calendar').fullCalendar({ 
... 
    eventSources: [ 
    //a full blown EventSource-Object with custom coloring 
    { 
     events: [ 
     { 
      title  : 'event1', 
      start  : '2012-06-10' 
     } 
     ], 
     backgroundColor: 'green', 
     borderColor: 'green', 
     textColor: 'yellow' 
    }, 
    //a normal events-array with the default colors used 
    [ 
     { 
     title : 'event2', 
     start : '2012-06-05', 
     end : '2012-06-07' 
     }, 
     { 
     title : 'event3', 
     start : '2012-06-09 12:30:00', 
     allDay : false 
     } 
    ] 
    ], 
    ... 
}); 

http://jsbin.com/ijasa3/99

Answer 2

Nếu bạn nâng cấp lên phiên bản 1.5, bạn có thể thấy điều này không hoạt động. Giải pháp dường như là nhận xét ra phong cách

.fc-event-skin { } 

Answer 3

Với phiên bản 1.5 bạn có thể đặt textColor, backgroudColor và borderColor trong mỗi sự kiện.

Answer 4

Để hiển thị tốt hơn, tốt hơn nên sử dụng backgroundColor trong số EventObject.