无法获取日历视图

时间：2018-07-13 09:11:32

标签： jquery angularjs node.js ui-calendar

我已经将我的ui-calendar模块包含在angular.module中，并且都给出了所有必需的脚本。但是我的日历视图并没有给我扔日历.fullCalendar不是一个函数。我很怀疑，所以我缺少一些脚本。

这是我的脚本：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="/javascripts/utils/moment/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.4.0/fullcalendar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.print.css"></script>
<script type="text/javascript" src="fullcalendar.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-calendar/1.0.0/calendar.js"></script>

这是我的html代码：

<div class="container">
                                    <!--<section id="directives-calendar">-->
                                        <div class="page-header">
                                            <h1>UI-Calendar</h1>

                                        </div>
                                        <form class="form-horizontal clearfix">
                                            <label for="dateFrom" class="col-sm-2 control-label">FROM</label>
                                            <div class="col-sm-10">
                                                <input type="date" class="form-control" id="dateFrom" ng-model="ev.from">
                                            </div>
                                            <label for="dateTo" class="col-sm-2 control-label">TO</label>
                                            <div class="col-sm-10">
                                                <input type="date" class="form-control" id="dateTo" ng-model="ev.to">
                                            </div>
                                            <label for="dateTitle" class="col-sm-2 control-label">TITLE</label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" id="dateTitle" ng-model="ev.title" placeholder="your title">
                                            </div>
                                            <button type="submit" class="btn btn-primary pull-right" ng-click="addEvent()">Create Event</button>
                                        </form>
                                        <div class="well calWell">
                                            <div class="row-fluid">
                                                <div class="span8">
                                                    <div class="alert alert-success" ng-show="alertMessage != undefined && alertMessage != ''">{{alertMessage}}</div>
                                                    <div class="alert alert-info">title: {{ev.title}}, from: {{ev.from}}, to: {{ev.to}}</div>
                                                    <div class="btn-toolbar">
                                                        <p class="pull-right lead">Calendar One View Options</p>
                                                        <div class="btn-group">
                                                            <button class="btn btn-success" ng-class="{active: currentView === 'agendaDay'}" ng-click="changeView('agendaDay', 'myCalendar1')">AgendaDay</button>
                                                            <button class="btn btn-success" ng-class="{active: currentView === 'agendaWeek'}" ng-click="changeView('agendaWeek', 'myCalendar1')">AgendaWeek</button>
                                                            <button class="btn btn-success" ng-class="{active: currentView === 'month'}" ng-click="changeView('month', 'myCalendar1')">Month</button>
                                                        </div>
                                                    </div>
                                                    <div class="calendar" ng-model="eventSources" calendar="myCalendar1" ui-calendar="uiConfig.calendar"> </div>
                                        </div>
                                            </div>
                                        </div>

                                    <!--</section>-->

                                </div>

然后是控制器代码

app.controller("demoCtrl",function ($scope, $filter, $http, $modal, uiCalendarConfig) {
console.log("Hello from ServicesCtrl");


// $compile, $timeout, uiCalendarConfig

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

$scope.changeTo = 'Hungarian';
$scope.currentView = 'month';

/* event source that contains custom events on the scope */
$scope.events = [{
    title: 'All Day Event',
    start: new Date(y, m, 1)
}, {
    title: 'Long Event',
    start: new Date(y, m, d - 5),
    end: new Date(y, m, d - 2)
}, {
    id: 999,
    title: 'Repeating Event',
    start: new Date(y, m, d - 3, 16, 0),
    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/'
}];
/* event source that calls a function on every view switch */
$scope.eventsF = function (start, end, timezone, callback) {
    var s = new Date(start).getTime() / 1000;
    var e = new Date(end).getTime() / 1000;
    var m = new Date(start).getMonth();
    var events = [{
        title: 'Feed Me ' + m,
        start: s + (50000),
        end: s + (100000),
        allDay: false,
        className: ['customFeed']
    }];
    callback(events);
};

$scope.calEventsExt = {
    color: '#f00',
    textColor: 'yellow',
    events: [{
        type: 'party',
        title: 'Lunch',
        start: new Date(y, m, d, 12, 0),
        end: new Date(y, m, d, 14, 0),
        allDay: false
    }, {
        type: 'party',
        title: 'Lunch 2',
        start: new Date(y, m, d, 12, 0),
        end: new Date(y, m, d, 14, 0),
        allDay: false
    }, {
        type: 'party',
        title: 'Click for Google',
        start: new Date(y, m, 28),
        end: new Date(y, m, 29),
        url: 'http://google.com/'
    }]
};

$scope.ev = {};

/* alert on dayClick */
$scope.alertOnDayClick = function (date) {
    $scope.alertMessage = (date.toString() + ' was clicked ');
    $scope.ev = {
        from: date.format('YYYY-MM-DD'),
        to: date.format('YYYY-MM-DD'),
        title: '',
        allDay: true
    };
};

/* alert on eventClick */
$scope.alertOnEventClick = function (date, jsEvent, view) {
    $scope.alertMessage = (date.title + ' was clicked ');
};
/* alert on Drop */
$scope.alertOnDrop = function (event, delta, revertFunc, jsEvent, ui, view) {
    $scope.alertMessage = ('Event Dropped to make dayDelta ' + delta);
};
/* alert on Resize */
$scope.alertOnResize = function (event, delta, revertFunc, jsEvent, ui, view) {
    $scope.alertMessage = ('Event Resized to make dayDelta ' + delta);
};
/* add and removes an event source of choice */
$scope.addRemoveEventSource = function (sources, source) {
    var canAdd = 0;
    angular.forEach(sources, function (value, key) {
        if (sources[key] === source) {
            sources.splice(key, 1);
            canAdd = 1;
        }
    });
    if (canAdd === 0) {
        sources.push(source);
    }
};
/* add custom event*/
$scope.addEvent = function () {
    $scope.events.push({
        title: $scope.ev.title,
        start: moment($scope.ev.from),
        end: moment($scope.ev.to),
        allDay: true,
        className: ['openSesame']
    });
};
/* remove event */
/*$scope.remove = function (index) {
    $scope.events.splice(index, 1);
};*/
/* Change View */
$scope.changeView = function (view, calendar) {
    $scope.currentView = view;
    uiCalendarConfig.calendars[calendar].fullCalendar('changeView', view);
};
/* Change View */
$scope.renderCalender = function (calendar) {
    $timeout(function () {
        if (uiCalendarConfig.calendars[calendar]) {
            uiCalendarConfig.calendars[calendar].fullCalendar('render');
        }
    });
};
/* Render Tooltip */
$scope.eventRender = function (event, element, view) {};
/* config object */
$scope.uiConfig = {
    calendar: {
        height: 450,
        editable: true,
        customButtons: {
            myCustomButton: {
                text: 'custom!',
                click: function () {
                    alert('clicked the custom button!');
                }
            }
        },
        header: {
            left: 'title',
            center: 'myCustomButton',
            right: 'today prev,next'
        },
        dayClick: $scope.alertOnDayClick,
        eventClick: $scope.alertOnEventClick,
        eventDrop: $scope.alertOnDrop,
        eventResize: $scope.alertOnResize,
        eventRender: $scope.eventRender,
        businessHours: {
            start: '10:00', // a start time (10am in this example)
            end: '18:00', // an end time (6pm in this example)

            dow: [1, 2, 3, 4]
            // days of week. an array of zero-based day of week integers (0=Sunday)
            // (Monday-Thursday in this example)
        }
    }
};

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

})

这是我的输出： enter image description here

0 个答案:

没有答案
相关问题
最新问题