10kb / angular-clndr Goto Github PK

Hi, I would like to customize some properties of the clndr object but I don't know how to.
I've tried providing an object to the tien-clndr-object from the controller but it does nothing.

$scope.clndr = {
     startWithMonth: moment().day(-31),
     daysOfTheWeek: ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb']
};

So the question is:
Is that the correct way to manipulate / initialize the clndr object? if not, what do you suggest?

Thank you in advance

Can you explain to me why it is necessary to have a template of

<div><div class="clndr_container"></div></div>

and then call clndr() on the element's inner div's class of "clndr_container"?

Is there not a way to have a templateUrl of cal.html for example which will contain all my controls, headers, days, etc and then just call the clndr() on the directive's $element? Is this not possible because of the transclusion? How should i go about this?

Thanks for the library.. A small issue to report..

bower.json is missing the default css file..

a simple one line change:
"main": ["./angular-clndr.min.js", "./angular-clndr.css"],

So I tried to set up the options like this:
$scope.options = { daysOfTheWeek: ['ZO', 'MA', 'DI', 'WO', 'DO', 'VR', 'ZA'], clickEvents: { click: function(target) { }, onMonthChange: function (month) { console.log('changed month'); }, onYearChange: function (year) { console.log('changed year'); } } };
It changes the days of the week but none of the click events seem to be firing. Should I just use an ng-click or is this supposed to be implemented in some other way?

the directive does not allow to update the clndr events array when passing an empty one because of this condition:

if (val != null ? val.length : void 0)

I'm trying to use angular-clndr directive with my Ionic project, but unfortunately I have some error.

 TypeError: undefined is not a function

How do you connect this directive with the clndr library? And how to you use it?

I get this error when trying the calendar. It refers to this line.
return $scope.clndr = angular.element("<div/>").clndr(options);

It seems like the clndr function is not available to angular.element. Isn't clndr a jquery plugin anyway?

Hi,

I'm new to AngularJS so some things are quite puzzling to me. How do I hookup my code to the clndr onMonthChange event?

This is my code so far. For testing I created the sendData function and it runs on every page load. Also the start and end dates are hard-coded in the URL I use for the AJAX call.

I'd like to place the sendData code inside the clndr onMonthChange event and, obviously, use the month param returned by the onMonthChange event to populate the calendar correctly for each month the user clicks through.

angular.module('HoRApp')
.controller('CalendarController', ['$scope', '$http', "amMoment",
function ($scope, $http, amMoment) {

        amMoment.changeLocale("mt");

        $scope.sendData = function () {
            $http({
                url: '/umbraco/Api/SittingsApi/GetSittingsForMonth/?start=2014-10-01",
                method: 'GET'
            })
           .then(function (response) {
               $scope.events = response.data;
             });
        }

      $scope.goToDay = function (day) {
            if (day == null) return;
            window.location.href = day.Url;
        }

      $scope.sendData();

    }]);

Thanks

The constraints clndr setting is ignored. I can navigate to any month even though constraints are defined.

$scope.options = {
  constraints: {
    startDate: moment().format('YYYY-MM-') + '04',
    endDate: moment().add(1, 'months').format('YYYY-MM-12')
  }
};

After trying setup clndr with angular-clndr.min.js I found that the minified version was failing while the unminified version worked fine.

This is the error I got using the minified version:
Error: [$injector:unpr] http://errors.angularjs.org/1.3.6/$injector/unpr?p0=aProvider%20%3C-%20a
at Error (native)
at http://localhost:8080/bower_components/angular/angular.min.js:6:416
at http://localhost:8080/bower_components/angular/angular.min.js:38:232
at Object.d as get
at http://localhost:8080/bower_components/angular/angular.min.js:38:306
at d (http://localhost:8080/bower_components/angular/angular.min.js:36:238)
at Object.e as invoke
at G.instance (http://localhost:8080/bower_components/angular/angular.min.js:76:138)
at http://localhost:8080/bower_components/angular/angular.min.js:59:246
at r (http://localhost:8080/bower_components/angular/angular.min.js:7:408)

Using:
Chrome: 39
angular-clndr: 0.3.0
angular: 1.3.6
clndr: 1.2.5
& sourcecode from http://angular-clndr.10kb.nl/

I'm using Angular Material and when I try make a new calendar, there is an error:

TypeError: angular.element(...).clndr is not a function

Sorry for my English.

Hello,
I'm trying to set up a calendar using CLNDR and Angular.js. The calendar part works fine right now, but now I would like to show the events of the current month below the calendar. I edited some code, but it's not working, and I don't know what I'm doing wrong.
Could someone help me with this?

Thank you in advance!

My html for the eventlist:

        <div class="event-listing">
          <div class="event-listing-title">EVENTS THIS MONTH</div>
              <div class="event-item" ng-repeat="event in eventsThisMonth">
                <div class="event-item-name" ng-show="event.name">{{event.name}}</div>
                <div class="event-item-location" ng-show="event.location">{{event.location}}</div>
              </div>

The angular controller:

.controller('calendarCtrl', function($scope) {

 $scope.options = {
              weekOffset: 1,
              daysOfTheWeek: ['ZO', 'MA', 'DI', 'WO', 'DO', 'VR', 'ZA'],
              constraints: {
                  startDate: moment().subtract(1, 'months').format('YYYY-MM-15'),
                  endDate: moment().add(2, 'months').format('YYYY-MM-15')
              }
          };
          $scope.events = [
              { date: moment().add(3, 'days').format(), title: "Happy days" },
              { date: moment().subtract(5, 'days').format(), title: "Good old days" },
              { date: moment().subtract(5, 'days').format(), title: "And some more" }
          ];
          $scope.showEvents = function(events) {
              alert(events.map(function(e) { return e.title }).join("\n"));
          };

});