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?Jquery Đầy đủ màu sắc lịch và sự kiện động
Trả lời
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
}
]
],
...
});
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 { }
Với phiên bản 1.5 bạn có thể đặt textColor, backgroudColor và borderColor trong mỗi sự kiện.
Để hiển thị tốt hơn, tốt hơn nên sử dụng backgroundColor
trong số EventObject
.
- 1. jquery đầy đủ lịch: thiết lập một màu khác nhau cho mỗi sự kiện từ front-end
- 2. Thêm màu sắc đẹp cho các sự kiện trong FullCalendar (jquery)
- 3. Thay đổi màu sắc động của jQuery
- 4. cách tạo đầy đủ chức năng của lịch trong android?
- 5. qt vẽ văn bản đầy màu sắc
- 6. Sự kiện liên kết JQuery khi hình nền CSS được tải đầy đủ
- 7. Cách nhận tháng đã chọn trong lịch đầy đủ của jQuery?
- 8. Sự kiện DOM Backbone.js đầy đủ danh sách
- 9. Tìm kiếm danh sách đầy đủ các loại sự kiện jQuery
- 10. jQuery đầy đủ, lặp lại mỗi thứ hai?
- 11. Tạo Lịch Javascript (Đầy đủ, không bật lên)
- 12. Sự khác nhau giữa màu và màu sắc trong `.vimrc`
- 13. Conditional Formatting: làm cho tế bào đầy màu sắc
- 14. jQuery animate() không hoạt động với màu sắc
- 15. Trang đầy đủ Trượt với jQuery và ajax
- 16. Id lịch API và id sự kiện Lịch Google
- 17. Git-svn - nhập khẩu lịch sử đầy đủ
- 18. Vỏ đầy màu sắc cho Haskell trên Windows?
- 19. Bản đồ Google đầy đủ và CSS
- 20. Chiều cao đầy đủ Màu nền cột với Bootstrap Lưới
- 21. Jquery Toàn bộ lịch cú pháp nguồn sự kiện json
- 22. Lịch Google Apps hiển thị "Bận" thay vì chia sẻ đầy đủ, chi tiết hơn
- 23. Có danh sách đầy đủ các trình nghe sự kiện NHibernate và khi chúng thực sự kích hoạt không?
- 24. Mục đích của mỏ-đầy đủ và họ đầy lệnh
- 25. Ý định mở hoạt động "sự kiện lịch mới"
- 26. Lập lịch sự kiện khi khởi động mysql
- 27. Cách Thêm sự kiện trong Lịch Google từ Hoạt động?
- 28. Thêm sự kiện swipe di động jquery
- 29. typedef và kiểu không đầy đủ
- 30. matplotlib: thay đổi tiêu đề và màu sắc văn bản và màu sắc đánh dấu
Oh yeah, tôi đã bỏ qua nó, sẽ kiểm tra xem tôi có thể vượt qua nó thông qua JSON không. nhờ – Aneef
liên kết jsbin bị hỏng – Rafay
Cố định liên kết jsbin – jitter