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

回答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

来源：https://stackoverflow.com/questions/42530379/custom-calendar-with-bootstrap-and-momentjs

标签

javascript

angularjs

twitter-bootstrap

calendar

momentjs