Currently, I am in the process of building a mobile application using ionic and cordova. My goal is to incorporate a timetable system utilizing Fullcalendar and a PHP page that showcases MySQL data in JSON format. Despite my efforts, I am encountering difficulties in getting the Fullcalendar to properly display on the page. To navigate through my project, I am relying on the Angular UI Router provided by cordova.
The following code snippet highlights where the necessary scripts are referenced within the Header:
<!--Fullcalendar libs-->
<link rel='stylesheet' href='../plugins/fullcalendar/fullcalendar.css'/>
<script src='../plugins/fullcalendar/lib/jquery.min.js'></script>
<script src='../plugins/fullcalendar/lib/moment.min.js'></script>
<script src='../plugins/fullcalendar/fullcalendar.js'></script>
Furthermore, in app.js, I have invoked the "$(document).ready(function()" script as shown below:
var App = angular.module("App", ["ionic"]);
$(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
// insert your options and callbacks here
})
});
Despite checking the console in chrome for any errors, I haven't come across anything out of the ordinary. Are there any additional steps I should be taking? I welcome alternative methods or suggestions on how to proceed since incorporating this system has proven to be a major time-consuming element in the overall project. Any assistance would be highly appreciated.
UPDATE: A suggested solution was to install the Angular-UI/UI-Calander library mentioned in X31's comments. Upon attempting to integrate the library, I encountered numerous errors indicating an undefined entity. After backtracking my actions and undoing the installation of ui-calendar, I embarked on another attempt and successfully configured Bower. However, during the process, I faced three choices regarding installing jquery.
Update 2: Progressing further, I managed to minimize the number of errors to a single "Type Error: undefined is not a function." This led me to believe that X31 was accurate in suggesting a missing library. Here is a snippet from the header section of my html document (please note I have disabled the angular.js call due to its prior inclusion elsewhere causing warnings):
<!--Fullcalendar libraries-->
<script type="text/javascript" src="lib/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="lib/jquery-ui/ui/jquery-ui.js"></script>
<!--<script type="text/javascript" src="lib/angular/angular.js"></script>-->
<script type="text/javascript" src="lib/angular-ui-calendar/src/calendar.js"></script>
<script type="text/javascript" src="lib/fullcalendar/fullcalendar.js"></script>
<script type="text/javascript" src="lib/fullcalendar/gcal.js"></script>