带有Bootstrap和Moment.js的自定义日历 [英] Custom calendar with bootstrap and momentjs
问题描述
我需要创建自定义日历，在这里我不要求完整的代码解决方案，但是我只想在有人可以给我一些指导的方式下，介绍如何处理此问题以及如何正确地做到这一点.我将有一个用户列表，每个用户都有几个带有开始和结束日期的事件，我需要在日历中显示它，例如
I need to create custom calendar, i don't ask for complete code solution here, but i would like only if someone could give me some guidance how i should approach to this, and how to properly do it. I will have list of users and every user have few events with start and end date and i need to show it in calendar like this. Bellow you can see my user object with list of events and i'm not sure how object like that i can show in my custom calendar. I know there are lots of calendar plugins but i was unable to find anything to look like calendar i showed in that link, so that is reason why i must write my own with angularjs, momentjs and bootstrap table.
{
FirstName:Luis,
Last Name:Figo,
events:[
{
startDate:01-01-2017,
endDate:01-05-2017,
eventName:Training session
},
{
startDate:01-15-2017,
endDate:01-25-2017,
eventName:Training Session
}
]
}
推荐答案
for html file
<!DOCTYPE html>
<html>
<head>
<title>Angular Bootstrap Datepicker Demo</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="angular-bootstrap-datepicker.css" />
<script src="jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="angular.js"></script>
<script src="angular-bootstrap-datepicker.js" charset="utf-8"></script>
<script type="application/javascript">
<body data-ng-app="demo">
<div>
<div data-ng-controller="AppCtrl">
<input id="datepicker" type="text" data-ng-datepicker data-ng-options="datepickerOptions" data-ng-model="date">
</div>
</div>
app = angular.module('demo', ['ng-bootstrap-datepicker']);
app.controller('AppCtrl', function($scope) {
$scope.datepickerOptions = {
format: 'yyyy-mm-dd',
language: 'fr',
startDate: "2012-10-01",
endDate: "2012-10-31",
autoclose: true,
weekStart: 0
}
});
</script>
</body>
</head>
</html>
for .js file
app = angular.module('demo', ['ng-bootstrap-datepicker']);
app.controller('AppCtrl', function($scope) {
$scope.datepickerOptions = {
format: 'yyyy-mm-dd',
language: 'fr',
startDate: "2012-10-01",
endDate: "2012-10-31",
autoclose: true,
weekStart: 0
}
});
for more info follow my calender app for referance https://github.com/mehulkumar1/datepicker
这篇关于带有Bootstrap和Moment.js的自定义日历的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
