Merge pull request #2102 from mohammadamer/React-Calendar-recurrent-events-issue
This commit is contained in:
Hugo Bernier
GitHub
commit
d11821df0e
|
|
@ -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.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Compatibility
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
|
||||
|
||||
|
||||
|
||||
## 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).
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
|
|
@ -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"
|
||||
}
|
||||
],
|
||||
|
|
|
|||
|
|
@ -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(),
|
||||
|
|
|
|||
|
|
@ -150,10 +150,10 @@ export default class ModernCalendarWebPart extends BaseClientSideWebPart<IModern
|
|||
this.properties.site
|
||||
).then((response3) => {
|
||||
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<IModern
|
|||
this.properties.site
|
||||
).then((response3) => {
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -81,9 +81,11 @@ export class EventRecurrenceInfoDaily extends React.Component<IEventRecurrenceIn
|
|||
* @param {Date} date
|
||||
* @memberof EventRecurrenceInfoDaily
|
||||
*/
|
||||
private onStartDateChange(date: Date) {
|
||||
this.setState({ startDate: date });
|
||||
this.applyRecurrence();
|
||||
private onStartDateChange(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({ startDate: date }, () => {
|
||||
this.applyRecurrence();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -93,9 +95,11 @@ export class EventRecurrenceInfoDaily extends React.Component<IEventRecurrenceIn
|
|||
* @param {Date} date
|
||||
* @memberof EventRecurrenceInfoDaily
|
||||
*/
|
||||
private onEndDateChange(date: Date) {
|
||||
this.setState({ endDate: date });
|
||||
this.applyRecurrence();
|
||||
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();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -153,23 +157,39 @@ export class EventRecurrenceInfoDaily extends React.Component<IEventRecurrenceIn
|
|||
* @param {IChoiceGroupOption} option
|
||||
* @memberof EventRecurrenceInfoDaily
|
||||
*/
|
||||
private onDataRangeOptionChange(ev: React.SyntheticEvent<HTMLElement>, option: IChoiceGroupOption): void {
|
||||
private onDataRangeOptionChange(
|
||||
ev: React.SyntheticEvent<HTMLElement>,
|
||||
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<HTMLElement>, option: IChoiceGroupOption): void {
|
||||
|
||||
private onPatternChange(
|
||||
ev: React.SyntheticEvent<HTMLElement>,
|
||||
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() {
|
||||
|
|
|
|||
|
|
@ -95,9 +95,11 @@ export class EventRecurrenceInfoMonthly extends React.Component<IEventRecurrence
|
|||
* @param {Date} date
|
||||
* @memberof EventRecurrenceInfoDaily
|
||||
*/
|
||||
private onStartDateChange(date: Date) {
|
||||
this.setState({ startDate: date });
|
||||
this.applyRecurrence();
|
||||
private onStartDateChange(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({ startDate: date }, () => {
|
||||
this.applyRecurrence();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -107,9 +109,12 @@ export class EventRecurrenceInfoMonthly extends React.Component<IEventRecurrence
|
|||
* @param {Date} date
|
||||
* @memberof EventRecurrenceInfoDaily
|
||||
*/
|
||||
private onEndDateChange(date: Date) {
|
||||
this.setState({ endDate: date });
|
||||
this.applyRecurrence();
|
||||
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();
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -197,12 +202,16 @@ export class EventRecurrenceInfoMonthly extends React.Component<IEventRecurrence
|
|||
* @param {string} value
|
||||
* @memberof EventRecurrenceInfoDaily
|
||||
*/
|
||||
private onNumberOfOcurrencesChange(ev: React.SyntheticEvent<HTMLElement>, value: string) {
|
||||
private onNumberOfOcurrencesChange(
|
||||
ev: React.SyntheticEvent<HTMLElement>,
|
||||
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<IEventRecurrence
|
|||
* @param {IChoiceGroupOption} option
|
||||
* @memberof EventRecurrenceInfoDaily
|
||||
*/
|
||||
private onDataRangeOptionChange(ev: React.SyntheticEvent<HTMLElement>, option: IChoiceGroupOption): void {
|
||||
private onDataRangeOptionChange(
|
||||
ev: React.SyntheticEvent<HTMLElement>,
|
||||
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<IEventRecurrence
|
|||
* @param {IChoiceGroupOption} option
|
||||
* @memberof EventRecurrenceInfoMonthly
|
||||
*/
|
||||
private onPaternChange(ev: React.SyntheticEvent<HTMLElement>, option: IChoiceGroupOption): void {
|
||||
private onPaternChange(
|
||||
ev: React.SyntheticEvent<HTMLElement>,
|
||||
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<IEventRecurrence
|
|||
* @param {IDropdownOption} item
|
||||
* @memberof EventRecurrenceInfoMonthly
|
||||
*/
|
||||
private onWeekOrderMonthChange(ev: React.FormEvent<HTMLDivElement>, item: IDropdownOption):void {
|
||||
this.setState({selectedWeekOrderMonth: item.key.toString()});
|
||||
this.applyRecurrence();
|
||||
private onWeekOrderMonthChange(
|
||||
ev: React.FormEvent<HTMLDivElement>,
|
||||
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<IEventRecurrence
|
|||
* @param {IDropdownOption} item
|
||||
* @memberof EventRecurrenceInfoMonthly
|
||||
*/
|
||||
private onSelectedWeekDayChange(ev: React.FormEvent<HTMLDivElement>, item: IDropdownOption):void {
|
||||
this.setState({selectedWeekDay: item.key});
|
||||
this.applyRecurrence();
|
||||
}
|
||||
|
||||
public async componentDidUpdate(prevProps: IEventRecurrenceInfoMonthlyProps, prevState: IEventRecurrenceInfoMonthlyState) {
|
||||
|
||||
private onSelectedWeekDayChange(
|
||||
ev: React.FormEvent<HTMLDivElement>,
|
||||
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();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -96,9 +96,11 @@ export class EventRecurrenceInfoWeekly extends React.Component<IEventRecurrenceI
|
|||
* @param {Date} date
|
||||
* @memberof EventRecurrenceInfoDaily
|
||||
*/
|
||||
private onStartDateChange(date: Date) {
|
||||
this.setState({ startDate: date });
|
||||
this.applyRecurrence();
|
||||
private onStartDateChange(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({ startDate: date }, () => {
|
||||
this.applyRecurrence();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -108,11 +110,13 @@ export class EventRecurrenceInfoWeekly extends React.Component<IEventRecurrenceI
|
|||
* @param {Date} date
|
||||
* @memberof EventRecurrenceInfoDaily
|
||||
*/
|
||||
private onEndDateChange(date: Date) {
|
||||
this.setState({ endDate: date });
|
||||
this.applyRecurrence();
|
||||
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();
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
|
|
@ -162,24 +166,39 @@ export class EventRecurrenceInfoWeekly extends React.Component<IEventRecurrenceI
|
|||
* @param {IChoiceGroupOption} option
|
||||
* @memberof EventRecurrenceInfoDaily
|
||||
*/
|
||||
private onDataRangeOptionChange(ev: React.SyntheticEvent<HTMLElement>, option: IChoiceGroupOption): void {
|
||||
private onDataRangeOptionChange(
|
||||
ev: React.SyntheticEvent<HTMLElement>,
|
||||
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<HTMLElement>, option: IChoiceGroupOption): void {
|
||||
private onPaternChange(
|
||||
ev: React.SyntheticEvent<HTMLElement>,
|
||||
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() {
|
||||
|
|
|
|||
|
|
@ -85,29 +85,33 @@ export class EventRecurrenceInfoYearly extends React.Component<IEventRecurrenceI
|
|||
this.spService = new spservices(this.props.context);
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
*
|
||||
*
|
||||
* @private
|
||||
* @param {Date} date
|
||||
* @memberof EventRecurrenceInfoDaily
|
||||
*/
|
||||
private onStartDateChange(date: Date) {
|
||||
this.setState({ startDate: date });
|
||||
this.applyRecurrence();
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
* @private
|
||||
* @param {Date} date
|
||||
* @memberof EventRecurrenceInfoDaily
|
||||
*/
|
||||
private onEndDateChange(date: Date) {
|
||||
this.setState({ endDate: date });
|
||||
this.applyRecurrence();
|
||||
}
|
||||
private onStartDateChange(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({ startDate: date }, () => {
|
||||
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<IEventRecurrenceI
|
|||
}
|
||||
|
||||
|
||||
private onMonthChange(ev: React.SyntheticEvent<HTMLElement>, item: IDropdownOption) {
|
||||
this.setState({ selectedMonth: item.key });
|
||||
this.applyRecurrence();
|
||||
private onMonthChange(
|
||||
ev: React.SyntheticEvent<HTMLElement>,
|
||||
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<IEventRecurrenceI
|
|||
* @param {string} value
|
||||
* @memberof EventRecurrenceInfoDaily
|
||||
*/
|
||||
private onNumberOfOcurrencesChange(ev: React.SyntheticEvent<HTMLElement>, value: string) {
|
||||
private onNumberOfOcurrencesChange(
|
||||
ev: React.SyntheticEvent<HTMLElement>,
|
||||
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<IEventRecurrenceI
|
|||
* @param {IChoiceGroupOption} option
|
||||
* @memberof EventRecurrenceInfoDaily
|
||||
*/
|
||||
private onDataRangeOptionChange(ev: React.SyntheticEvent<HTMLElement>, option: IChoiceGroupOption): void {
|
||||
private onDataRangeOptionChange(
|
||||
ev: React.SyntheticEvent<HTMLElement>,
|
||||
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<IEventRecurrenceI
|
|||
* @param {IChoiceGroupOption} option
|
||||
* @memberof EventRecurrenceInfoYearly
|
||||
*/
|
||||
private onPaternChange(ev: React.SyntheticEvent<HTMLElement>, option: IChoiceGroupOption): void {
|
||||
private onPaternChange(
|
||||
ev: React.SyntheticEvent<HTMLElement>,
|
||||
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<IEventRecurrenceI
|
|||
* @param {IDropdownOption} item
|
||||
* @memberof EventRecurrenceInfoYearly
|
||||
*/
|
||||
private onWeekOrderMonthChange(ev: React.FormEvent<HTMLDivElement>, item: IDropdownOption): void {
|
||||
this.setState({ selectedWeekOrderMonth: item.key.toString() });
|
||||
this.applyRecurrence();
|
||||
private onWeekOrderMonthChange(
|
||||
ev: React.FormEvent<HTMLDivElement>,
|
||||
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<IEventRecurrenceI
|
|||
* @param {IDropdownOption} item
|
||||
* @memberof EventRecurrenceInfoYearly
|
||||
*/
|
||||
private onYearlyByDayMonthChange(ev: React.FormEvent<HTMLDivElement>, item: IDropdownOption): void {
|
||||
this.setState({ selectedYearlyByDayMonth: item.key });
|
||||
this.applyRecurrence();
|
||||
private onYearlyByDayMonthChange(
|
||||
ev: React.FormEvent<HTMLDivElement>,
|
||||
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<IEventRecurrenceI
|
|||
* @param {IDropdownOption} item
|
||||
* @memberof EventRecurrenceInfoYearly
|
||||
*/
|
||||
private onSelectedWeekDayChange(ev: React.FormEvent<HTMLDivElement>, item: IDropdownOption): void {
|
||||
this.setState({ selectedWeekDay: item.key.toString() });
|
||||
this.applyRecurrence();
|
||||
private onSelectedWeekDayChange(
|
||||
ev: React.FormEvent<HTMLDivElement>,
|
||||
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) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue