CODEWITHSUNDEEP
angularjsfullcalendar
Sanka Sri
Sanka Sri

Reputation: 23

How to add HTML elements to AngularUI calendar

I/m working with AngularUI calendar.My task is add some data to Calendar cells with CSS Styles.

I haven't any idea about that,beacause I'm new to AngularJS.

Please help me.

Thanks.

My Angular Code

$scope.uiConfig = {
    calendar: {
        height: 500,
        editable: true,
        header: {
            left: '',
            center: 'title',
            right: 'prev next'
        },
        defaultView: 'month'

    }
};

Upvotes: 2

Views: 360

Answers (1)

Menaka Kariyawasam
Menaka Kariyawasam

Reputation: 618

Try this kind of effort with dayRender function. You can add html elements to your calendar using cell.html

With my answer all cells fill with same styles and other HTML Elements.Then you can customize it with your back-end array.

Try this 

$scope.uiConfig = {
    calendar: {
        height: 500,
        editable: true,
        header: {
            left: '',
            center: 'title',
            right: 'prev next'
        },
        defaultView: 'month',
        dayRender: function (date, cell) {
                 $r = $scope.getDateInfo(date);
                if($r){
                   cell.css("background-color", "#e6f7ff"); 
                }
                cell.html('<b>'+$r.amount+'</b>');
            }

    }
};

$scope.getDateInfo = function(date){
    return {
             amount : 50000
            } 

}

You can add in-line styles or classes to HTML elements.

In this I used another function.Please refer my code and any further matter simply leave a comment.

fiddle

Cheers!!

Upvotes: 2

Related Questions