Displaying events in the calendar

6 posts, 0 answers
  1. Dan Cornish
    Dan Cornish avatar
    28 posts
    Member since:
    Apr 2010

    Posted 22 Dec 2015 Link to this post

    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.

  2. Nick
    Admin
    Nick avatar
    593 posts

    Posted 23 Dec 2015 Link to this post

    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
  3. Dan Cornish
    Dan Cornish avatar
    28 posts
    Member since:
    Apr 2010

    Posted 26 Dec 2015 in reply to Nick Link to this post

    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

  4. Nick
    Admin
    Nick avatar
    593 posts

    Posted 30 Dec 2015 Link to this post

    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
  5. Dan Cornish
    Dan Cornish avatar
    28 posts
    Member since:
    Apr 2010

    Posted 30 Dec 2015 in reply to Nick Link to this post

    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.

     

  6. Nick
    Admin
    Nick avatar
    593 posts

    Posted 04 Jan Link to this post

    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
Back to Top