Arshaw FullCalendar for AngularJS - issues faced and solutions derived to mitigate these issues

Arshaw FullCalendar is a calendar which is a full-size drag-n-drop event calendar, leveraging jQuery find more about it here.

The ui-calendar directive is a complete AngularJS directive for the Arshaw FullCalendar.

The directive is easy to use as full calendar requires a JSON file to pin events on the calendar, by using this directive we can pass that file simply in ng-model in the calendar div.

<div id="calendar" ui-calendar="uiConfig.calendar" ng-model="eventSources" calendar="myCalendar"></div>

And how to implement this ui-calendar directive has been explained here

1. Issue Faced:

While implementing this the purpose of my calendar was to bring data from the database and render on the calendar, the problem with the present code is that, before the API call can complete the calendar is already rendered on the page resulting in an empty array of events.

Solution:

A simple solution to this was to add ng-if=”” in the div where the calendar is rendered which will not let the calendar load until the event array is populate

<div ng-if="eventSources.length" id="calendar" ui-calendar="uiConfig.calendar" ng-model="eventSources" calendar="myCalendar"></div>

2. Issue Faced:

After solving the issue I came across a new problem which was rendering the calendar if it is in a different bootstrap tab, The issue was only the toolbar used to load and until I press either today or the arrow keys the calendar wont render

Solution:

Add a JQuery function for that tab which contains the calendar

$('#tab_id').on('shown.bs.tab', function (e) {
    $("#calendar").fullCalendar('render');
});

This simple code will render the calendar on load.