CODEWITHSUNDEEP
angularjscalendar
Ru11
Ru11

Reputation: 881

Calendar in pure angularJS

I don't want to use the ui-calendar/full calendar in my project, but I want to make a calendar in pure AngularJS. I was trying this, but got confused in between. I'm pasting the code for what I have done. Please tell me how to correct it.

JS is:

  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]);
});

and the View is:

<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>

I know that the above code is creating a div inside a div, which is not the correct way. How do I do it? Please help!

Upvotes: 2

Views: 9617

Answers (1)

Kumar D
Kumar D

Reputation: 1378

We came across this recently and integrating this now. https://github.com/twinssbc/AngularJS-ResponsiveCalendar

This looks promising for those who wants pure angularjs

Upvotes: 3

Related Questions