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>块不包含所有库。

<强> JS

jquery-ui.min.js （图书馆中遗漏）
jquery.min.js （图书馆中缺少）
fullcalendar.js
calendar.js （图书馆中缺少）
angular.js （图书馆中缺少）
bootstrap.js （图书馆中缺少）

<强> CSS

fullcalendar.css （图书馆中缺少）
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/

Answer 2

首先，我不确定您所关注的博客文章教程的原创性/正确性。它似乎与this非常相似，它是Angular UI Calendar的官方指南。 您在本教程之后犯的主要错误是您没有包含可以找到的{。{3}} 的calendar.js，以及创建'ui.calendar'模块的脚本，你的“myCalendarApp”模块将依赖于它。

但是，我建议您忽略上述教程，使用Angular here实现日历，这是“正确”的做法。

使用Angular-UI日历指令已有详细记录UI-Calendar。这应该是直截了当的，并产生很清晰的代码。

Answer 3

Arshaw FullCalendar有一个角度指令，它是AngularUI项目的一部分，我使用它并且工作正常：https://github.com/angular-ui/ui-calendar。

Fullcalendar不会与AngularJS一起显示

3 个答案: