CODEWITHSUNDEEP
javascriptjqueryfullcalendar
Boldbayar
Boldbayar

Reputation: 875

Fullcalendar how to show html element in DayCell?

Hello i am trying to show html element in daycell but no success, but i am unable to show it next to calendar how can i show it in daycell? I am using 2.1.1 version

Javascript 

dayClick: function(date, view ,calEvent, jsEvent) {
                $(this).css('background-color', '#DDDDDD');               
                /*calEvent.start=moment(calEvent.start).format('YYYY/MM/DD hh:mm');
                calEvent.end=moment(calEvent.end).format('YYYY/MM/DD hh:mm');*/                
                $('#myResults').html("10/5");
            },

HTML

<div align="center" id="myResults" style="width:auto;height:auto;background:#AFEEEE;z-index:10001;font-size: 1em;"> </div>

Upvotes: 1

Views: 1108

Answers (2)

Boldbayar
Boldbayar

Reputation: 875

This is working on load :D

dayRender: function(date, element, view){

                var nDate = new Date();
                if(date < nDate ) {
                     $(element).css("background", "#D1EEEE");                    
                  }

                $(element).html("10/5").css('color', '#e50000');

                },

Upvotes: 0

anonymous
anonymous

Reputation: 4064

Try eventRender callback, you can catch the rendering time of drawing events on the cells.

eventRender: function(event, element) {

        // event means the event data you inserted.
        // element means the DOM.

        // standard event data has properties like this.
        // event.title, event.start, ....

        // and the element DOM has <span class='fc-title'></span> for 'event.title' string data.
        // setting your html string to event.title doesn't help. It will show it as plain text.

        var customHTML = '<div align="center" id="myResults" style="width:auto;height:auto;background:#AFEEEE;z-index:10001;font-size: 1em;"></div>';
        $(element).find('.fc-title').html(customHTML);


}

This will work. I was going to produce this on JSFiddle but fullcalendar above v.2.1 requires a few more libraries and its predefined directory structure, I couldn't produce it properly.

Try give the code above as an option when you initialize fullcalendar.

Upvotes: 2

Related Questions