Nativescript-ui-feedback: CalendarEvent Id

[masrc]

Did you verify this is a real problem by searching Stack Overflow?

Yes

Tell us about the problem

I have a calendar that can show, create, edit and remove events, they are being saved on a array and its working at now, but I need save that in a data base, so I need a CalendarEvent Id. If that exist arready, how can I access? If not, do you recommend any way to implemented this?

[NickIliev]

@masrc thank you for your interest in NativeScript pro ui suite.
Indeed at this very moment, calendar event ID is not implemented out-of-the-box for RadCalendar so I am marking this one as a feature request.

Regarding on how to work around your issue - I guess storing a mirror array with the event items (+ unique ID for each item) in your view model is an option. Then when you need to save the event, lookup up for the unique ID in the mirror array and use it to store and retrieve the data when needed.

[felipebueno]

Hi, @NickIliev!

I'm facing the same issue as @masrc.

For now I'm comparing the returned event from my onDayViewEventSelected(args: CalendarDayViewEventSelectedData) function with the items stored on an array using event.title + event.startDate + event.endDate as the unique id.

Please, allow us to associate custom data to a CalendarEvent! 😢

View

<calendar:RadCalendar eventSource="{{ eventSource }}" dayViewEventSelected="onDayViewEventSelected" />

Code behind

export function onDayViewEventSelected(args: CalendarDayViewEventSelectedData) {
    const event: CalendarEvent = args.eventData;
    const bookingId = event.title + event.startDate + event.endDate;
    home.onDayViewEventSelected(bookingId);
}

ViewModel

    onDayViewEventSelected(bookingId: string) {
        // Temporary solution to find the booking associated with the tapped event
        // as there's no way to set custom data on a CalendarEvent object yet
        // REFERENCE:
        // https://www.telerik.com/forums/custom-data-in-calendarevent
        // https://github.com/telerik/nativescript-ui-feedback/issues/418
        const booking = this._bookings.find((_booking) => {
            return _booking.title + _booking.start_date + _booking.end_date === bookingId;
        });
        frameModule.topmost().navigate({
            moduleName: "bookings/booking-detail-page/booking-detail-page",
            context: booking,
            animated: true
        });
    }

[jvelezc]

Same problem please let us have something so we can store the unique id. +1

[horeyes]

Hello @NickIliev,

I'm facing the same issue. Having access to an Id would give the calendar more functionality.

Thanks

[tonyawad88]

Hello,

Is it possible to do a pull request on the nativescript pro ui?

I can try and help out if you let me know which telerik project I should use / branch of.

Cheers,
Tony

[radeva]

Hi @tonyawad88 ,

The components now are free but still not open-source so I'm afraid this is currently not possible. We're working in direction of open-sourcing them so once this happen it will be possible.

Best regards,
Vesi

[rickdps]

Hi everyone. I really need this functionality. Please, help us.

[throwingdarts]

I am really surprised this is not already possible. Seems like such basic functionality. Why have a list of data objects (in this case in a calendar view) without any way to know what data object the user selected? PLEASE make this a priority so this calendar control is actually usable. Personally it may force me to switch to Xamarin :-(

[felipebueno]

Hi, @ThrowingDarts!

You could try the workaround I described on my comment.

I know it's not great but it should work for now.

[throwingdarts]

Thanks @felipebueno,

I appreciate that but your work-a-round only works if the constructed _bookingId_ is unique. In my case I could have multiple all-day events with the same title.

[nativoplus]

Same problem... Is 2018 now.

[lukebellamy053]

I must say it's pretty appalling that this was never added in the first place. It's a very simple feature, without which severely limits the use of the calendar. Please sort this out as soon as you can or provide a reasonable workaround that isn't just checking the attributes

[phatakrajan]

Is it possible to extend the class and register element? Just random idea ....

[radeva]

Hi @tonyawad88 , @phatakrajan, @lukebellamy053, @nativoplus, @rickdps , @felipebueno, @throwingdarts

Contributions are now possible after signing a mutual NDA. If you or anyone else is still interested to contribute, contact us at [email protected].

[BernaLang]

Any update on this?

[Remigius2011]

hi,

disclaimer: this is just a "me too" comment - due to the fact that we face the same problem and that nothing has appened in quite some time.

imho it should not be a big issue to add either an additional field to CalendarEvent that is passed to the event handler. The additional field should be of type any - this would give the user the freedom to either use an id or the data object itself.

the work-around of concatenating some fields of the calendar events is indeed a work-around, but even if there are no collisions (of which you can never be sure in this case), associating the objects directly to the calendar event is in any case more efficient.

[throwingdarts]

@radeva I would love to learn to contribute but am afraid my learning curve would be too time consuming for me at this point. Any update here?

[tgpetrov]

Hi all,
Currently RadCalendar's eventSource should be a list of items of type CalendarEvent.
We are planning to add the option to extend the CalendarEvent class and allow you to pass a list of items of your custom type as eventSource. This way you will be able to add whatever you need to store in the events including an id of the type that is most convenient for you.

[zbranzov]

Released in [email protected]

[tgpetrov]

Here's more info about how to extend the calendar event:

• Core - Docs, Demo
• Angular - Docs, Demo
• Vue - Docs, Demo

[throwingdarts]

Thanks.
-mb
On 6/28/2019 1:22:41 AM, Todor Petrov [e-mail] wrote:
Here's more info about how to extend the calendar event:

• Core - Docs [https://docs.nativescript.org/ui/professional-ui-components/Calendar/populating-with-data#extending-the-calendarevent], Demo [https://github.com/NativeScript/nativescript-ui-samples/tree/master/calendar/app/calendar/custom-events]
• Angular - Docs [https://docs.nativescript.org/angular/ui/professional-ui-components/ng-Calendar/populating-with-data#extending-the-calendarevent], Demo [https://github.com/NativeScript/nativescript-ui-samples-angular/tree/master/calendar/app/calendar/custom-events]
• Vue - Docs [https://docs.nativescript.org/vuejs/ns-ui/Calendar/populating-with-data#extending-the-calendarevent], Demo [https://github.com/NativeScript/nativescript-ui-samples-vue/blob/master/calendar/app/examples/CustomEvents.ts]
  —
  You are receiving this because you were mentioned.
  Reply to this email directly, view it on GitHub [https://github.com/NativeScript/nativescript-ui-feedback/issues/418?email_source=notifications&email_token=ACRLIKEVPUX4APOYT7GLZYTP4WU3BA5CNFSM4EFCPXTKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODYZF4BY#issuecomment-506617351], or mute the thread [https://github.com/notifications/unsubscribe-auth/ACRLIKG3Q4FD7KY6PIZ6ZY3P4WU3BANCNFSM4EFCPXTA].