我的应用程序上有一组按钮,这些按钮是一年中的不同月份。当用户点击它们时,日历应该更改为该月,并更新其上方的标签。
我已尝试过这个(,您将从下面的代码中看到)但我真的坚持如何实现我的目标。如果你们可以帮助我编写代码的最佳方法以及如何编写这个问题,那将是很棒的。
因为你可以看到我有一个按钮列表,这些是一年中的不同月份(忽略内联代码,我知道它需要移动: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);
}
});
如何让日历更改为正确的月份以及日历上方的标签?编写代码以尽可能减少代码的最佳方法是什么?