react-calendar-feed adding more properties from an event (eventcard.tsx)

[robiharid]

New to SPFX here.

I want to add extra fields from my events, such as "Course Full" or "Cancelled" which are just strings.

I have found the file, "EventCard.tsx", which retrieves properties like "title", "url" and the "date" from the ICalenderEvent.

I have extended "ICalendarEvent" adding two more string fields called "full" and "cancelled" and then also added these fields to the const declaration in the _renderNormalCell() of EventCart.tsx

How do I set the data source for these properties? I have found the SharePoint column name, which is something like "Course_x0020_Full"

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[Fnu-Avi]

@robiharid were you able to resolve this issue?

[robiharid]

@robiharid were you able to resolve this issue?

yep thank you

[Fnu-Avi]

@robiharid I'm also facing the same issue. Can you please tell how you resolved that issue..

[robiharid]

@robiharid I'm also facing the same issue. Can you please tell how you resolved that issue..

Yeah sure, describe your issue verbosely and I will explain the steps I did. This was many months ago but I remember having to make a change to the property in 3 different files, mainly the interface, calling code and the implementation file

[Fnu-Avi]

@robiharid I'm also facing the same issue. Can you please tell how you resolved that issue..

Yeah sure, describe your issue verbosely and I will explain the steps I did. This was many months ago but I remember having to make a change to the property in 3 different files, mainly the interface, calling code and the implementation file

I've an events calendar with one of the field as "Approval Status" which has can be either "Pending" or "Approved". Now, I'm trying to add that field somewhere on the calendar feed so that the user can see the status of their submitted event [whether the submitted event is Pending or Approved].

Now I made changes to the ICalendarEvent.ts file and added one more string field named as approvalStatus: string|undefined and further also added this field to the const declaration in the _renderNormalCell() of EventCard.tsx as const { start, end, allDay, title, url, category, approvalStatus, location } = this.props.event;

Finally when I try to use this variable later in the EventCard.tsx file as: `

{category}

                            <div className={styles.title} data-automation-id="event-card-title">{title}</div>
                            <div className={styles.datetime}>{dateString}</div>
                            <div className={styles.location}>{location}</div>
                            <div className={styles.category}>{approvalStatus}</div>
                            <ActionButton
                                className={styles.addToMyCalendar}
                                iconProps={{ iconName: "AddEvent" }}
                                ariaLabel={strings.AddToCalendarAriaLabel}
                                onClick={this._onAddToMyCalendar}
                            >
                                {strings.AddToCalendarButtonLabel}
                            </ActionButton>
                        </div>`

I get the following errors:

[08:48:14] Starting subtask 'tslint'... [08:48:14] [tslint] tslint version: 5.12.1 [08:48:14] Starting subtask 'tsc'... [08:48:14] [tsc] typescript version: 2.9.2 [08:48:20] Error - [tsc] src/shared/services/CalendarService/iCalCalendarService/iCalCalendarService.ts(30,15): error TS2322: Type '{ title: any; start: Date; end: Date; url: any; allDay: boolean; category: any; description: any;...' is not assignable to type 'ICalendarEvent'. [08:48:20] [tsc] Property 'approvalStatus' is missing in type '{ title: any; start: Date; end: Date; url: any; allDay: boolean; category: any; description: any;...'.[08:48:20] Error - [tsc] src/shared/services/CalendarService/MockCalendarService/MockCalendarService.ts(11,7): error TS2322: Type '({ title: string; start: Date; end: Date; url: string; allDay: true; category: string; location: ...' is not assignable to type 'ICalendarEvent[]'. [08:48:20] [tsc] Type '{ title: string; start: Date; end: Date; url: string; allDay: true; category: string; location: s...' is not assignable to type 'ICalendarEvent'. [08:48:20] [tsc] Type '{ title: string; start: Date; end: Date; url: string; allDay: true; category: string; location: s...' is not assignable to type 'ICalendarEvent'. [08:48:20] [tsc] Property 'approvalStatus' is missing in type '{ title: string; start: Date; end: Date; url: string; allDay: true; category: string; location: s...'.[08:48:20] Error - [tsc] src/shared/services/CalendarService/RSSCalendarService/RSSCalendarService.ts(28,15): error TS2322: Type '{ title: string; start: Date; end: Date; url: string; allDay: false; description: string; locatio...' is not assignable to type 'ICalendarEvent'. [08:48:20] [tsc] Property 'approvalStatus' is missing in type '{ title: string; start: Date; end: Date; url: string; allDay: false; description: string; locatio...'.[08:48:20] Error - [tsc] src/shared/services/CalendarService/SharePointCalendarService/SharePointCalendarService.ts(56,15): error TS2322: Type '{ title: any; start: any; end: any; url: string; allDay: any; category: any; description: any; lo...' is not assignable to type 'ICalendarEvent'. [08:48:20] [tsc] Property 'approvalStatus' is missing in type '{ title: any; start: any; end: any; url: string; allDay: any; category: any; description: any; lo...'.[08:48:20] Error - [tsc] src/shared/services/CalendarService/WordPressFullCalendarService/WordPressFullCalendarService.ts(23,17): error TS2322: Type '{ title: string; start: Date; end: Date; url: string; allDay: boolean; description: undefined; ca...' is not assignable to type 'ICalendarEvent'. [08:48:20] [tsc] Property 'approvalStatus' is missing in type '{ title: string; start: Date; end: Date; url: string; allDay: boolean; description: undefined; ca...'.[08:48:20] Error - 'tsc' sub task errored after 6.23 s exited with code 2 [08:48:20] Finished subtask 'tslint' after 6.28 s

I know that I need to make changes to the iCalCalendarService.ts, MockCalendarService.ts, RSSCalendarService.ts, SharePointCalendarService.ts and WordPressFullCalendarService.ts, and add the field which I created (approvalStatus in ICalendarEvent.ts) to these files under eventItem. But even after making those changes I'm not getting the expected results..

[Fnu-Avi]

Resolved this issue.. Thanks..

[robiharid]

Resolved this issue.. Thanks..

you want to share with the world what you did