honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Added all day event functionality

This commit is contained in:
Nanddeep Nachan 2020-10-18 18:18:45 +00:00
parent 8d039e70df
commit c218ef534b
7 changed files with 286 additions and 260 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
samples/react-calendar/src/controls/Event/IEventState.ts
View File

@ -1,33 +1,34 @@
import { IEventData } from '../../services/IEventData';
import { IUserPermissions } from '../../services/IUserPermissions';
import { DayOfWeek} from 'office-ui-fabric-react/lib/DatePicker';
import { IDropdownOption } from 'office-ui-fabric-react/';
import { DayOfWeek } from 'office-ui-fabric-react/lib/DatePicker';
import { IDropdownOption } from 'office-ui-fabric-react/';
export interface IEventState {
showPanel: boolean;
eventData:IEventData;
eventData: IEventData;
firstDayOfWeek?: DayOfWeek;
startSelectedHour: IDropdownOption ;
startSelectedMin: IDropdownOption ;
endSelectedHour: IDropdownOption ;
endSelectedMin: IDropdownOption ;
startSelectedHour: IDropdownOption;
startSelectedMin: IDropdownOption;
endSelectedHour: IDropdownOption;
endSelectedMin: IDropdownOption;
startDate?: Date;
endDate?: Date;
editorState?: any;
selectedUsers: string[];
locationLatitude: number;
locationLongitude: number;
errorMessage?:string;
hasError?:boolean;
errorMessage?: string;
hasError?: boolean;
disableButton?: boolean;
isSaving?:boolean;
isDeleting?:boolean;
displayDialog:boolean;
isSaving?: boolean;
isDeleting?: boolean;
displayDialog: boolean;
userPermissions?: IUserPermissions;
isloading:boolean;
isloading: boolean;
isAllDayEvent: boolean;
siteRegionalSettings: any;
recurrenceSeriesEdited?:boolean;
showRecurrenceSeriesInfo:boolean;
newRecurrenceEvent:boolean;
recurrenceAction:string;
recurrenceDescription?:string;
recurrenceSeriesEdited?: boolean;
showRecurrenceSeriesInfo: boolean;
newRecurrenceEvent: boolean;
recurrenceAction: string;
recurrenceDescription?: string;
}

443
samples/react-calendar/src/controls/Event/event.tsx
View File

