Question

我需要创建自定义日历，我不会在这里要求完整的代码解决方案，但我希望只有有人能给我一些指导我应该如何接近这个，以及如何正确地做到这一点。我将有用户列表，每个用户都有很少的事件有开始和结束日期，我需要在日历中显示this。 Bellow你可以看到我的用户对象与事件列表，我不知道我可以在自定义日历中显示的对象。我知道有很多日历插件，但我无法找到任何看起来像我在该链接中显示的日历，所以这就是为什么我必须用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
      }
   ]
}

Answer 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

自定义日历与bootstrap和momentjs

1 个答案: