angularjs calendar

angularjs calendar

安装

bower install flex-calendar --savecd ../flex-calendar/..bower install

Add to index.html

<link rel="stylesheet" href="bower_components/flex-calendar.css"><script type="text/javascript" src="bower_components/angular-translate/angular-translate.min.js.js"></script><script type="text/javascript" src="bower_components/flex-calendar.js"></script>

Inject flex-calendar and pascalprecht.translate into your main module:

angular.module('App', ['flexcalendar' , 'pascalprecht.translate'])

Add </flex-calendar> directive to your html file.

<flex-calendar options="options" events="events"></flex-calendar>

Flex Calendar takes a few options:
app.controller('myController', ['$scope', function($scope) {
  "use strict";
  // With "use strict", Dates can be passed ONLY as strings (ISO format: YYYY-MM-DD)
  $scope.options = {
    defaultDate: "2015-08-06",
    minDate: "2015-01-01",
    maxDate: "2015-12-31",
    disabledDates: [
        "2015-06-22",
        "2015-07-27",
        "2015-08-13",
        "2015-08-15"
    ],
    dayNamesLength: 1, // 1 for "M", 2 for "Mo", 3 for "Mon"; 9 will show full day names. Default is 1.
    mondayIsFirstDay: true,//set monday as first day of week. Default is false
    eventClick: function(date) {
      console.log(date);
    },
    dateClick: function(date) {
      console.log(date);
    },
    changeMonth: function(month, year) {
      console.log(month, year);
    },
  };

  $scope.events = [
    {foo: 'bar', date: "2015-08-18"},
    {foo: 'bar', date: "2015-08-20"}
  ];
}]);