@ -79,7 +79,6 @@ export class Event extends React.Component<IEventProps, IEventState> {
navigator.geolocation.getCurrentPosition((position) => {
this.latitude = position.coords.latitude;
this.longitude = position.coords.longitude;
});
} else {
/* geolocation IS NOT available */
@ -104,10 +103,11 @@ export class Event extends React.Component<IEventProps, IEventState> {
isSaving: false,
displayDialog: false,
isloading: false,
isAllDayEvent: this.props.event && this.props.event.fAllDayEvent,
siteRegionalSettings: undefined,
recurrenceSeriesEdited: false,
showRecurrenceSeriesInfo:false,
newRecurrenceEvent:false,
showRecurrenceSeriesInfo: false,
newRecurrenceEvent: false,
recurrenceAction: 'display',
userPermissions: { hasPermissionAdd: false, hasPermissionDelete: false, hasPermissionEdit: false, hasPermissionView: false },
};
@ -148,13 +148,15 @@ export class Event extends React.Component<IEventProps, IEventState> {
* @memberof Event
*/
private async onSave() {
let eventData: IEventData = this.state.eventData;
let panelMode = this.props.panelMode;
let startDate: string = null;
let endDate: string = null;
eventData.fRecurrence = false;
// set All day event
eventData.fAllDayEvent = this.state.isAllDayEvent;
// if there are new Event recurrence or Edited recurrence series
if (this.state.recurrenceSeriesEdited || this.state.newRecurrenceEvent) {
eventData.RecurrenceData = this.returnedRecurrenceInfo.recurrenceData;
@ -163,42 +165,42 @@ export class Event extends React.Component<IEventProps, IEventState> {
if (eventData.EventType == "0" && this.state.newRecurrenceEvent) {
eventData.EventType = "1";
eventData.fRecurrence= true;
eventData.UID = getGUID();
}
if (eventData.EventType == "1" && this.state.recurrenceSeriesEdited) {
eventData.fRecurrence= true;
eventData.fRecurrence = true;
eventData.UID = getGUID();
}
} else {
if (this.state.eventData.EventType == '1'){ // recurrence exception
if (eventData.EventType == "1" && this.state.recurrenceSeriesEdited) {
eventData.fRecurrence = true;
eventData.UID = getGUID();
}
}
else {
if (this.state.eventData.EventType == '1') { // recurrence exception
eventData.RecurrenceID = eventData.EventDate.toString();
eventData.MasterSeriesItemID = eventData.ID.toString();
eventData.EventType = "4";
eventData.fRecurrence = true;
eventData.UID = getGUID();
panelMode = IPanelModelEnum.add;
eventData.RecurrenceData = await this.returnExceptionRecurrenceInfo(eventData.RecurrenceData);
eventData.RecurrenceData = await this.returnExceptionRecurrenceInfo(eventData.RecurrenceData);
}
startDate = `${moment(this.state.startDate).format('YYYY/MM/DD')}`;
endDate = `${moment(this.state.endDate).format('YYYY/MM/DD')}`;
}
// Start Date
const startTime = `${this.state.startSelectedHour.key}:${this.state.startSelectedMin.key}`;
const startDateTime = `${startDate} ${startTime}`;
const start = moment(startDateTime, 'YYYY/MM/DD HH:mm').toLocaleString();
eventData.EventDate = new Date(start);
// End Date
const endTime = `${this.state.endSelectedHour.key}:${this.state.endSelectedMin.key}`;
const endDateTime = `${endDate} ${endTime}`;
const end = moment(endDateTime, 'YYYY/MM/DD HH:mm').toLocaleString();
eventData.EndDate = new Date(end);
// get Geolocation
eventData.geolocation = { Latitude: this.latitude, Longitude: this.longitude };
const locationInfo = await this.spService.getGeoLactionName(this.latitude, this.longitude);
eventData.location = locationInfo ? locationInfo.display_name : 'N/A';
@ -213,7 +215,6 @@ export class Event extends React.Component<IEventProps, IEventState> {
try {
for (const user of this.attendees) {
const userInfo: any = await this.spService.getUserByLoginName(user.id, this.props.siteUrl);
eventData.attendes.push(Number(userInfo.Id));
}
@ -255,7 +256,7 @@ export class Event extends React.Component<IEventProps, IEventState> {
* @param {number} [eventId]
* @memberof Event
*/
private async renderEventData(eventId?: number) {
private async renderEventData(eventId?: number) {
this.setState({ isloading: true });
const event: IEventData = !eventId ? this.props.event : await this.spService.getEvent(this.props.siteUrl, this.props.listId, eventId);
@ -479,7 +480,7 @@ export class Event extends React.Component<IEventProps, IEventState> {
this.setState({ isDeleting: false });
this.props.onDissmissPanel(true);
} catch (error) {
this.setState({ hasError: true, errorMessage: error.message, isDeleting: false, displayDialog:false });
this.setState({ hasError: true, errorMessage: error.message, isDeleting: false, displayDialog: false });
}
}
@ -580,7 +581,7 @@ export class Event extends React.Component<IEventProps, IEventState> {
private parseDailyRule(rule): string {
const keys = Object.keys(rule);
if (keys.indexOf("weekday") !== -1 && rule["weekday"] === "TRUE")
return format("{} {}", format(strings.everyFormat, 1), strings.weekDayLabel);
return format("{} {}", format(strings.everyFormat, 1), strings.weekDayLabel);
if (keys.indexOf("dayFrequency") !== -1) {
const dayFrequency: number = parseInt(rule["dayFrequency"]);
@ -609,16 +610,16 @@ export class Event extends React.Component<IEventProps, IEventState> {
"fr": strings.Friday,
"sa": strings.Saturday,
"su": strings.Sunday
};
};
let days: string[] = [];
for (let key of keys) {
days.push(dayMap[key]);
}
return format("{}{} {} {}",
frequency === 1 ? format(strings.everyFormat, frequency) : frequency === 2 ? format(strings.everySecondFormat, frequency): format(strings.everyNthFormat, frequency),
strings.weekLabel,
strings.onLabel,
return format("{}{} {} {}",
frequency === 1 ? format(strings.everyFormat, frequency) : frequency === 2 ? format(strings.everySecondFormat, frequency) : format(strings.everyNthFormat, frequency),
strings.weekLabel,
strings.onLabel,
days.join(", "));
}
@ -634,7 +635,7 @@ export class Event extends React.Component<IEventProps, IEventState> {
const day: number = parseInt(rule["day"]);
return format("{}{} {}",
frequency === 1 ? format(strings.everyFormat, frequency) : frequency === 2 ? format(strings.everySecondFormat, frequency): format(strings.everyNthFormat, frequency),
frequency === 1 ? format(strings.everyFormat, frequency) : frequency === 2 ? format(strings.everySecondFormat, frequency) : format(strings.everyNthFormat, frequency),
strings.monthLabel,
format(strings.onTheDayFormat, day)
);
@ -649,17 +650,17 @@ export class Event extends React.Component<IEventProps, IEventState> {
private parseMonthlyByDayRule(rule): string {
let keys: string[] = Object.keys(rule);
const dayTypeMap: any = {
"day": strings.weekDayLabel,
"weekend_day": strings.weekEndDay,
"mo": strings.Monday,
"tu": strings.Tuesday,
"we": strings.Wednesday,
"th": strings.Thursday,
"fr": strings.Friday,
"sa": strings.Saturday,
"day": strings.weekDayLabel,
"weekend_day": strings.weekEndDay,
"mo": strings.Monday,
"tu": strings.Tuesday,
"we": strings.Wednesday,
"th": strings.Thursday,
"fr": strings.Friday,
"sa": strings.Saturday,
"su": strings.Sunday
};
const orderType: any = {
"first": strings.firstLabel,
"second": strings.secondLabel,
@ -671,22 +672,22 @@ export class Event extends React.Component<IEventProps, IEventState> {
let order: string;
let dayType: string;
let frequencyFormat: string;
for (let key of keys) {
switch (key) {
case "monthFrequency":
const frequency = parseInt(rule[key]);
switch(frequency) {
case 1:
switch (frequency) {
case 1:
frequencyFormat = format(strings.everyFormat, frequency);
break;
case 2:
case 2:
frequencyFormat = format(strings.everySecondFormat, frequency);
break;
default:
frequencyFormat = format(strings.everyNthFormat, frequency);
break;
}
}
break;
case "weekDayOfMonth":
order = orderType[rule[key]];
@ -697,10 +698,10 @@ export class Event extends React.Component<IEventProps, IEventState> {
}
}
return format("{} {} {} {} {}{}",
frequencyFormat,
strings.monthLabel.toLowerCase(),
strings.onTheLabel,
return format("{} {} {} {} {}{}",
frequencyFormat,
strings.monthLabel.toLowerCase(),
strings.onTheLabel,
order,
dayType,
strings.theSuffix);
@ -719,12 +720,12 @@ export class Event extends React.Component<IEventProps, IEventState> {
let month: string;
let day: string;
for (let key of keys) {
switch(key) {
switch (key) {
case "yearFrequency":
const frequency = parseInt(rule[key]);
const frequencyFormat = frequency == 1 ? strings.everyFormat : frequency == 2 ? strings.everySecondFormat : strings.everyNthFormat;
frequencyString = format(frequencyFormat, frequency);
break;
break;
case "month":
month = months[parseInt(rule[key]) - 1];
break;
@ -755,14 +756,14 @@ export class Event extends React.Component<IEventProps, IEventState> {
"last": strings.lastLabel
};
const dayTypeMap: any = {
"day": strings.weekDayLabel,
"weekend_day": strings.weekEndDay,
"mo": strings.Monday,
"tu": strings.Tuesday,
"we": strings.Wednesday,
"th": strings.Thursday,
"fr": strings.Friday,
"sa": strings.Saturday,
"day": strings.weekDayLabel,
"weekend_day": strings.weekEndDay,
"mo": strings.Monday,
"tu": strings.Tuesday,
"we": strings.Wednesday,
"th": strings.Thursday,
"fr": strings.Friday,
"sa": strings.Saturday,
"su": strings.Sunday
};
let frequencyString: string;
@ -770,7 +771,7 @@ export class Event extends React.Component<IEventProps, IEventState> {
let order: string;
let dayTypeString: string;
for (let key of keys) {
switch(key) {
switch (key) {
case "yearFrequency":
const frequency = parseInt(rule[key]);
const frequencyFormat = frequency === 1 ? strings.everyFormat : frequency === 2 ? strings.everySecondFormat : strings.everyNthFormat;
@ -779,7 +780,7 @@ export class Event extends React.Component<IEventProps, IEventState> {
case "weekDayOfMonth":
order = orderMap[rule[key]];
break;
case "month":
case "month":
month = months[parseInt(rule[key]) - 1];
break;
default:
@ -787,7 +788,7 @@ export class Event extends React.Component<IEventProps, IEventState> {
break;
}
return format("{} {} {}",
return format("{} {} {}",
frequencyString,
strings.yearLabel,
format(strings.onTheDayTypeFormat, order, dayTypeString.toLowerCase(), strings.theSuffix)
@ -812,39 +813,38 @@ export class Event extends React.Component<IEventProps, IEventState> {
resolve(result);
});
});
const recurrenceInfo: any = await promise;
if(recurrenceInfo != null)
{
let keys = Object.keys(recurrenceInfo.recurrence.rule[0].repeat[0]);
const recurrenceTypes = ["daily", "weekly", "monthly", "monthlyByDay", "yearly", "yearlyByDay"];
for (var key of keys) {
const rule = recurrenceInfo.recurrence.rule[0].repeat[0][key][0]['$'];
switch(recurrenceTypes.indexOf(key)) {
case 0:
return this.parseDailyRule(rule);
break;
case 1:
return this.parseWeeklyRule(rule);
break;
case 2:
return this.parseMonthlyRule(rule);
break;
case 3:
return this.parseMonthlyByDayRule(rule);
break;
case 4:
return this.parseYearlyRule(rule);
break;
case 5:
return this.parseYearlyByDayRule(rule);
break;
default:
continue;
if (recurrenceInfo != null) {
let keys = Object.keys(recurrenceInfo.recurrence.rule[0].repeat[0]);
const recurrenceTypes = ["daily", "weekly", "monthly", "monthlyByDay", "yearly", "yearlyByDay"];
for (var key of keys) {
const rule = recurrenceInfo.recurrence.rule[0].repeat[0][key][0]['$'];
switch (recurrenceTypes.indexOf(key)) {
case 0:
return this.parseDailyRule(rule);
break;
case 1:
return this.parseWeeklyRule(rule);
break;
case 2:
return this.parseMonthlyRule(rule);
break;
case 3:
return this.parseMonthlyByDayRule(rule);
break;
case 4:
return this.parseYearlyRule(rule);
break;
case 5:
return this.parseYearlyByDayRule(rule);
break;
default:
continue;
}
}
}
}
}
/**
@ -898,17 +898,17 @@ export class Event extends React.Component<IEventProps, IEventState> {
<div>
{
(this.state.eventData && (this.state.eventData.EventType !== "0" && this.state.showRecurrenceSeriesInfo !== true)) ?
<div>
<h2 style={{ display: 'inline-block', verticalAlign: 'top' }}>{ strings.recurrenceEventLabel }</h2>
{ this.state.recurrenceDescription ? <span style={{ display: 'block' }} >{ this.state.recurrenceDescription }</span> : null }
<div>
<h2 style={{ display: 'inline-block', verticalAlign: 'top' }}>{strings.recurrenceEventLabel}</h2>
{this.state.recurrenceDescription ? <span style={{ display: 'block' }} >{this.state.recurrenceDescription}</span> : null}
<DefaultButton
style={{ display: 'inline-block', marginLeft: '330px', verticalAlign: 'top', width: 'auto' }}
iconProps={{ iconName: 'RecurringEvent' }}
allowDisabledFocus={true}
onClick={this.onEditRecurrence}
>
{ strings.editRecurrenceSeries }
</DefaultButton>
{strings.editRecurrenceSeries}
</DefaultButton>
</div>
: ''
@ -948,62 +948,66 @@ export class Event extends React.Component<IEventProps, IEventState> {
hidden={this.state.showRecurrenceSeriesInfo}
/>
</div>
<div style={{ display: 'inline-block', verticalAlign: 'top', paddingRight: 10 }}>
<Dropdown
selectedKey={this.state.startSelectedHour.key}
onChange={this.onStartChangeHour}
label={strings.StartHourLabel}
disabled={this.state.userPermissions.hasPermissionAdd || this.state.userPermissions.hasPermissionEdit ? false : true}
options={[
{ key: '00', text: '00' },
{ key: '01', text: '01' },
{ key: '02', text: '02' },
{ key: '03', text: '03' },
{ key: '04', text: '04' },
{ key: '05', text: '05' },
{ key: '06', text: '06' },
{ key: '07', text: '07' },
{ key: '08', text: '08' },
{ key: '09', text: '09' },
{ key: '10', text: '10' },
{ key: '11', text: '11' },
{ key: '12', text: '12' },
{ key: '13', text: '13' },
{ key: '14', text: '14' },
{ key: '15', text: '15' },
{ key: '16', text: '16' },
{ key: '17', text: '17' },
{ key: '18', text: '18' },
{ key: '19', text: '19' },
{ key: '20', text: '20' },
{ key: '21', text: '21' },
{ key: '22', text: '22' },
{ key: '23', text: '23' }
]}
/>
</div>
<div style={{ display: 'inline-block', verticalAlign: 'top', }}>
<Dropdown
label={strings.StartMinLabel}
selectedKey={this.state.startSelectedMin.key}
onChange={this.onStartChangeMin}
disabled={this.state.userPermissions.hasPermissionAdd || this.state.userPermissions.hasPermissionEdit ? false : true}
options={[
{ key: '00', text: '00' },
{ key: '05', text: '05' },
{ key: '10', text: '10' },
{ key: '15', text: '15' },
{ key: '20', text: '20' },
{ key: '25', text: '25' },
{ key: '30', text: '30' },
{ key: '35', text: '35' },
{ key: '40', text: '40' },
{ key: '45', text: '45' },
{ key: '50', text: '50' },
{ key: '55', text: '55' }
]}
/>
</div>
{!this.state.isAllDayEvent &&
<div style={{ display: 'inline-block', verticalAlign: 'top', paddingRight: 10 }}>
<Dropdown
selectedKey={this.state.startSelectedHour.key}
onChange={this.onStartChangeHour}
label={strings.StartHourLabel}
disabled={this.state.userPermissions.hasPermissionAdd || this.state.userPermissions.hasPermissionEdit ? false : true}
options={[
{ key: '00', text: '00' },
{ key: '01', text: '01' },
{ key: '02', text: '02' },
{ key: '03', text: '03' },
{ key: '04', text: '04' },
{ key: '05', text: '05' },
{ key: '06', text: '06' },
{ key: '07', text: '07' },
{ key: '08', text: '08' },
{ key: '09', text: '09' },
{ key: '10', text: '10' },
{ key: '11', text: '11' },
{ key: '12', text: '12' },
{ key: '13', text: '13' },
{ key: '14', text: '14' },
{ key: '15', text: '15' },
{ key: '16', text: '16' },
{ key: '17', text: '17' },
{ key: '18', text: '18' },
{ key: '19', text: '19' },
{ key: '20', text: '20' },
{ key: '21', text: '21' },
{ key: '22', text: '22' },
{ key: '23', text: '23' }
]}
/>
</div>
}
{!this.state.isAllDayEvent &&
<div style={{ display: 'inline-block', verticalAlign: 'top', }}>
<Dropdown
label={strings.StartMinLabel}
selectedKey={this.state.startSelectedMin.key}
onChange={this.onStartChangeMin}
disabled={this.state.userPermissions.hasPermissionAdd || this.state.userPermissions.hasPermissionEdit ? false : true}
options={[
{ key: '00', text: '00' },
{ key: '05', text: '05' },
{ key: '10', text: '10' },
{ key: '15', text: '15' },
{ key: '20', text: '20' },
{ key: '25', text: '25' },
{ key: '30', text: '30' },
{ key: '35', text: '35' },
{ key: '40', text: '40' },
{ key: '45', text: '45' },
{ key: '50', text: '50' },
{ key: '55', text: '55' }
]}
/>
</div>
}
<br />
<div style={{ display: 'inline-block', verticalAlign: 'top', paddingRight: 10 }}>
<DatePicker
@ -1020,75 +1024,94 @@ export class Event extends React.Component<IEventProps, IEventState> {
hidden={this.state.showRecurrenceSeriesInfo}
/>
</div>
<div style={{ display: 'inline-block', verticalAlign: 'top', paddingRight: 10 }}>
<Dropdown
selectedKey={this.state.endSelectedHour.key}
onChange={this.onEndChangeHour}
label={strings.EndHourLabel}
disabled={this.state.userPermissions.hasPermissionAdd || this.state.userPermissions.hasPermissionEdit ? false : true}
options={[
{ key: '00', text: '00' },
{ key: '01', text: '01' },
{ key: '02', text: '02' },
{ key: '03', text: '03' },
{ key: '04', text: '04' },
{ key: '05', text: '05' },
{ key: '06', text: '06' },
{ key: '07', text: '07' },
{ key: '08', text: '08' },
{ key: '09', text: '09' },
{ key: '10', text: '10' },
{ key: '11', text: '11' },
{ key: '12', text: '12' },
{ key: '13', text: '13' },
{ key: '14', text: '14' },
{ key: '15', text: '15' },
{ key: '16', text: '16' },
{ key: '17', text: '17' },
{ key: '18', text: '18' },
{ key: '19', text: '19' },
{ key: '20', text: '20' },
{ key: '21', text: '21' },
{ key: '22', text: '22' },
{ key: '23', text: '23' }
]}
/>
</div>
<div style={{ display: 'inline-block', verticalAlign: 'top', }}>
<Dropdown
label={strings.EndMinLabel}
selectedKey={this.state.endSelectedMin.key}
onChange={this.onEndChangeMin}
disabled={this.state.userPermissions.hasPermissionAdd || this.state.userPermissions.hasPermissionEdit ? false : true}
options={[
{ key: '00', text: '00' },
{ key: '05', text: '05' },
{ key: '10', text: '10' },
{ key: '15', text: '15' },
{ key: '20', text: '20' },
{ key: '25', text: '25' },
{ key: '30', text: '30' },
{ key: '35', text: '35' },
{ key: '40', text: '40' },
{ key: '45', text: '45' },
{ key: '50', text: '50' },
{ key: '55', text: '55' },
{ key: '59', text: '59' }
]}
/>
</div>
{!this.state.isAllDayEvent &&
<div style={{ display: 'inline-block', verticalAlign: 'top', paddingRight: 10 }}>
<Dropdown
selectedKey={this.state.endSelectedHour.key}
onChange={this.onEndChangeHour}
label={strings.EndHourLabel}
disabled={this.state.userPermissions.hasPermissionAdd || this.state.userPermissions.hasPermissionEdit ? false : true}
options={[
{ key: '00', text: '00' },
{ key: '01', text: '01' },
{ key: '02', text: '02' },
{ key: '03', text: '03' },
{ key: '04', text: '04' },
{ key: '05', text: '05' },
{ key: '06', text: '06' },
{ key: '07', text: '07' },
{ key: '08', text: '08' },
{ key: '09', text: '09' },
{ key: '10', text: '10' },
{ key: '11', text: '11' },
{ key: '12', text: '12' },
{ key: '13', text: '13' },
{ key: '14', text: '14' },
{ key: '15', text: '15' },
{ key: '16', text: '16' },
{ key: '17', text: '17' },
{ key: '18', text: '18' },
{ key: '19', text: '19' },
{ key: '20', text: '20' },
{ key: '21', text: '21' },
{ key: '22', text: '22' },
{ key: '23', text: '23' }
]}
/>
</div>
}
{!this.state.isAllDayEvent &&
<div style={{ display: 'inline-block', verticalAlign: 'top', }}>
<Dropdown
label={strings.EndMinLabel}
selectedKey={this.state.endSelectedMin.key}
onChange={this.onEndChangeMin}
disabled={this.state.userPermissions.hasPermissionAdd || this.state.userPermissions.hasPermissionEdit ? false : true}
options={[
{ key: '00', text: '00' },
{ key: '05', text: '05' },
{ key: '10', text: '10' },
{ key: '15', text: '15' },
{ key: '20', text: '20' },
{ key: '25', text: '25' },
{ key: '30', text: '30' },
{ key: '35', text: '35' },
{ key: '40', text: '40' },
{ key: '45', text: '45' },
{ key: '50', text: '50' },
{ key: '55', text: '55' },
{ key: '59', text: '59' }
]}
/>
</div>
}
<Label>{this.state.siteRegionalSettings ? this.state.siteRegionalSettings.Description : ''}</Label>
<br />
{
<div style={{ display: 'inline-block', verticalAlign: 'top', width: '200px' }}>
<Toggle
defaultChecked={this.state.eventData && this.state.eventData.fAllDayEvent}
inlineLabel={true}
label={strings.allDayEventLabel}
onText={strings.onLabel}
offText={strings.offLabel}
onChange={(ev, checked: boolean) => {
ev.preventDefault();
this.setState({ isAllDayEvent: checked });
}}
/>
</div>
<br />
{
this.state.eventData && (this.state.eventData.EventType == "0") ?
<div style={{ display: 'inline-block', verticalAlign: 'top', width: '200px' }}>
<Toggle
defaultChecked={false}
inlineLabel={true}
label={ strings.ifRecurrenceLabel }
onText={ strings.onLabel }
offText={ strings.offLabel }
label={strings.ifRecurrenceLabel}
onText={strings.onLabel}
offText={strings.offLabel}
onChange={(ev, checked: boolean) => {
ev.preventDefault();
this.setState({ showRecurrenceSeriesInfo: checked, newRecurrenceEvent: checked });
@ -1109,12 +1132,11 @@ export class Event extends React.Component<IEventProps, IEventState> {
siteUrl={this.props.siteUrl}
returnRecurrenceData={this.returnRecurrenceInfo}
>
</EventRecurrenceInfo>
)
}
< Label > {strings.eventDescriptionLabel }</Label>
<Label>{strings.eventDescriptionLabel}</Label>
<div className={styles.description}>
<Editor
@ -1125,7 +1147,6 @@ export class Event extends React.Component<IEventProps, IEventState> {
</div>
<div>
<PeoplePicker
webAbsoluteUrl={this.props.siteUrl}
context={this.props.context}
titleText={strings.AttendeesLabel}

24
samples/react-calendar/src/services/IEventData.ts
View File

@ -1,25 +1,25 @@
export interface IEventData {
Id?:number;
ID?:number;
Id?: number;
ID?: number;
title: string;
Description?: any;
location?:string;
location?: string;
EventDate: Date;
EndDate: Date;
color?:string;
color?: string;
ownerInitial?: string;
ownerPhoto?:string;
ownerEmail?:string;
ownerName?:string;
ownerPhoto?: string;
ownerEmail?: string;
ownerName?: string;
fAllDayEvent?: boolean;
attendes?: number[];
geolocation?: {Longitude:number, Latitude: number};
geolocation?: { Longitude: number, Latitude: number };
Category?: string;
Duration?: number;
RecurrenceData?:string;
fRecurrence?:string | boolean;
EventType?:string;
UID?:string;
RecurrenceData?: string;
fRecurrence?: string | boolean;
EventType?: string;
UID?: string;
RecurrenceID?: string;
MasterSeriesItemID?: string;
}

39
samples/react-calendar/src/services/spservices.ts
View File

@ -76,7 +76,6 @@ export default class spservices {
let results = null;
try {
const web = new Web(siteUrl);
const siteTimeZoneHours: number = await this.getSiteTimeZoneHours(siteUrl);
results = await web.lists.getById(listId).items.add({
@ -87,7 +86,7 @@ export default class spservices {
EventDate: new Date(moment(newEvent.EventDate).add(siteTimeZoneHours, 'hours').toISOString()),
EndDate: new Date(moment(newEvent.EndDate).add(siteTimeZoneHours, 'hours').toISOString()),
Location: newEvent.location,
fAllDayEvent: false,
fAllDayEvent: newEvent.fAllDayEvent,
fRecurrence: newEvent.fRecurrence,
Category: newEvent.Category,
EventType: newEvent.EventType,
@ -96,7 +95,8 @@ export default class spservices {
MasterSeriesItemID: newEvent.MasterSeriesItemID,
RecurrenceID: newEvent.RecurrenceID ? moment(newEvent.RecurrenceID).add(siteTimeZoneHours, 'hours').toISOString() : undefined,
});
} catch (error) {
}
catch (error) {
return Promise.reject(error);
}
return results;
@ -117,13 +117,13 @@ export default class spservices {
try {
const siteTimeZoneHours: number = await this.getSiteTimeZoneHours(siteUrl);
const web = new Web(siteUrl);
//"Title","fRecurrence", "fAllDayEvent","EventDate", "EndDate", "Description","ID", "Location","Geolocation","ParticipantsPickerId"
const event = await web.lists.getById(listId).items.usingCaching().getById(eventId)
.select("RecurrenceID", "MasterSeriesItemID", "Id", "ID", "ParticipantsPickerId", "EventType", "Title", "Description", "EventDate", "EndDate", "Location", "Author/SipAddress", "Author/Title", "Geolocation", "fAllDayEvent", "fRecurrence", "RecurrenceData", "RecurrenceData", "Duration", "Category", "UID")
.expand("Author")
.get();
returnEvent = {
Id: event.ID,
ID: event.ID,
@ -139,7 +139,7 @@ export default class spservices {
color: '',
ownerName: event.Author.Title,
attendes: event.ParticipantsPickerId,
fAllDayEvent: false,
fAllDayEvent: event.fAllDayEvent,
geolocation: { Longitude: event.Geolocation ? event.Geolocation.Longitude : 0, Latitude: event.Geolocation ? event.Geolocation.Latitude : 0 },
Category: event.Category,
Duration: event.Duration,
@ -149,13 +149,13 @@ export default class spservices {
RecurrenceID: event.RecurrenceID,
MasterSeriesItemID: event.MasterSeriesItemID,
};
} catch (error) {
}
catch (error) {
return Promise.reject(error);
}
return returnEvent;
}
/**
*
* @param {IEventData} newEvent
@ -167,13 +167,12 @@ export default class spservices {
public async updateEvent(updateEvent: IEventData, siteUrl: string, listId: string) {
let results = null;
try {
// delete all recursive extentions before update recurrence event
// delete all recursive extentions before update recurrence event
if (updateEvent.EventType.toString() == "1") await this.deleteRecurrenceExceptions(updateEvent, siteUrl, listId);
const siteTimeZoneHours: number = await this.getSiteTimeZoneHours(siteUrl);
const web = new Web(siteUrl);
//"Title","fRecurrence", "fAllDayEvent","EventDate", "EndDate", "Description","ID", "Location","Geolocation","ParticipantsPickerId"
let newItem: any = {
Title: updateEvent.title,
@ -183,12 +182,13 @@ export default class spservices {
EventDate: new Date(moment(updateEvent.EventDate).add(siteTimeZoneHours, 'hours').toISOString()),
EndDate: new Date(moment(updateEvent.EndDate).add(siteTimeZoneHours, 'hours').toISOString()),
Location: updateEvent.location,
fAllDayEvent: false,
fAllDayEvent: updateEvent.fAllDayEvent,
fRecurrence: updateEvent.fRecurrence,
Category: updateEvent.Category,
RecurrenceData: updateEvent.RecurrenceData ? await this.deCodeHtmlEntities(updateEvent.RecurrenceData) : "",
EventType: updateEvent.EventType,
};
if (updateEvent.UID) {
newItem.UID = updateEvent.UID;
}
@ -197,7 +197,8 @@ export default class spservices {
}
results = await web.lists.getById(listId).items.getById(updateEvent.Id).update(newItem);
} catch (error) {
}
catch (error) {
return Promise.reject(error);
}
return results;
@ -489,6 +490,7 @@ export default class spservices {
if (results && results.Row.length > 0) {
let event: any = '';
for (event of results.Row) {
const initialsArray: string[] = event.Author[0].title.split(' ');
const initials: string = initialsArray[0].charAt(0) + initialsArray[initialsArray.length - 1].charAt(0);
@ -501,22 +503,20 @@ export default class spservices {
const CategoryColorValue: any[] = categoryColor.filter((value) => {
return value.category == event.Category;
});
const isAllDayEvent: boolean = event.fAllDayEvent === "Yes";
for (const attendee of event.ParticipantsPicker) {
attendees.push(parseInt(attendee.id));
}
events.push({
Id: event.ID,
ID: event.ID,
EventType: event.EventType,
title: await this.deCodeHtmlEntities(event.Title),
Description: event.Description,
EventDate: new Date(moment(event.EventDate).subtract((siteTimeZoneHours), 'hour').toISOString()),
EndDate: new Date(moment(event.EndDate).subtract(siteTimeZoneHours, 'hour').toISOString()),
EventDate: isAllDayEvent ? new Date(moment(event.EventDate).toISOString()) : new Date(moment(event.EventDate).subtract((siteTimeZoneHours), 'hour').toISOString()),
EndDate: isAllDayEvent ? new Date(moment(event.EndDate).toISOString()) : new Date(moment(event.EndDate).subtract(siteTimeZoneHours, 'hour').toISOString()),
location: event.Location,
ownerEmail: event.Author[0].email,
ownerPhoto: userPictureUrl ?
@ -525,7 +525,7 @@ export default class spservices {
color: CategoryColorValue.length > 0 ? CategoryColorValue[0].color : '#1a75ff', // blue default
ownerName: event.Author[0].title,
attendes: attendees,
fAllDayEvent: false,
fAllDayEvent: isAllDayEvent,
geolocation: { Longitude: parseFloat(geolocation[0]), Latitude: parseFloat(geolocation[1]) },
Category: event.Category,
Duration: event.Duration,
@ -540,6 +540,7 @@ export default class spservices {
let parseEvt: parseRecurrentEvent = new parseRecurrentEvent();
events = parseEvt.parseEvents(events, null, null);
}
// Return Data
return events;
} catch (error) {

1
samples/react-calendar/src/webparts/calendar/loc/en-us.js vendored
View File

@ -114,6 +114,7 @@ define([], function () {
showMore: "more",
recurrenceEventLabel: "Recurrence Event",
editRecurrenceSeries: "Edit Recurrence Series",
allDayEventLabel: "All Day Event ?",
ifRecurrenceLabel: "Recurrence ?",
onLabel: "On",
offLabel: "Off",

1
samples/react-calendar/src/webparts/calendar/loc/mystrings.d.ts vendored
View File

@ -114,6 +114,7 @@ declare interface ICalendarWebPartStrings {
showMore: string;
recurrenceEventLabel: string;
editRecurrenceSeries: string;
allDayEventLabel: string;
ifRecurrenceLabel: string;
onLabel: string;
offLabel: string;

1
samples/react-calendar/src/webparts/calendar/loc/sv-se.js vendored
View File

@ -114,6 +114,7 @@ define([], function () {
showMore: "mer",
recurrenceEventLabel: "Återkommande händelse",
editRecurrenceSeries: "Redigera serie",
allDayEventLabel: "All Day Event ?",
ifRecurrenceLabel: "Återkommande ?",
onLabel: "På",
offLabel: "Av",