diff --git a/samples/js-modern-calendar/README.md b/samples/js-modern-calendar/README.md index 9f56a8a7c..3c5598045 100644 --- a/samples/js-modern-calendar/README.md +++ b/samples/js-modern-calendar/README.md @@ -17,19 +17,19 @@ extensions: This is a modern web part built on the GA version of the [SharePoint Framework](https://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview) demonstrating how to build a custom web part with a calendar capabilities in it. -![SS1](https://cloud.githubusercontent.com/assets/13068139/23584809/14c4333e-0121-11e7-9bf1-3117651222d3.png) -![SS2](https://cloud.githubusercontent.com/assets/13068139/23584808/14c3ec26-0121-11e7-8be8-65fbcca32b62.png) -![SS3](https://cloud.githubusercontent.com/assets/13068139/23584807/14b88f34-0121-11e7-8c91-56ecff9343e1.png) - +![SS1](./assets/14c4333e-0121-11e7-9bf1-3117651222d3.png) +![SS2](./assets/14c3ec26-0121-11e7-8be8-65fbcca32b62.png) +![SS3](./assets/14b88f34-0121-11e7-8c91-56ecff9343e1.png) ## Compatibility ![SPFx 1.11](https://img.shields.io/badge/SPFx-1.11.0-green.svg) ![Node.js v10](https://img.shields.io/badge/Node.js-v10-green.svg) -![SharePoint Online](https://img.shields.io/badge/SharePoint-Online-yellow.svg) -![Teams N/A: Untested with Microsoft Teams](https://img.shields.io/badge/Teams-N%2FA-lightgrey.svg "Untested with Microsoft Teams") -![Workbench Hosted: Does not work with local workbench](https://img.shields.io/badge/Workbench-Hosted-yellow.svg "Does not work with local workbench") - +![Compatible with SharePoint Online](https://img.shields.io/badge/SharePoint%20Online-Compatible-green.svg) +![Does not work with SharePoint 2019](https://img.shields.io/badge/SharePoint%20Server%202019-Incompatible-red.svg "SharePoint Server 2019 requires SPFx 1.4.1 or lower") +![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") +![Local Workbench Incompatible](https://img.shields.io/badge/Local%20Workbench-Incompatible-red.svg "The solution requires access to a calendar list hosted in SharePoint") +![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) ## Applies to @@ -44,10 +44,10 @@ None Solution|Author(s) --------|--------- -js-modern-calendar | Jeremy Coleman (MCP, PC Professional, Inc.) -js-modern-calendar | Nanddeep Nachan ([@NanddeepNachan](twitter.com/NanddeepNachan)) -js-modern-calendar | Ravi Chandra ([Ravikadri](https://github.com/Ravikadri)) -js-modern-calendar | Peter Paul Kirschner ([@petkir_at](https://twitter.com/petkir_at)) +js-modern-calendar | [Jeremy Coleman](https://github.com/jcoleman-pcprofessional) (MCP, PC Professional, Inc.) +js-modern-calendar | [Nanddeep Nachan](https://github.com/nanddeepn) ([@NanddeepNachan](twitter.com/NanddeepNachan)) +js-modern-calendar | [Ravi Chandra](https://github.com/Ravikadri) +js-modern-calendar | [Peter Paul Kirschner](https://github.com/petkir) ([@petkir_at](https://twitter.com/petkir_at)) ## Version history @@ -58,12 +58,6 @@ Version|Date|Comments 1.0.2.0|February 9, 2021|Upgraded to SPFx 1.11 and fixed issues with missing dependencies 1.0.3.0|October 28, 2021|fixed issues with Timezones. The Browser Timezone Settings are now used -## Disclaimer - -**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** - ---- - ## Minimal Path to Awesome - Clone this repository @@ -82,4 +76,26 @@ Version|Date|Comments ## Features Renders a calendar from any list available on the selected site. Site, List, Start, End, Event Title,Event Details and Calendar Theme are user-definable in the web part properties, so that you could technically use a custom list as the source for calendar presentation. + +## Disclaimer + +**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** + +## Help + +We do not support samples, but we this community is always willing to help, and we want to improve these samples. We use GitHub to track issues, which makes it easy for community members to volunteer their time and help resolve issues. + +If you're having issues building the solution, please run [spfx doctor](https://pnp.github.io/cli-microsoft365/cmd/spfx/spfx-doctor/) from within the solution folder to diagnose incompatibility issues with your environment. + +You can try looking at [issues related to this sample](https://github.com/pnp/sp-dev-fx-webparts/issues?q=label%3Ajs-modern-calendar) to see if anybody else is having the same issues. + +You can also try looking at [discussions related to this sample](https://github.com/pnp/sp-dev-fx-webparts/discussions?discussions_q=label%3Ajs-modern-calendar) and see what the community is saying. + +If you encounter any issues while using this sample, [create a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=bug-report.yml&sample=js-modern-calendar&authors=@jcoleman-pcprofessional%20@nanddeepn%20@Ravikadri%20@petkir&title=js-modern-calendar%20-%20). + +For questions regarding this sample, [create a new question](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=question.yml&sample=js-modern-calendar&authors=@jcoleman-pcprofessional%20@nanddeepn%20@Ravikadri%20@petkir&title=js-modern-calendar%20-%20). + +Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=suggestion.yml&sample=js-modern-calendar&authors=@jcoleman-pcprofessional%20@nanddeepn%20@Ravikadri%20@petkir&title=js-modern-calendar%20-%20). + + ![](https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/js-modern-calendar) diff --git a/samples/js-modern-calendar/assets/14b88f34-0121-11e7-8c91-56ecff9343e1.png b/samples/js-modern-calendar/assets/14b88f34-0121-11e7-8c91-56ecff9343e1.png new file mode 100644 index 000000000..1a6919624 Binary files /dev/null and b/samples/js-modern-calendar/assets/14b88f34-0121-11e7-8c91-56ecff9343e1.png differ diff --git a/samples/js-modern-calendar/assets/14c3ec26-0121-11e7-8be8-65fbcca32b62.png b/samples/js-modern-calendar/assets/14c3ec26-0121-11e7-8be8-65fbcca32b62.png new file mode 100644 index 000000000..930c6c76f Binary files /dev/null and b/samples/js-modern-calendar/assets/14c3ec26-0121-11e7-8be8-65fbcca32b62.png differ diff --git a/samples/js-modern-calendar/assets/14c4333e-0121-11e7-9bf1-3117651222d3.png b/samples/js-modern-calendar/assets/14c4333e-0121-11e7-9bf1-3117651222d3.png new file mode 100644 index 000000000..0c594273d Binary files /dev/null and b/samples/js-modern-calendar/assets/14c4333e-0121-11e7-9bf1-3117651222d3.png differ diff --git a/samples/js-modern-calendar/assets/sample.json b/samples/js-modern-calendar/assets/sample.json index 05304f268..e86ed49e6 100644 --- a/samples/js-modern-calendar/assets/sample.json +++ b/samples/js-modern-calendar/assets/sample.json @@ -9,7 +9,7 @@ "This is a modern web part built on the GA version of the SharePoint Framework demonstrating how to build a custom web part with a calendar capabilities in it." ], "creationDateTime": "2020-06-05", - "updateDateTime": "2020-06-05", + "updateDateTime": "2021-10-28", "products": [ "SharePoint", "Office" @@ -28,7 +28,18 @@ { "type": "image", "order": 100, - "url": "https://cloud.githubusercontent.com/assets/13068139/23584808/14c3ec26-0121-11e7-8be8-65fbcca32b62.png", + "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/assets/14b88f34-0121-11e7-8c91-56ecff9343e1.png", + "alt": "Modern Calendar" + }, + { + "type": "image", + "order": 102, + "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/assets/14c3ec26-0121-11e7-8be8-65fbcca32b62.png", + "alt": "Modern Calendar" + },{ + "type": "image", + "order": 103, + "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/assets/14c4333e-0121-11e7-9bf1-3117651222d3.png", "alt": "Modern Calendar" } ], diff --git a/samples/js-modern-calendar/src/webparts/modernCalendar/CalendarTemplate.ts b/samples/js-modern-calendar/src/webparts/modernCalendar/CalendarTemplate.ts index 50cb60247..a546de069 100644 --- a/samples/js-modern-calendar/src/webparts/modernCalendar/CalendarTemplate.ts +++ b/samples/js-modern-calendar/src/webparts/modernCalendar/CalendarTemplate.ts @@ -65,7 +65,7 @@ export default class CalendarTemplate { public static theme(): IPropertyPaneDropdownOption[] { var themes: IPropertyPaneDropdownOption[] = []; - CalendarTemplate.themeNames.forEach(function (name, index) { + CalendarTemplate.themeNames.forEach((name, index)=> { themes.push({ key: CalendarTemplate.themeBase + name + "/jquery-ui.min.css", text: name.toLocaleUpperCase(), diff --git a/samples/js-modern-calendar/src/webparts/modernCalendar/ModernCalendarWebPart.ts b/samples/js-modern-calendar/src/webparts/modernCalendar/ModernCalendarWebPart.ts index f57cb59af..5efa55417 100644 --- a/samples/js-modern-calendar/src/webparts/modernCalendar/ModernCalendarWebPart.ts +++ b/samples/js-modern-calendar/src/webparts/modernCalendar/ModernCalendarWebPart.ts @@ -150,10 +150,10 @@ export default class ModernCalendarWebPart extends BaseClientSideWebPart { var col: IPropertyPaneDropdownOption[] = []; - for (var _key in response3.value) { + for (var _innerKey in response3.value) { col.push({ - key: response3.value[_key]["InternalName"], - text: response3.value[_key]["Title"], + key: response3.value[_innerKey]["InternalName"], + text: response3.value[_innerKey]["Title"], }); } this._columnOptions = col; @@ -453,10 +453,10 @@ export default class ModernCalendarWebPart extends BaseClientSideWebPart { var col: IPropertyPaneDropdownOption[] = []; - for (var _key in response3.value) { + for (var _innerKey in response3.value) { col.push({ - key: response3.value[_key]["InternalName"], - text: response3.value[_key]["Title"], + key: response3.value[_innerKey]["InternalName"], + text: response3.value[_innerKey]["Title"], }); } this._columnOptions = col; diff --git a/samples/react-calendar/src/controls/EventRecurrenceInfoDaily/EventRecurrenceInfoDaily.tsx b/samples/react-calendar/src/controls/EventRecurrenceInfoDaily/EventRecurrenceInfoDaily.tsx index a6a51b21b..ce2dd5ea3 100644 --- a/samples/react-calendar/src/controls/EventRecurrenceInfoDaily/EventRecurrenceInfoDaily.tsx +++ b/samples/react-calendar/src/controls/EventRecurrenceInfoDaily/EventRecurrenceInfoDaily.tsx @@ -81,9 +81,11 @@ export class EventRecurrenceInfoDaily extends React.Component { + this.applyRecurrence(); + }); } /** @@ -93,9 +95,11 @@ export class EventRecurrenceInfoDaily extends React.Component { + this.applyRecurrence(); + }); } /** @@ -153,23 +157,39 @@ export class EventRecurrenceInfoDaily extends React.Component, option: IChoiceGroupOption): void { + private onDataRangeOptionChange( + ev: React.SyntheticEvent, + option: IChoiceGroupOption + ): void { ev.preventDefault(); - - this.setState({ - selectdateRangeOption: option.key, - disableNumberOcurrences: option.key == 'endAfter' ? false : true, - disableEndDate: option.key == 'endDate' ? false : true, - }); - this.applyRecurrence(); + //Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete. + this.setState( + { + selectdateRangeOption: option.key, + disableNumberOcurrences: option.key == "endAfter" ? false : true, + disableEndDate: option.key == "endDate" ? false : true, + }, + () => { + this.applyRecurrence(); + } + ); } - private onPatternChange(ev: React.SyntheticEvent, option: IChoiceGroupOption): void { + + private onPatternChange( + ev: React.SyntheticEvent, + option: IChoiceGroupOption + ): void { ev.preventDefault(); - this.setState({ - selectPatern: option.key, - disableNumberOfDays: option.key == 'every' ? false : true, - }); - this.applyRecurrence(); + //Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete. + this.setState( + { + selectPatern: option.key, + disableNumberOfDays: option.key == "every" ? false : true, + }, + () => { + this.applyRecurrence(); + } + ); } public async componentWillMount() { diff --git a/samples/react-calendar/src/controls/EventRecurrenceInfoMonthly/EventRecurrenceInfoMonthly.tsx b/samples/react-calendar/src/controls/EventRecurrenceInfoMonthly/EventRecurrenceInfoMonthly.tsx index 0b06a0606..fafd37ad3 100644 --- a/samples/react-calendar/src/controls/EventRecurrenceInfoMonthly/EventRecurrenceInfoMonthly.tsx +++ b/samples/react-calendar/src/controls/EventRecurrenceInfoMonthly/EventRecurrenceInfoMonthly.tsx @@ -95,9 +95,11 @@ export class EventRecurrenceInfoMonthly extends React.Component { + this.applyRecurrence(); + }); } /** @@ -107,9 +109,12 @@ export class EventRecurrenceInfoMonthly extends React.Component { + this.applyRecurrence(); + } + ); } /** @@ -197,12 +202,16 @@ export class EventRecurrenceInfoMonthly extends React.Component, value: string) { + private onNumberOfOcurrencesChange( + ev: React.SyntheticEvent, + value: string + ) { ev.preventDefault(); - this.setState({ numberOcurrences: value }); - this.applyRecurrence(); + //Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete. + this.setState({ numberOcurrences: value }, () => { + this.applyRecurrence(); + }); } - /** * * @@ -211,15 +220,22 @@ export class EventRecurrenceInfoMonthly extends React.Component, option: IChoiceGroupOption): void { + private onDataRangeOptionChange( + ev: React.SyntheticEvent, + option: IChoiceGroupOption + ): void { ev.preventDefault(); - - this.setState({ - selectdateRangeOption: option.key, - disableNumberOcurrences: option.key == 'endAfter' ? false : true, - disableEndDate: option.key == 'endDate' ? false : true, - }); - this.applyRecurrence(); + //Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete. + this.setState( + { + selectdateRangeOption: option.key, + disableNumberOcurrences: option.key == "endAfter" ? false : true, + disableEndDate: option.key == "endDate" ? false : true, + }, + () => { + this.applyRecurrence(); + } + ); } /** @@ -230,15 +246,22 @@ export class EventRecurrenceInfoMonthly extends React.Component, option: IChoiceGroupOption): void { + private onPaternChange( + ev: React.SyntheticEvent, + option: IChoiceGroupOption + ): void { ev.preventDefault(); - this.setState({ - selectPatern: option.key, - disableDayOfMonth: option.key == 'monthly' ? false : true, - }); - this.applyRecurrence(); + //Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete. + this.setState( + { + selectPatern: option.key, + disableDayOfMonth: option.key == "monthly" ? false : true, + }, + () => { + this.applyRecurrence(); + } + ); } - public async componentWillMount() { await this.load(); @@ -253,11 +276,17 @@ export class EventRecurrenceInfoMonthly extends React.Component, item: IDropdownOption):void { - this.setState({selectedWeekOrderMonth: item.key.toString()}); - this.applyRecurrence(); + private onWeekOrderMonthChange( + ev: React.FormEvent, + item: IDropdownOption + ): void { + //Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete. + this.setState({ selectedWeekOrderMonth: item.key.toString() }, () => { + this.applyRecurrence(); + }); } + /** * * @@ -266,13 +295,14 @@ export class EventRecurrenceInfoMonthly extends React.Component, item: IDropdownOption):void { - this.setState({selectedWeekDay: item.key}); - this.applyRecurrence(); - } - - public async componentDidUpdate(prevProps: IEventRecurrenceInfoMonthlyProps, prevState: IEventRecurrenceInfoMonthlyState) { - + private onSelectedWeekDayChange( + ev: React.FormEvent, + item: IDropdownOption + ): void { + //Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete. + this.setState({ selectedWeekDay: item.key }, () => { + this.applyRecurrence(); + }); } /** diff --git a/samples/react-calendar/src/controls/EventRecurrenceInfoWeekly/EventRecurrenceInfoWeekly.tsx b/samples/react-calendar/src/controls/EventRecurrenceInfoWeekly/EventRecurrenceInfoWeekly.tsx index 69b4c266d..e37d349a2 100644 --- a/samples/react-calendar/src/controls/EventRecurrenceInfoWeekly/EventRecurrenceInfoWeekly.tsx +++ b/samples/react-calendar/src/controls/EventRecurrenceInfoWeekly/EventRecurrenceInfoWeekly.tsx @@ -96,9 +96,11 @@ export class EventRecurrenceInfoWeekly extends React.Component { + this.applyRecurrence(); + }); } /** @@ -108,11 +110,13 @@ export class EventRecurrenceInfoWeekly extends React.Component { + this.applyRecurrence(); + } + ); } - /** * * @@ -162,24 +166,39 @@ export class EventRecurrenceInfoWeekly extends React.Component, option: IChoiceGroupOption): void { + private onDataRangeOptionChange( + ev: React.SyntheticEvent, + option: IChoiceGroupOption + ): void { ev.preventDefault(); - - this.setState({ - selectdateRangeOption: option.key, - disableNumberOcurrences: option.key == 'endAfter' ? false : true, - disableEndDate: option.key == 'endDate' ? false : true, - }); - this.applyRecurrence(); + //Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete. + this.setState( + { + selectdateRangeOption: option.key, + disableNumberOcurrences: option.key == "endAfter" ? false : true, + disableEndDate: option.key == "endDate" ? false : true, + }, + () => { + this.applyRecurrence(); + } + ); } - private onPaternChange(ev: React.SyntheticEvent, option: IChoiceGroupOption): void { + private onPaternChange( + ev: React.SyntheticEvent, + option: IChoiceGroupOption + ): void { ev.preventDefault(); - this.setState({ - selectPatern: option.key, - disableNumberOfWeeks: option.key == 'every' ? false : true, - }); - this.applyRecurrence(); + //Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete. + this.setState( + { + selectPatern: option.key, + disableNumberOfWeeks: option.key == "every" ? false : true, + }, + () => { + this.applyRecurrence(); + } + ); } public async componentWillMount() { diff --git a/samples/react-calendar/src/controls/EventRecurrenceInfoYearly/EventRecurrenceInfoYearly.tsx b/samples/react-calendar/src/controls/EventRecurrenceInfoYearly/EventRecurrenceInfoYearly.tsx index e285a4f7e..8ee9c5888 100644 --- a/samples/react-calendar/src/controls/EventRecurrenceInfoYearly/EventRecurrenceInfoYearly.tsx +++ b/samples/react-calendar/src/controls/EventRecurrenceInfoYearly/EventRecurrenceInfoYearly.tsx @@ -85,29 +85,33 @@ export class EventRecurrenceInfoYearly extends React.Component { + this.applyRecurrence(); + }); + } + + /** + * + * + * @private + * @param {Date} date + * @memberof EventRecurrenceInfoDaily + */ + private onEndDateChange(date: Date) { + //Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete. + this.setState({ endDate: date }, () => { + this.applyRecurrence(); + }); + } /** * @@ -134,9 +138,14 @@ export class EventRecurrenceInfoYearly extends React.Component, item: IDropdownOption) { - this.setState({ selectedMonth: item.key }); - this.applyRecurrence(); + private onMonthChange( + ev: React.SyntheticEvent, + item: IDropdownOption + ) { + //Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete. + this.setState({ selectedMonth: item.key }, () => { + this.applyRecurrence(); + }); } /** @@ -147,10 +156,15 @@ export class EventRecurrenceInfoYearly extends React.Component, value: string) { + private onNumberOfOcurrencesChange( + ev: React.SyntheticEvent, + value: string + ) { ev.preventDefault(); - this.setState({ numberOcurrences: value }); - this.applyRecurrence(); + //Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete. + this.setState({ numberOcurrences: value }, () => { + this.applyRecurrence(); + }); } /** @@ -161,18 +175,24 @@ export class EventRecurrenceInfoYearly extends React.Component, option: IChoiceGroupOption): void { + private onDataRangeOptionChange( + ev: React.SyntheticEvent, + option: IChoiceGroupOption + ): void { ev.preventDefault(); - - this.setState({ - selectdateRangeOption: option.key, - disableNumberOcurrences: option.key == 'endAfter' ? false : true, - disableEndDate: option.key == 'endDate' ? false : true, - }); - this.applyRecurrence(); + //Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete. + this.setState( + { + selectdateRangeOption: option.key, + disableNumberOcurrences: option.key == "endAfter" ? false : true, + disableEndDate: option.key == "endDate" ? false : true, + }, + () => { + this.applyRecurrence(); + } + ); } - /** * * @@ -181,13 +201,21 @@ export class EventRecurrenceInfoYearly extends React.Component, option: IChoiceGroupOption): void { + private onPaternChange( + ev: React.SyntheticEvent, + option: IChoiceGroupOption + ): void { ev.preventDefault(); - this.setState({ - selectPatern: option.key, - disableDayOfMonth: option.key == 'yearly' ? false : true, - }); - this.applyRecurrence(); + //Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete. + this.setState( + { + selectPatern: option.key, + disableDayOfMonth: option.key == "yearly" ? false : true, + }, + () => { + this.applyRecurrence(); + } + ); } public async componentDidMount() { @@ -206,9 +234,14 @@ export class EventRecurrenceInfoYearly extends React.Component, item: IDropdownOption): void { - this.setState({ selectedWeekOrderMonth: item.key.toString() }); - this.applyRecurrence(); + private onWeekOrderMonthChange( + ev: React.FormEvent, + item: IDropdownOption + ): void { + //Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete. + this.setState({ selectedWeekOrderMonth: item.key.toString() }, () => { + this.applyRecurrence(); + }); } /** @@ -219,10 +252,16 @@ export class EventRecurrenceInfoYearly extends React.Component, item: IDropdownOption): void { - this.setState({ selectedYearlyByDayMonth: item.key }); - this.applyRecurrence(); + private onYearlyByDayMonthChange( + ev: React.FormEvent, + item: IDropdownOption + ): void { + //Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete. + this.setState({ selectedYearlyByDayMonth: item.key }, () => { + this.applyRecurrence(); + }); } + /** * * @@ -231,9 +270,14 @@ export class EventRecurrenceInfoYearly extends React.Component, item: IDropdownOption): void { - this.setState({ selectedWeekDay: item.key.toString() }); - this.applyRecurrence(); + private onSelectedWeekDayChange( + ev: React.FormEvent, + item: IDropdownOption + ): void { + //Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete. + this.setState({ selectedWeekDay: item.key.toString() }, () => { + this.applyRecurrence(); + }); } public async componentDidUpdate(prevProps: IEventRecurrenceInfoYearlyProps, prevState: IEventRecurrenceInfoYearlyState) {