AngularJS FullCalendar - 点击更改月份

时间:2016-02-06 19:33:44

标签: javascript asp.net angularjs

问题

我的应用程序上有一组按钮,这些按钮是一年中的不同月份。当用户点击它们时,日历应该更改为该月,并更新其上方的标签。

我已尝试过这个(,您将从下面的代码中看到)但我真的坚持如何实现我的目标。如果你们可以帮助我编写代码的最佳方法以及如何编写这个问题,那将是很棒的。

代码

因为你可以看到我有一个按钮列表,这些是一年中的不同月份(忽略内联代码,我知道它需要移动:P )我添加了3个按钮因为你不需要看到它们,所以它们都是一样的。我还在此代码中添加了标签:

<div class="col-lg-2" ng-controller="monthSelection" style="height: 100%;">
    <div class="row" style="border-bottom: 1px solid #E7E7E7; padding-bottom: 20px;">
         <div class="col-lg-12 text-center" style="padding-top: 20px;">
             <span style="font-weight: 400; font-size: 20px;">April 2016</span>
         </div>
    </div>
    <div class="row" style="padding-top: 10px;">
        <div class="col-lg-4">
            <button style="border: none; background-color: #ffd47f; border-radius: 5px; height: 30px; width: 100%;" ng-click="JanClick()>Jan</button>
        </div>
        <div class="col-lg-4">
            <button style="border: none; background-color: #ffd47f; border-radius: 5px; height: 30px; width: 100%;">Feb</button>
        </div>
        <div class="col-lg-4">
            <button style="border: none; background-color: #ffd47f; border-radius: 5px; height: 30px; width: 100%;">Mar</button>
        </div>
    </div>
</div>

以下是我创建日历的代码:

<div class="row">
    <div class="col-lg-12">
        <div ng-controller="aceTracker">
            <div ng-model="eventSources" ui-calendar="uiConfig.calendar"></div>
        </div>
    </div>
</div>

然后在我的控制器中我尝试添加这样的东西(它不起作用):

app.controller('monthSelection', function ($scope) {
    $scope.JanClick = function () {
        $scope.calendar.fullCalendar('gotoDate', 2012, 11);
    }
});

结论

如何让日历更改为正确的月份以及日历上方的标签?编写代码以尽可能减少代码的最佳方法是什么?

0 个答案:

没有答案