FullCalendar: Thay đổi chương trình làm việcMàu nền sau

Question

Khi tôi đã thấy câu hỏi này được hỏi, tôi chưa thấy câu trả lời. Tôi chỉ muốn có thể tô màu cho số background-color của số TD từ một phạm vi nhất định.

Giả sử tôi có lịch phút 15 phút một lần và từ 9 giờ sáng đến 9 giờ tối, tôi chỉ muốn màu khác 10 giờ sáng 3 giờ chiều.

Thông tin này sẽ đến từ nguồn cấp dữ liệu nhưng đó không phải là vấn đề. Tôi đã không tìm thấy các TD s liên quan đến một thời gian đặt bên trong lịch. Có lẽ tôi đã bỏ lỡ một cái gì đó? :) Tôi khá mới với jQuery và fullCalendar.

Ngoài ra, một câu hỏi nhanh chóng mà không liên quan đến chính một:

• Có thể từ một event handler để có được những id của lịch mà tung ra nó? Tôi có nhiều lịch trên trang của mình để mô phỏng thứ gì đó giống như chế độ xem Gantt. Điều này sẽ cho phép tôi có thể tìm nạp nguồn cấp dữ liệu phù hợp và điền vào các sự kiện phù hợp.

Answer 1

đây là yêu cầu tính năng cho câu hỏi đầu tiên của bạn: http://code.google.com/p/fullcalendar/issues/detail?id=144 đảm bảo gắn dấu sao để nhận cập nhật. cảm ơn

Answer 2

Tôi cần tính năng này trong dự án hiện đang hoạt động. Đây là một dự án trường học, nơi tôi phải làm nổi bật nền với một màu đỏ nếu ngày đó là một sự kiện kỳ ​​nghỉ + những ngày cuối tuần. Xin lưu ý rằng ở đây tất cả các ngày thứ Bảy không phải là ngày lễ. Một số trường chỉ có ngày nghỉ vào ngày thứ Bảy thứ hai hoặc ở một số trường học, một ngày thứ Bảy ngẫu nhiên sẽ được chọn làm ngày làm việc.

Bằng cách nào đó, tôi đã vượt qua vấn đề này mặc dù đây không phải là giải pháp thanh lịch.

Trên phiên bản 1.5.1 tại dòng số 2291 thêm dòng

var refDate = typeof(window.holidays)!='undefined'?window.holidays:[]; //Quick and dirty fix 

này Từ 2300-2304 thay thế các dòng với đoạn mã sau

if (+date == +today) { 
    cell.addClass(tm + '-state-highlight fc-today'); 
}else if($.inArray(+date, refDate)!=-1){ //Added by me 
    cell.addClass(tm + '-state-error'); //Added by me 
}else{ 
    cell.removeClass(tm + '-state-highlight fc-today'); 
    cell.removeClass(tm + '-state-error'); //Added by me 
} 

Trước khi gọi toàn bộ lịch, bạn cần phải tạo một mảng các ngày được chuyển đổi thành các đối tượng ngày js sau đó được chuyển đổi thành số nguyên dài bằng cách thêm dấu + ở phía trước, như thế này

var holidayArray = ['2011-06-26','2011-07-03','2011-07-10','2011-07-17','2011-07-24','2011-07-31']; 
    window.holidays = []; 
    for(var i=0; i<holidayArray.length;i++){ 
     holidays.push(+(mysqlDateToJSDate(holidayArray[i]))); 
    } 

Cuối cùng tôi tìm thấy một hàm js chuyển đổi ngày của tôi thành các đối tượng js date.

function mysqlDateToJSDate(date) { 
    var regex=/^([0-9]{2,4})-([0-1][0-9])-([0-3][0-9])$/; 
    var parts=date.replace(regex,"$1 $2 $3").split(' '); 
    return new Date(parts[0],parts[1]-1,parts[2],0,0,0); 
} 

Sau khi gọi toàn bộ lịch, đừng quên xóa biến toàn cầu.

Tôi biết rằng việc tạo một biến toàn cầu không phải là một điều tốt đẹp. Nhưng xem xét lịch đầy đủ là rất tích cực với sửa lỗi thường xuyên và các tính năng mới, tôi không muốn can thiệp quá nhiều vào mã. Tôi không biết làm thế nào để vượt qua biến trong như là một lựa chọn và dễ dàng có được nó ở nơi tôi muốn.

Điều này chỉ được thực hiện vào chế độ xem theo tháng. Chúng ta cũng cần thực hiện tương tự trên các chế độ xem khác ...

Không thể đăng bản xem trước nhưng bạn có thể xem nó here.

Answer 3

Tôi đã lấy giải pháp @Jegatheesh và thay đổi nó để không truy cập vào biến toàn cục và sử dụng định dạng được tích hợp sẵn. Đây là chống lại 1.5.3

--- i/fullcalendar.js 
+++ w/fullcalendar.js 
@@ -29,6 +29,7 @@ var defaults = { 
       right: 'today prev,next' 
     }, 
     weekends: true, 
+  holidays: [], 

     // editing 
     //editable: false, 
