This is a migrated thread and some comments may be shown as answers.

Displaying events in the calendar

5 Answers 66 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Dan Cornish
Top achievements
Rank 1
Dan Cornish asked on 22 Dec 2015, 08:20 PM

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.

5 Answers, 1 is accepted

Sort by
0
Nick
Telerik team
answered on 23 Dec 2015, 07:46 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Dan Cornish
Top achievements
Rank 1
answered on 26 Dec 2015, 03:54 PM

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

0
Nick
Telerik team
answered on 30 Dec 2015, 12:39 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Dan Cornish
Top achievements
Rank 1
answered on 30 Dec 2015, 03:05 PM

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.

 

0
Nick
Telerik team
answered on 04 Jan 2016, 11:16 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Calendar
Asked by
Dan Cornish
Top achievements
Rank 1
Answers by
Nick
Telerik team
Dan Cornish
Top achievements
Rank 1
Share this question
or