如何在AngularJS应用中添加多个FullCalendar组件？双日历实现咨询

嘿，我来帮你搞定AngularJS里两个FullCalendar组件的实现！首先看你提供的代码，有两个关键问题需要先修正——重复的id和calendar属性值，这会导致组件冲突，没法正常工作。下面是一步步的实现方案：

1. 修正模板中的重复标识问题 #

首先，你的模板里两个日历的id和calendar属性完全相同，这会让AngularUI Calendar无法区分它们。我们需要给每个日历设置唯一的id和唯一的calendar标识：

<!-- 第一个日历 -->
<div id="calendar1" ui-calendar="uiConfig.calendar1" ng-model="eventSources1" calendar="myCalendar1"></div>

<!-- 第二个日历 -->
<div id="calendar2" ui-calendar="uiConfig.calendar2" ng-model="eventSources2" calendar="myCalendar2"></div>

2. 控制器中配置独立的日历参数与事件源 #

接下来在AngularJS控制器里，你需要为每个日历配置对应的配置项和事件源。如果两个日历的基础配置（比如视图、按钮等）相同，可以复用配置对象；如果需要不同的行为，就单独定义：

angular.module('myApp', ['ui.calendar'])
.controller('CalendarController', function($scope) {
    // 可选：共用的基础日历配置
    const baseCalendarConfig = {
        height: 450,
        editable: true,
        header: {
            left: 'month agendaWeek agendaDay',
            center: 'title',
            right: 'prev next today'
        }
    };

    // 为两个日历分配配置（可以单独修改某一个的配置）
    $scope.uiConfig = {
        calendar1: angular.copy(baseCalendarConfig),
        calendar2: angular.copy(baseCalendarConfig)
        // 比如给第二个日历加个不同的默认视图：
        // calendar2: {...baseCalendarConfig, defaultView: 'agendaWeek'}
    };

    // 第一个日历的事件源
    $scope.eventSources1 = [
        {
            title: '团队会议',
            start: new Date(),
            end: new Date(new Date().setHours(new Date().getHours()+1))
        }
    ];

    // 第二个日历的事件源（可以和第一个不同，也可以相同）
    $scope.eventSources2 = [
        {
            title: '客户拜访',
            start: new Date(new Date().setDate(new Date().getDate()+1))
        }
    ];

    // 如果你需要操作单个日历实例（比如跳转日期），可以通过对应的scope变量
    // 示例：跳转第一个日历到明天
    // $scope.myCalendar1.fullCalendar('gotoDate', new Date(new Date().setDate(new Date().getDate()+1)));
});

3. 确保依赖资源正确引入 #

别忘了在页面中引入FullCalendar和AngularUI Calendar的必要资源（顺序很重要）：

<!-- FullCalendar CSS -->
<link rel="stylesheet" href="fullcalendar.css">

<!-- Moment.js（FullCalendar依赖） -->
<script src="moment.min.js"></script>
<!-- jQuery（FullCalendar依赖，注意版本兼容） -->
<script src="jquery.min.js"></script>
<!-- FullCalendar JS -->
<script src="fullcalendar.min.js"></script>
<!-- AngularJS -->
<script src="angular.min.js"></script>
<!-- AngularUI Calendar -->
<script src="angular-ui-calendar.js"></script>

关键注意点 #

• 唯一标识：每个日历的id和calendar属性值必须唯一，这是AngularUI Calendar区分不同组件的核心。
• 独立事件源：通过ng-model绑定不同的eventSources数组，可以让两个日历展示不同的事件；如果需要展示相同事件，也可以绑定同一个数组。
• 单独控制实例：通过calendar属性绑定的$scope.myCalendar1和$scope.myCalendar2，你可以调用FullCalendar的原生方法来单独控制每个日历的行为。

内容的提问来源于stack exchange，提问作者PhpDev