@@ -2301,8 +2302,11 @@ function BasicView(element, calendar, viewName) { 
         } 
         if (+date == +today) { 
           cell.addClass(tm + '-state-highlight fc-today'); 
+        cell.removeClass(tm + '-holiday'); 
+      }else if ($.inArray(formatDate(date, 'yyyy-MM-dd'), calendar.options.holidays) != -1) { 
+        cell.addClass(tm + '-holiday'); 
         }else{ 
-        cell.removeClass(tm + '-state-highlight fc-today'); 
+        cell.removeClass(tm + '-state-highlight fc-today ' + tm + '-holiday'); 
         } 
         cell.find('div.fc-day-number').text(date.getDate()); 
         if (dowDirty) { 

Nó giới thiệu các lớp fc-holiday css trên các yếu tố td.

Biểu diễn có thể được cải thiện nếu chúng tôi định dạng ngày lễ các mục mảng thành dấu thời gian và sau đó gọi $.inArray(+date, calendar.options.holidays) thay thế.

Answer 4

Đây là một chứng minh khái niệm nhanh chóng và dơ bẩn hoạt động trên tệp bản trình diễn 'agenda-views.html' phiên bản mới nhất trong chế độ xem theo tuần. Nó đòi hỏi datejs với time.js (cho TimeSpan) và hiện không làm việc với cuộn, nhưng có thể dễ dàng được tinh chỉnh. Cũng thấy trang ý chính đầy đủ: https://gist.github.com/3005635

var resAvail = [ 
    { 
     DayOfWeek: 0, 
     Start: new Date(y, m, d, 10, 0), 
     End: new Date(y, m, d, 17, 30) 
    }, 
    { 
     DayOfWeek: 1, 
     Start: new Date(y, m, d, 9, 0), 
     End: new Date(y, m, d, 19, 30) 
    }, 
    { 
     DayOfWeek: 4, 
     Start: new Date(y, m, d, 12, 0), 
     End: new Date(y, m, d, 20, 00) 
    } 
] 

var view = calendar.fullCalendar('getView'); 
var slotHeight = view.getSlotHeight(); 
var slotMins = calendar.fullCalendar('option', 'slotMinutes'); 
var minTime = calendar.fullCalendar('option', 'minTime'); 
var slotTop = $('.fc-agenda-slots').offset().top - $('.fc-agenda-days').offset().top; 

// rip through days of week 
for (i = 0; i < 7; i++) { 
    for (r = 0; r < resAvail.length; r++) { 
     var currentRes = resAvail[r]; 
     if (currentRes.DayOfWeek == i) { 
      addAvailBlock(currentRes); 
     } 
    } 
} 

function addAvailBlock(currentRes) { 
    var dayColumn = getDayColumn(i); 
    var $availBlock = $('<div class="avail-block"></div>'); 
    dayColumn.append($availBlock); 
    $availBlock.css('width', $availBlock.parent().css('width')); 

    // Where we start the availability block 
    var dayStart = Date.parse(currentRes.Start.toString('MM/dd/yyyy') + ' ' + minTime); 
    var startOffsetSpan = new TimeSpan(currentRes.Start - dayStart); 
    var startOffsetMins = startOffsetSpan.getMinutes() + (startOffsetSpan.getHours() * 60); 
    var startOffsetSlots = startOffsetMins/slotMins; 
    var startOffsetHeight = startOffsetSlots * slotHeight; 

    var blockSpan = new TimeSpan(currentRes.End - currentRes.Start); 
    var blockMins = blockSpan.getMinutes() + (blockSpan.getHours() * 60); 
    var blockSlots = blockMins/slotMins; 
    var blockHeight = blockSlots * slotHeight; 
    $availBlock.css('top', slotTop + startOffsetHeight).css('height', blockHeight); 
} 

function getDayColumn(dayOfWeek) { 
    switch (dayOfWeek) { 
     case 0: 
      return $('.fc-sun'); 
     case 1: 
      return $('.fc-mon'); 
     case 2: 
      return $('.fc-tue'); 
     case 3: 
      return $('.fc-wed'); 
     case 4: 
      return $('.fc-thu'); 
     case 5: 
      return $('.fc-fri'); 
     case 6: 
      return $('.fc-sat'); 
    } 
} 

Answer 5

tôi đã viết một số hỗ trợ chú thích đơn giản để làm điều này loại tính năng, nó có thể được tìm thấy từ

https://github.com/elhigu/fullcalendar

Hy vọng rằng nó được được sáp nhập vào chính thức chi nhánh tại một số điểm

Chú thích có thể được thêm như sau:

$('#calendar').fullCalendar({ 
     .... 
     events: [ 
      { 
       title: 'All Day Event', 
       start: new Date(y, m, 1) 
      } 
     ], 
     annotations: [{ 
       start: new Date(y, m, d, 13, 0), 
       end: new Date(y, m, d, 15, 30), 
       title: 'My 1st annotation', // optional 
       cls: 'open', // optional 
       color: '#777777', // optional 
       background: '#eeeeff' // optional 
      }, { next annotation }, ...]   
    }); 

}) 

.210

Full dụ làm thế nào để sử dụng các chú thích có thể được tìm thấy ở đây: https://github.com/elhigu/fullcalendar/blob/master/demos/annotations.html

Answer 6

kể từ phiên bản 2.2, bạn có thể sử dụng Background Events

$('#calendar').fullCalendar({ 
    defaultDate: '2014-11-10', 
    defaultView: 'agendaWeek', 
    events: [ 
     { 
      start: '2014-11-10T10:00:00', 
      end: '2014-11-10T16:00:00', 
      rendering: 'background' 
     } 
    ] 
});