Calendar in pure angularJS

Question

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!

Hi Ru, did you solution for this? we are also looking for this solution. — Kumar D
– Kumar D, Commented Aug 5, 2014 at 13:19
I did not get the solution. The one you suggested is a better option I believe. — Ru11
– Ru11, Commented Aug 6, 2014 at 15:17

Kumar D · Accepted Answer · 2014-08-06 11:22:13Z

3

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

This looks promising for those who wants pure angularjs

answered Aug 6, 2014 at 11:22

Kumar D

1,3885 gold badges20 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Calendar in pure angularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related