Geek Answers Handbook

Custom calendar with bootstrap and pulses

I need to create a custom calendar, I do not require a complete solution for the code here, but I would like only someone to give me some guidance on how I should approach this and how to do it right. I will have a list of users, and each user has several events with a start and end date, and I need to show it on a calendar, for example this . Below you can see my user object with a list of events, and I'm not sure how this object can be displayed in my user calendar. I know that there are many calendar plugins, but I could not find anything to look like the calendar I showed in this link, so I have to write my own using 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
      }
   ]
}
0
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
-1

More articles:


All Articles