带有 bootstrap 和 momentjs 的自定义日历答案

【问题标题】：Custom calendar with bootstrap and momentjs带有 bootstrap 和 momentjs 的自定义日历
【发布时间】：2017-03-01 11:22:19
【问题描述】：

我需要创建自定义日历，我不要求在这里提供完整的代码解决方案，但我希望有人能给我一些指导，我应该如何处理这个问题，以及如何正确地做到这一点。我将有用户列表，每个用户都有很少的开始和结束日期的事件，我需要在日历中显示它，比如this。波纹管你可以看到我的用户对象和事件列表，我不确定我可以在我的自定义日历中如何显示这样的对象。我知道有很多日历插件，但我找不到任何看起来像我在那个链接中显示的日历的东西，所以这就是为什么我必须用 angularjs、momentjs 和 bootstrap 表编写自己的。

{  
   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
      }
   ]
}

【问题讨论】：

标签： javascript angularjs twitter-bootstrap calendar momentjs

【解决方案1】：

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

【讨论】：

先生，我相信这不是我要找的。span>