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

React-My-Events: Fixed date issue as start and end date is rendering incorrect in event card

This commit is contained in:
chandani@mypersorg.onmicrosoft.com 2021-10-04 10:15:53 +05:30
parent 39ea25afc2
commit 59e462e81c
6 changed files with 36 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
samples/react-my-events/assets/preview.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.3 MiB

BIN
samples/react-my-events/assets/preview.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 45 KiB

6
samples/react-my-events/src/shared/components/DateBox/DateBox.tsx
View File

@ -55,9 +55,9 @@ export default class DateBox extends React.Component<IDateBoxProps, {}>{
(this.props.size === IDateBoxSize.Small ? styles.boxIsSmall : styles.boxIsMedium), this.props.className
)}
data-automation-id="multipleDayBox">
<div className={styles.date} data-automation-id="multipleDayStartDateContainer">{startEvent.format("MMM D").toUpperCase()}</div>
<hr className={styles.separator} />
<div className={styles.date} data-automation-id="multipleDayEndDateContainer">{endEvent.format("MMM D").toUpperCase()}</div>
<div className={styles.month} data-automation-id="multipleDayStartDateContainer">{startEvent.format("MMM").toUpperCase()}</div>
<div className={styles.day}
data-automation-id="singleDayDayContainer">{startEvent.format("D") + "-" + endEvent.format("D")}</div>
</div>);
}
}

8
samples/react-my-events/src/shared/components/EventCard/EventCard.tsx
View File

@ -66,8 +66,8 @@ export const EventCard = (props: IEventCardProps) => {
<div>
<DateBox
className={styles.dateBox}
startDate={start}
endDate={end}
startDate={eventDate}
endDate={endDate}
size={IDateBoxSize.Small}
themeVariant={themeVariant}
/>
@ -102,8 +102,8 @@ export const EventCard = (props: IEventCardProps) => {
<div className={styles.dateBoxContainer} style={{ height: 120, borderBottom: '1px solid rgb(237, 235, 233)' }}>
<DateBox
className={styles.dateBox}
startDate={start}
endDate={end}
startDate={eventDate}
endDate={endDate}
size={IDateBoxSize.Medium}
themeVariant={themeVariant}
/>

4
samples/react-my-events/src/shared/services/CalendarService.ts
View File

@ -26,8 +26,6 @@ export class CalendarService {
catch (err) {
Promise.reject(err);
}
}
}
}

69
samples/react-my-events/src/webparts/reactMyEvents/components/ReactMyEvents.tsx
View File

@ -47,26 +47,21 @@ export default class ReactMyEvents extends React.Component<IReactMyEventsProps,
public getStartEndDate() {
switch (this.props.dateRange) {
case DateRange.AllUpcoming:
//this.endDate = moment().add(1, "years").format('YYYY-MM-DD');
this.endDate = moment().endOf('week').day('Friday').add(1, 'years').format('YYYY-MM-DD');
break;
case DateRange.ThisWeek:
this.endDate = moment().endOf('week').day('Friday').format('YYYY-MM-DD');
//this.endDate = moment().add(1, "weeks").format('YYYY-MM-DD');
break;
case DateRange.NextTwoWeeks:
//this.endDate = moment().add(3, "weeks").format('YYYY-MM-DD');
this.endDate = moment().endOf('week').day('Friday').add(2, 'week').format('YYYY-MM-DD');
break;
case DateRange.Month:
//this.endDate = moment().add(1, "months").format('YYYY-MM-DD');
this.endDate = moment().endOf('week').day('Friday').add(1, "months").format('YYYY-MM-DD');
break;
case DateRange.Quarter:
//this.endDate = moment().add(1, "quarters").format('YYYY-MM-DD');
this.endDate = moment().endOf('week').day('Friday').add(1, "quarters").format('YYYY-MM-DD');
break;
}
}
}
public componentDidMount() {
@ -105,6 +100,33 @@ export default class ReactMyEvents extends React.Component<IReactMyEventsProps,
});
}
private _onPageUpdate = (pageNumber: number): void => {
this.setState({
currentPage: pageNumber
});
}
private _onRenderCompactItem = (item: any, _index: number): JSX.Element => {
return <div
data-is-focusable={true}
data-is-focus-item={true}
role="listitem"
aria-label={item.subject}
>
<EventCard
key={`eventCard${_index}`}
event={item}
isCompact={Layouts.compact}
layout={this.props.layout}
themeVariant={this.props.themeVariant} />
</div>;
}
private _onConfigure = () => {
this.props.context.propertyPane.open();
}
private _renderFilmstripList(): JSX.Element {
const {
events } = this.state;
@ -139,12 +161,6 @@ export default class ReactMyEvents extends React.Component<IReactMyEventsProps,
} = this.state;
const { maxEvents } = this.props;
let pagedItems: any[] = this.state.events;
const totalItems: number = pagedItems.length;
let showPages: boolean = false;
let pagedEvents: ICalendarEvent[] = events;
let usePaging: boolean = false;
@ -158,7 +174,6 @@ export default class ReactMyEvents extends React.Component<IReactMyEventsProps,
}
return (
<div className={styles.compact}>
<CompactLayout
items={pagedEvents}
@ -177,32 +192,6 @@ export default class ReactMyEvents extends React.Component<IReactMyEventsProps,
);
}
private _onPageUpdate = (pageNumber: number): void => {
this.setState({
currentPage: pageNumber
});
}
private _onRenderCompactItem = (item: any, _index: number): JSX.Element => {
return <div
data-is-focusable={true}
data-is-focus-item={true}
role="listitem"
aria-label={item.subject}
>
<EventCard
key={`eventCard${_index}`}
event={item}
isCompact={Layouts.compact}
layout={this.props.layout}
themeVariant={this.props.themeVariant} />
</div>;
}
private _onConfigure = () => {
this.props.context.propertyPane.open();
}
private _renderContent(): JSX.Element {
const isCompact = this.props.layout;
const { errorMessage, events, loading } = this.state;
@ -224,11 +213,9 @@ export default class ReactMyEvents extends React.Component<IReactMyEventsProps,
}
else if (events.length === 0) {
// we're done loading, no errors, but have no events
return (<MessageBar
messageBarType={MessageBarType.error}>{this.state.noEventsFoundMessage}</MessageBar>);
}
}
public render(): React.ReactElement<IReactMyEventsProps> {