creating AngularJS calendar in codeigniter view

Question

I want to create an angular calendar in my project and I am using codeigniter. I have tried using this but it doesn't work on me. I just did what's in the page source but the calendar is not showing. I am guessing that this might be the problem. In the code below, I havetemplateUrl: "templates/calendar.html" but since it is in a codeigniter view with a .php file extension, it causes it not to function.

<script type="text/javascript">
        var app = angular.module("demo", []);

        app.controller("calendarDemo", function($scope) {
            $scope.day = moment();
        });

        app.directive("calendar", function() {
            return {
                restrict: "E",
                templateUrl: "templates/calendar.html",
                scope: {
                    selected: "="
                },
                link: function(scope) {
                    scope.selected = _removeTime(scope.selected || moment());
                    scope.month = scope.selected.clone();

                    var start = scope.selected.clone();
                    start.date(1);
                    _removeTime(start.day(0));

                    _buildMonth(scope, start, scope.month);

                    scope.select = function(day) {
                        scope.selected = day.date;  
                    };

                    scope.next = function() {
                        var next = scope.month.clone();
                        _removeTime(next.month(next.month()+1).date(1));
                        scope.month.month(scope.month.month()+1);
                        _buildMonth(scope, next, scope.month);
                    };

                    scope.previous = function() {
                        var previous = scope.month.clone();
                        _removeTime(previous.month(previous.month()-1).date(1));
                        scope.month.month(scope.month.month()-1);
                        _buildMonth(scope, previous, scope.month);
                    };
                }
            };

            function _removeTime(date) {
                return date.day(0).hour(0).minute(0).second(0).millisecond(0);
            }

            function _buildMonth(scope, start, month) {
                scope.weeks = [];
                var done = false, date = start.clone(), monthIndex = date.month(), count = 0;
                while (!done) {
                    scope.weeks.push({ days: _buildWeek(date.clone(), month) });
                    date.add(1, "w");
                    done = count++ > 2 && monthIndex !== date.month();
                    monthIndex = date.month();
                }
            }

            function _buildWeek(date, month) {
                var days = [];
                for (var i = 0; i < 7; i++) {
                    days.push({
                        name: date.format("dd").substring(0, 1),
                        number: date.date(),
                        isCurrentMonth: date.month() === month.month(),
                        isToday: date.isSame(new Date(), "day"),
                        date: date
                    });
                    date = date.clone();
                    date.add(1, "d");
                }
                return days;
            }
        });
    </script>

How am I going to fix it?

EDIT: calendar template:

<div class="header">
  <i class="fa fa-angle-left" ng-click="previous()"></i>
  <span>{{month.format("MMMM, YYYY")}}</span>
  <i class="fa fa-angle-right" ng-click="next()"></i>
</div>
<div class="week names">
  <span class="day">Sun</span>
  <span class="day">Mon</span>
  <span class="day">Tue</span>
  <span class="day">Wed</span>
  <span class="day">Thu</span>
  <span class="day">Fri</span>
  <span class="day">Sat</span>
</div>
<div class="week" ng-repeat="week in weeks">
  <span class="day" ng-class="{ today: day.isToday, 'different-month': !day.isCurrentMonth, selected: day.date.isSame(selected) }" ng-click="select(day)" ng-repeat="day in week.days">{{day.number}}</span>
</div>

Your help would be much appreciated.

either create directory of html templates or provide a url that will send the proper template from codeigniter. Alternatively put the template into an angular template script tag — charlietfl
– charlietfl, Commented Jan 4, 2016 at 15:11
@charlietfl, thanks for the idea. It really helped. I just made a controller method that calls the view inside the codeigniter. And it works well. — d_unknown
– d_unknown, Commented Jan 6, 2016 at 15:32
@charlietfl, but how am I going to put the event (from the list of events retrieve from database) to a certain date? — d_unknown
– d_unknown, Commented Jan 6, 2016 at 16:03
that has nothing to do with your template, you would do that with data from your api and call for that data using angular — charlietfl
– charlietfl, Commented Jan 6, 2016 at 17:31
@charlietfl, how am I going to do that? I mean, lets say I already have the list of data retrieve from the database. like this, $http.get(BASE_URL+'Event/getAllEvents').success( function(response) { $scope.events = response }); . How am I going to display it in its corresponding date? — d_unknown
– d_unknown, Commented Jan 7, 2016 at 6:32

Steven M · Accepted Answer · 2016-01-05 21:16:59Z

1

I think you are confusing Codeigniter Views and Angular Templates.

Clearly whichever template you are loading through Angular should be just a plain angular html file.

If what you want to load should be processed output from Codeigniter than you need to make an ajax call to load it.

    module.run(function($http) {
       var template = $http.get('http://my.codeigniter.com/segment1/segment2', config).then(successCallback, errorCallback);
    });

You could then render the result in your Angular View.

Hope this helps - Good Luck!

answered Jan 5, 2016 at 21:16

Steven M

5744 silver badges20 bronze badges

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

1 Comment

charlietfl Over a year ago

don't really see how populating a local variable will help. Why wouldn't you just point templateUrl of directive , router or even ng-include at that url?

Collectives™ on Stack Overflow

creating AngularJS calendar in codeigniter view

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related