日历在纯angularJS

时间:2014-06-19 04:18:31

标签: angularjs calendar

我不想在我的项目中使用ui-calendar /完整日历,但我想在纯AngularJS中制作日历。我正在尝试这个,但在两者之间感到困惑。我正在为我所做的事情粘贴代码。请告诉我如何纠正它。

JS是:

  app.controller('CalendarCtrl', function ($scope) {
$scope.Weekday = [
    'Sunday',
    'Monday',
    'Tuesday',
    'Wednesday',
    'Thursday',
    'Friday',
    'Saturday'
];
$scope.MonthA = [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
    'July',
    'August',
    'September',
    'October',
    'November',
    'December'
];
$scope.Mdays = [
    31,28,31,30,31,30,31,31,30,31,30,31
];

var Today = new Date();
$scope.Date = Today.getDate();
$scope.Month = Today.getMonth();
$scope.dow = Today.getDay();
var Year = Today.getYear();
$scope.Year = Year;

$scope.day = 1;

var i, j;  

if (Year < 2000) {
    Year += 1900;
}
$scope.Year = Year;

if ((Year % 400 == 0) || ((Year % 4 == 0) && (Year % 100 !=0)))
    Mdays[1] = 29;

var Mfirst = Today;
Mfirst.setDate(1);
var dow1 = Mfirst.getDay();
console.log($scope.Weekday[dow1]);
});

并且视图是:

<div class="row">
<div class="col-md-1">Sun</div>
<div class="col-md-1">Mon</div>
<div class="col-md-1">Tue</div>
<div class="col-md-1">Wed</div>
<div class="col-md-1">Thu</div>
<div class="col-md-1">Fri</div>
<div class="col-md-1">Sat</div>    
</div>
<div class="row" ng-repeat="i in [] | range:6"> 
<div class="col-md-1" ng-repeat="j in [] | range:7">
        <div ng-if="(i == 0 && j < dow1) || (day > Mdays[Month])">
            &nbsp;
        </div>
        <div ng-if="!((i == 0 && j < dow1) || (day > Mdays[Month]))">
            {{day}}
        </div>
</div>

我知道上面的代码在div中创建了一个div,这不是正确的方法。我该怎么做?请帮忙!

1 个答案:

答案 0 :(得分:3)

我们最近遇到了这个并且现在整合了这个。 https://github.com/twinssbc/AngularJS-ResponsiveCalendar

对于那些想要纯粹的angularjs

的人来说,这看起来很有希望