Displaying events in the calendar

[Dan Cornish]

Greetings,

First off kudos on getting the calendar view done.  This is a great feature for NativeScript.

I've downloaded and tested the latest updates to the sdk project.  However, I'm not seeing a way to display events using the calendar control.  Specifically, does the calendar control have an EventsDisplayMode similar to the RadCalendarView for Android?

Maybe something simliar to this?

calendarView.setEventsDisplayMode(EventsDisplayMode.Inline);

http://docs.telerik.com/devtools/android/controls/calendar/calendar-displaying-events

If not, what do approach to you recommend?

Thanks.

[Nick]

Hello Don,

You can see how you can display events in RadCalendar for NativeScript in this article: http://docs.telerik.com/devtools/nativescript-ui/Controls/Calendar/calendar-populating-with-data

As to the events display mode, we haven't implemented it out of the box, yet. Nevertheless, since RadCalendar for NS is based on CalendarView for Android and TKCalendar for iOS, you can use all of the available native API by using the native instance of the control:

this.calendar.android.setEventsDisplayMode(desiredDisplayMode);

Note you have to use the whole namespace path for the values in order for the runtime to resolve the value.

Hope this helps. 

Regards,
Nick
Telerik

[Dan Cornish]

Hi Nick,

Thanks for the tip.  However, I'm struggling with proper syntax accessing the native APIs.  I need to do this for both iOS and Android.  Here's what I've tried, but it's giving me an error "Cannot read property 'Inline' of undefined"

XML:

          <GridLayout orientation="vertical" rows="auto, *, auto">
              <rc:RadCalendar id="calendar"
                  eventSource="{{ source }}"
                  height="400"
                  viewMode="{{ viewMode }}"
                  row="1" />
...

JavaScript:

var dialogsModule = require("ui/dialogs");
var observableModule = require("data/observable");
var DependencyObservable = require("ui/core/dependency-observable").DependencyObservable;
var viewModule = require("ui/core/view");
var applicationSettings = require("application-settings");
var webViewModule = require("ui/web-view");
var AppointmentsViewModel = require("../view-models/appointments-view-model");
var navigation = require("../shared/navigation");

var frameModule = require("ui/frame");

var calendarModule = require("nativescript-telerik-ui/calendar");

var page;
var employeeAppointments = new AppointmentsViewModel.ViewModel();
var pageData = new observableModule.Observable({
    viewMode: employeeAppointments.ViewMode,
    source: employeeAppointments.Source,
    selectedViewIndex: 0, //Default to 0 Settings
    myTitle: "TOTALS",
    showSettings: true
});
var drawerElement;

exports.onPageLoaded = function (args) {
    page = args.object;
    page.bindingContext = pageData;

    drawerElement = page.getViewById("sideDrawer");
    drawerElement.delegate = new DrawerCallbacksModel();

    if (page.android) {
        //ANDROID ???

        //this.calendar.android.setEventsDisplayMode(calendarModule.EventsDisplayMode.Inline);

        //This line is causing the error
        page.getViewById("calendar").android.setEventsDisplayMode(calendarModule.EventsDisplayMode.Inline);
    }
    else {
        //iOS ???

    }

Can you please let me know the proper syntax for both Android and iOS?

Thanks,
Dan

[Nick]

Hi Dan,

Setting the native Android settings is pretty much the same as you would with the native control. 

page.getViewById("calendar").android.setEventsDisplayMode(com.telerik.widget.calendar.events. EventsDisplayMode.Inline);

In iOS it is a bit more complicated. For properties and fields it is the same. When it comes to methods, though, you need to camel case concatenate the whole signature. 
In order to invoke the

isDate:equalToDate:withComponents:withCalendar:

class method, you need to call:

TKCalendar.isDateEqualToDateWithComponentsWithCalendar(date1, date2, components, calendarInstance)

Hope this makes sense. 

Regards,
Nick
Telerik

[Dan Cornish]

Thanks.  The Android code works great.

I don't own a Mac.  So I can't test the iOS code without using AppBuilder.  When will the latest version of NativeScript, which includes the calendar control, be available on AppBuilder?  I see the latest NativeScript version is currently 1.4.3 on AppBuilder.

 

[Nick]

Hi Dan,

The next version of AppBuilder is planned to be released somewhere in the end of January or the beginning of February. It will support NativeScript 1.5+ and you will be able to use the Calendar control.

Regards,
Nick
Telerik