Localize Wijmo EventsCalendar using AngularJS

There are lots of demo samples available if we talk about the EventsCalendar widget. However if we talk about using EventsCalendar with AngularJS, there is still lot of information yet to be updated in the documentation. To help the users understand how the EventsCalendar widget can be used in conjunction with AngularJS, is the sole purpose of this blog. In addition to this, I will also explain how we can use the localization option within the widget. Let us first take a look on how the final result would look like: The localized text will be defined in the ViewModel and in this example we are localizing text for Today, DayView and WeekView buttons. Here is the script code required to add the events and set the localized text:

//Create ViewModel  
function ViewModel($scope, $locale) {  
   $scope.localization =  
   {  
           buttonToday: "CustomToday",  
           buttonDayView: "Custom DayView",  
           buttonWeekView: "Custom WeekView"  
   };  

   $scope.appointments = [{ id: "appt1", subject: "app1", start: new Date(2013, 5, 23, 15, 30), end: new Date(2013, 5, 23, 17, 35) },  
   { id: "appt2", subject: "app2", start: new Date(2013, 5, 23, 10, 30), end: new Date(2013, 5, 23, 11, 35) }];  
}

Now since these properties need to be set for the EventsCalendar, we will set the properties for wijevcal within the HTML which also includes the localization option.

<wijevcal id="evcal" timeinterval="30" style="min-height: 300px" appointments="{{ appointments }}" localization="{{localization}}">
</wijevcal>

So we are good to go. A sample application demonstrating this implementation can be downloaded using the following link.

Download Sample