Issue 1690: Fullcalendar not rendering within Magento Blocks
Status:  Invalid
Owner: ----
Closed:  Aug 2013
Reported by clemens....@inventcommerce.com, Feb 7, 2013
Hi Adam,

Thanks for such an awesome plugin it works like a charm, however I've run into some issues when attempting to insert the fullcalendar into a block template within the Magento framework.

I've gotten the fullcalendar to display the headers, however one needs to click on Month, Today, Week, Prev or Next to render the calendar. 

I've tried referencing the tab where fullcalendar is in eg.

jQuery('#diagram-tab-orders-content').fullCalendar().tabs({
        show: function(event, ui) {
            jQuery('#dashCalendar').fullCalendar('render');
            jQuery('#dashCalendar').fullCalendar('rerenderEvents');
        }
    });

I either use rerenderEvents or render (both don't render the calendar).

I'm using a JSON feed to pull records from the magento database and I set the start and end date for events for products.

<script>
var redirectUrl = "";

jQuery(document).ready(function() {
        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();
        jQuery('#dashCalendar').fullCalendar({
            editable: true,
            header: {
                left: 'prev,next,basicWeek',
                center: 'title',
                right: 'month today' 
            },
            eventColor: '#72CF74',
            eventBackgroundColor: '#96FF98',
            eventMouseover: function(calEvent, jsEvent) {

                xOffset = 0;
                yOffset = 0;
                jQuery("body").append(calEvent.tooltip);
                jQuery("#tooltip")
                        .css('z-index', 99999)
                        .css('position','absolute')
                        .css('margin','2px auto')
                        .css('padding','2px')
                        .css('top', jsEvent.pageY + 10)
                        .css('left', jsEvent.pageX + 20)
                        .fadeIn("fast");
            },

            eventMouseout: function(event, jsEvent, view) {
                jQuery('#tooltip').remove();
            },

           theme: true,
           //editable: true,
           defaultView: 'basicWeek',
           events: {
               url: "getEvents.php",
               cache: true,
               color: "#72CF74"
           },

           eventDrop: function(event,dayDelta,minuteDelta,allDay,revertFunc) {
               var daysMoved = dayDelta;
               redirectUrl = "getEvents.php?dropDate=" + daysMoved + "&itemId=" + event.id;
               if (!confirm("This will change "+event.title+"'s delivery date by "+dayDelta+" days, click Ok to confirm")) {
                   revertFunc();
               } else
                   window.location.href = redirectUrl;
           },
           defaultView: 'basicWeek',
           loading: function(bool)
            {
                if (bool) jQuery('#loading').show();
                else jQuery('#loading').hide();
            } //loading
        }); //end fullcalendar

    }); // end ready(function)
</script>

#tooltip is a custom tooltip that i've implemented when the user rolls over an event to display more properties of the product they've chosen.

As you can see i'm referencing "#diagram-tab-orders-content" which is the Orders tab within the Magento framework which i'm rewriting(replacing with a template of my own which includes the above code).

I've tried several 'render' methods and references to the tab, however the month button is selected, yet nothing is rendered. 

Only when I click prev/next the json feed is requested and events populate my calendar.

Any suggestions on how to render the calendar for jQuery(document).ready()?
Aug 21, 2013
Project Member #1 adamrs...@gmail.com
(No comment was entered for this change.)
Status: Invalid
Sep 14, 2013
#2 kops...@gmail.com
I too faced the same problem and getting solution from no where. If you have solved this problem please post it, I am trapped because of not finding the solution.
   Thanks in Advance.