Angular UI-Calendar外部事件渲染器

我對Angular非常陌生，我使用Angular UI-Calendar來顯示預訂，這些事件比常規事件稍微更詳細。我可以看到我如何直接在渲染函數中渲染這些事件，但顯然這不是最好的方法，並且確實希望能夠爲事件提供外部渲染器，並且還能夠具有渲染器適合不同類型的日曆視圖。Angular UI-Calendar外部事件渲染器

這是我現在擁有的，並且比最終的更基本。在eventRender部分中，我真的希望能夠調用/包含單獨負責渲染事件的另一個角度html模板。

eventRender : function(event, element) { 
       element.attr({ 
        'tooltip' : event.title, 
        'tooltip-append-to-body' : true 
       }); 
       angular.forEach(event.bookings, function (booking, key){ 
        $(element) 
         .append('<strong>' + booking.title + '</strong>') 
         .append(' x').append(booking.numberCustomers) 
         .append(' &dash; ').append(booking.contact) 
         .append('<br />'); 
       }); 

      }

來源

2015-04-25 Drew

按照UI日曆文檔eventRender方法：

函數也可以返回將用於渲染，而不是一個全新的元素。對於全天的背景事件，您必須確保返回一個。

這可讓您爲計劃中的不同事件返回不同的佈局。基於附加到一個事件的類

var event = { 
    ... 
    className: 'booking-1' 
};

然後，在eventRender方法返回HTML：：

eventRender : function(event, element, view) { 
    if (event.className.indexOf('booking-1') > -1) { 
    return '<span>1</span>'; 
    } else if (event.className.indexOf('booking-2') > -1) { 
    return '<span>2</span>'; 
    } 
}

首先，添加自定義類到每個EventSource的，像這樣

來源

2015-07-28 16:10:22 Nadi

Angular UI-Calendar外部事件渲染器

回答

相關問題