From 4db59cfd902a218e2711fea7a1889fa1a97cf140 Mon Sep 17 00:00:00 2001
From: Jason Utt <jutt@codedcontainer.com>
Date: Tue, 6 Oct 2015 15:36:15 -0400
Subject: [PATCH] Angular Bootstrap Tabs

Added instructions on how to create a tabbed system which renders a different calendar per tab.
---
 README.md | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/README.md b/README.md
index ec04724..81c5ea2 100644
--- a/README.md
+++ b/README.md
@@ -48,6 +48,31 @@ Apply the directive to your div elements. The calendar must be supplied an array
 Define your model in a scope e.g.
 
     $scope.eventSources = [];
+    
+In order to create a tabbed system with multiple callendars be sure to include the Angular bootstrap files into your modules. These are different than just using Twitter Bootstrap becasue these include unique directives such as select which gives your application more flexibility to determine which calendar it needs to render for each tab.  
+
+    var app = angular.module('app',['ui.calendar', 'ui.bootstrap']);
+
+Make sure to add the correct angular bootstrap. An example is provided below. Each tab will have a unique ng-model with the specific calendar event data you want to include. In order for your new calendar to render you need to add the function renderCalendar() with the name of the calendar provided usign the "calendar" property.
+
+    <tabset>
+        <tab select="renderCalendar('myCalendar')" > 
+            <tab-heading>
+                Any Heading
+            </tab-heading>
+            <div ui-calendar="uiConfig.calendar" class="span8 calendar" calendar="myCalendar" ng-model="eventSources"></div>
+        </tab>
+    </tabset>
+    
+Include the renderCalendar function so the calendar re-renders:
+
+    $scope.renderCalendar = function(calendar) {
+      $timeout(function() {
+        if(uiCalendarConfig.calendars[calendar]){
+          uiCalendarConfig.calendars[calendar].fullCalendar('render');
+        }
+      });
+    };
 
 ## Options