Search code examples
javascripthtmlangularjsmodel-view-controllerwijmo

Using wijmo event calender with angularjs

Hell, I'm trying to use the wijmo event calender with the AngularJS liabry, but the appointments binding isn't working correctly. This is my html:

<html>
    <head>
        <title>Control Tests</title>
        <script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
        <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.min.js" type="text/javascript"></script>

        <link href="http://cdn.wijmo.com/themes/rocket/jquery-wijmo.css" rel="stylesheet"
              title="metro-jqueryui" type="text/css" />

        <link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20131.7.min.css" rel="stylesheet" type="text/css" />

        <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20131.7.min.js" type="text/javascript"></script>
        <script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20131.7.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="http://cdn.wijmo.com/external/globalize.min.js"></script>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
        <script src="http://cdn.wijmo.com/external/angular.wijmo.js" type="text/javascript"></script>

        <script src="../../Scripts/Controller/MainController.js" type="text/javascript"></script>
    </head>
    <body>
        <script>
            $(document).ready(function () {
                $(".wijevcal").wijevcal();
            });
        </script>

        <div ng-app ng-controller="MainController">
            <div class="wijevcal" appointments="{{calAppointments}}"></div>
        </div>
    </body>
</html>

And this is the source of the Controller:

function MainController($scope)
{
    $scope.calAppointments = [{
        start: new Date(2013, 5, 23, 15, 30)
    }];
}

Can someone tell me, why the start date isn't applied to the calendar?

Solution

  • Yes, you need to add the Wijmo module in order to use the custom directives provided by Wijmo.