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