Using wijmo event calender with angularjs

250 Views Asked by At

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?

2

There are 2 best solutions below

0
On BEST ANSWER

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

0
On

I fixed it on my own.

I had to call

var app = angular.module("MyApp", ["wijmo"]);

at the beginning of the script and now I can use the tag

<wijevcal></wijevcal>