jquery - AngularJS 不显示完整日历

Question

我正在使用fullcalender.js和AngularJS。我现在遇到的问题是我的日历不显示，也没有收到任何错误，所以我不确定我错过了什么。

这是我第一次将 AngularJS 与 fullcalender 结合使用。

HTML:

<div id="calendar" class="fc fc-ltr">
</div>

脚本:

<script src="../Scripts/fullcalendar.js"></script>
<script src="../Scripts/gcal.js"></script>
<script src="../js/Calender-Controller.js"></script>

JS:这个文件是我从demo获得的

angular.module('myCalendarApp', ['ui.calendar']);
function CalendarCtrl($scope, $http) {

var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var currentView = "month";


//event source that pulls from google.com
$scope.eventSource = {
    url: "http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic",
    className: 'gcal-event',           // an option!
    currentTimezone: 'America/Chicago' // an option!
};


//This will call onLoad and you can assign the values the way you want to the calendar
//here DataRetriever.jsp will give me array of JSON data generated from the database data
//$http.get('DataRetriever.jsp').success(function (data) {
//    for (var i = 0; i < data.length; i++) {
//        $scope.events[i] = { id: data[i].id, title: data[i].task, start: new Date(data[i].start), end: new Date(data[i].end), allDay: false };
//    }
//});


//to explicitly add events to the calendar
//you can add the events in following ways
$scope.events = [
  {title: 'All Day Event',start: new Date('Thu Oct 17 2013 09:00:00 GMT+0530 (IST)')},
  {title: 'Long Event',start: new Date('Thu Oct 17 2013 10:00:00 GMT+0530 (IST)'),end: new Date('Thu Oct 17 2013 17:00:00 GMT+0530 (IST)')},
  {id: 999,title: 'Repeating Event',start: new Date('Thu Oct 17 2013 09:00:00 GMT+0530 (IST)'),allDay: false},
  {id: 999,title: 'Repeating Event',start: new Date(y, m, d + 4, 16, 0),allDay: false},
  {title: 'Birthday Party',start: new Date(y, m, d + 1, 19, 0),end: new Date(y, m, d + 1, 22, 30),allDay: false},
  {title: 'Click for Google',start: new Date(y, m, 28),end: new Date(y, m, 29),url: 'http://google.com/'}
];
//we don't need it right now*/


//with this you can handle the events that generated by clicking the day(empty spot) in the calendar
$scope.dayClick = function (date, allDay, jsEvent, view) {
    $scope.$apply(function () {
        $scope.alertMessage = ('Day Clicked ' + date);
    });
};


//with this you can handle the events that generated by droping any event to different position in the calendar
$scope.alertOnDrop = function (event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view) {
    $scope.$apply(function () {
        $scope.alertMessage = ('Event Droped to make dayDelta ' + dayDelta);
    });
};


//with this you can handle the events that generated by resizing any event to different position in the calendar
$scope.alertOnResize = function (event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view) {
    $scope.$apply(function () {
        $scope.alertMessage = ('Event Resized to make dayDelta ' + minuteDelta);
    });
};

/*
//this code will add new event and remove the event present on index
//you can call it explicitly in any method
  $scope.events.push({
    title: 'New Task',
    start: new Date(y, m, 28),
    end: new Date(y, m, 29),
    className: ['newtask']
  });

$scope.events.splice(index,1);*/


//with this you can handle the click on the events
$scope.eventClick = function (event) {
    $scope.$apply(function () {
        $scope.alertMessage = (event.title + ' is clicked');
    });
};


//with this you can handle the events that generated by each page render process
$scope.renderView = function (view) {
    var date = new Date(view.calendar.getDate());
    $scope.currentDate = date.toDateString();
    $scope.$apply(function () {
        $scope.alertMessage = ('Page render with date ' + $scope.currentDate);
    });
};


//with this you can handle the events that generated when we change the view i.e. Month, Week and Day
$scope.changeView = function (view, calendar) {
    currentView = view;
    calendar.fullCalendar('changeView', view);
    $scope.$apply(function () {
        $scope.alertMessage = ('You are looking at ' + currentView);
    });
};


/* config object */
$scope.uiConfig = {
    calendar: {
        height: 450,
        editable: true,
        header: {
            left: 'title',
            center: '',
            right: 'today prev,next'
        },
        dayClick: $scope.dayClick,
        eventDrop: $scope.alertOnDrop,
        eventResize: $scope.alertOnResize,
        eventClick: $scope.eventClick,
        viewRender: $scope.renderView
    }
};

/* event sources array*/
$scope.eventSources = [$scope.events, $scope.eventSource, $scope.eventsF];
};

Answer 1

根据您的脚本包含代码并考虑您提到的演示，请确保所有库都已就位。如果发布的代码确实是您运行的所有内容，那么您的<script> block 不包括所有库。

JS

1. jquery-ui.min.js (您的库中缺少)
2. jquery.min.js (您的库中缺少)
3. fullcalendar.js
4. calendar.js (您的库中缺少)
5. angular.js (您的库中缺少)
6. bootstrap.js (您的库中缺少)

CSS

1. fullcalendar.css (您的库中缺少)
2. bootstrap.css (您的库中缺少)

一旦你确定了这一点，可能一定会有一些错误消息或线索来帮助你继续。

<小时/>

更新

确保您的日历已按如下方式初始化:

$(document).ready(function() {

    // page is now ready, initialize the calendar...

    $('#calendar').fullCalendar({
        // put your options and callbacks here
    })

});

来自http://arshaw.com/fullcalendar/docs/usage/