Skip to content

Commit ed80013

Browse files
lidord-wixlidord-wix
authored
Merge pull request #1983 from wix/fix/CalendarHeader_style
Calendar header - fix day names style
2 parents abd0e4e + 0e1a768 commit ed80013

File tree

6 files changed

+152
-136
lines changed

6 files changed

+152
-136
lines changed

‎example/src/mocks/timelineEvents.ts‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
import {TimelineEventProps, CalendarUtils} from 'react-native-calendars';
2+
3+
const EVENT_COLOR = '#e6add8';
4+
const today = new Date();
5+
export const getDate = (offset = 0) => CalendarUtils.getCalendarDateString(new Date().setDate(today.getDate() + offset));
6+
7+
export const timelineEvents: TimelineEventProps[] = [
8+
{
9+
start: `${getDate(-1)} 09:20:00`,
10+
end: `${getDate(-1)} 12:00:00`,
11+
title: 'Merge Request to React Native Calendars',
12+
summary: 'Merge Timeline Calendar to React Native Calendars'
13+
},
14+
{
15+
start: `${getDate()} 01:15:00`,
16+
end: `${getDate()} 02:30:00`,
17+
title: 'Meeting A',
18+
summary: 'Summary for meeting A',
19+
color: EVENT_COLOR
20+
},
21+
{
22+
start: `${getDate()} 01:30:00`,
23+
end: `${getDate()} 02:30:00`,
24+
title: 'Meeting B',
25+
summary: 'Summary for meeting B',
26+
color: EVENT_COLOR
27+
},
28+
{
29+
start: `${getDate()} 01:45:00`,
30+
end: `${getDate()} 02:45:00`,
31+
title: 'Meeting C',
32+
summary: 'Summary for meeting C',
33+
color: EVENT_COLOR
34+
},
35+
{
36+
start: `${getDate()} 02:40:00`,
37+
end: `${getDate()} 03:10:00`,
38+
title: 'Meeting D',
39+
summary: 'Summary for meeting D',
40+
color: EVENT_COLOR
41+
},
42+
{
43+
start: `${getDate()} 02:50:00`,
44+
end: `${getDate()} 03:20:00`,
45+
title: 'Meeting E',
46+
summary: 'Summary for meeting E',
47+
color: EVENT_COLOR
48+
},
49+
{
50+
start: `${getDate()} 04:30:00`,
51+
end: `${getDate()} 05:30:00`,
52+
title: 'Meeting F',
53+
summary: 'Summary for meeting F',
54+
color: EVENT_COLOR
55+
},
56+
{
57+
start: `${getDate(1)} 00:30:00`,
58+
end: `${getDate(1)} 01:30:00`,
59+
title: 'Visit Grand Mother',
60+
summary: 'Visit Grand Mother and bring some fruits.',
61+
color: 'lightblue'
62+
},
63+
{
64+
start: `${getDate(1)} 02:30:00`,
65+
end: `${getDate(1)} 03:20:00`,
66+
title: 'Meeting with Prof. Behjet Zuhaira',
67+
summary: 'Meeting with Prof. Behjet at 130 in her office.',
68+
color: EVENT_COLOR
69+
},
70+
{
71+
start: `${getDate(1)} 04:10:00`,
72+
end: `${getDate(1)} 04:40:00`,
73+
title: 'Tea Time with Dr. Hasan',
74+
summary: 'Tea Time with Dr. Hasan, Talk about Project'
75+
},
76+
{
77+
start: `${getDate(1)} 01:05:00`,
78+
end: `${getDate(1)} 01:35:00`,
79+
title: 'Dr. Mariana Joseph',
80+
summary: '3412 Piedmont Rd NE, GA 3032'
81+
},
82+
{
83+
start: `${getDate(1)} 14:30:00`,
84+
end: `${getDate(1)} 16:30:00`,
85+
title: 'Meeting Some Friends in ARMED',
86+
summary: 'Arsalan, Hasnaat, Talha, Waleed, Bilal',
87+
color: 'pink'
88+
},
89+
{
90+
start: `${getDate(2)} 01:40:00`,
91+
end: `${getDate(2)} 02:25:00`,
92+
title: 'Meet Sir Khurram Iqbal',
93+
summary: 'Computer Science Dept. Comsats Islamabad',
94+
color: 'orange'
95+
},
96+
{
97+
start: `${getDate(2)} 04:10:00`,
98+
end: `${getDate(2)} 04:40:00`,
99+
title: 'Tea Time with Colleagues',
100+
summary: 'WeRplay'
101+
},
102+
{
103+
start: `${getDate(2)} 00:45:00`,
104+
end: `${getDate(2)} 01:45:00`,
105+
title: 'Lets Play Apex Legends',
106+
summary: 'with Boys at Work'
107+
},
108+
{
109+
start: `${getDate(2)} 11:30:00`,
110+
end: `${getDate(2)} 12:30:00`,
111+
title: 'Dr. Mariana Joseph',
112+
summary: '3412 Piedmont Rd NE, GA 3032'
113+
},
114+
{
115+
start: `${getDate(4)} 12:10:00`,
116+
end: `${getDate(4)} 13:45:00`,
117+
title: 'Merge Request to React Native Calendars',
118+
summary: 'Merge Timeline Calendar to React Native Calendars'
119+
}
120+
];

‎example/src/screens/timelineCalendarScreen.tsx‎

Lines changed: 12 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
import groupBy from 'lodash/groupBy';
2+
import filter from 'lodash/filter';
3+
import find from 'lodash/find';
4+
15
import React, {Component} from 'react';
26
import {Alert} from 'react-native';
37
import {
@@ -8,132 +12,16 @@ import {
812
TimelineProps,
913
CalendarUtils
1014
} from 'react-native-calendars';
11-
import _ from 'lodash';
1215

13-
const INITIAL_TIME = {hour: 9, minutes: 0};
14-
const today = new Date();
15-
const getDate = (offset = 0) => CalendarUtils.getCalendarDateString(new Date().setDate(today.getDate() + offset));
16-
const EVENT_COLOR = '#e6add8';
17-
const EVENTS: TimelineEventProps[] = [
18-
{
19-
start: `${getDate(-1)} 09:20:00`,
20-
end: `${getDate(-1)} 12:00:00`,
21-
title: 'Merge Request to React Native Calendars',
22-
summary: 'Merge Timeline Calendar to React Native Calendars'
23-
},
24-
{
25-
start: `${getDate()} 01:15:00`,
26-
end: `${getDate()} 02:30:00`,
27-
title: 'Meeting A',
28-
summary: 'Summary for meeting A',
29-
color: EVENT_COLOR
30-
},
31-
{
32-
start: `${getDate()} 01:30:00`,
33-
end: `${getDate()} 02:30:00`,
34-
title: 'Meeting B',
35-
summary: 'Summary for meeting B',
36-
color: EVENT_COLOR
37-
},
38-
{
39-
start: `${getDate()} 01:45:00`,
40-
end: `${getDate()} 02:45:00`,
41-
title: 'Meeting C',
42-
summary: 'Summary for meeting C',
43-
color: EVENT_COLOR
44-
},
45-
{
46-
start: `${getDate()} 02:40:00`,
47-
end: `${getDate()} 03:10:00`,
48-
title: 'Meeting D',
49-
summary: 'Summary for meeting D',
50-
color: EVENT_COLOR
51-
},
52-
{
53-
start: `${getDate()} 02:50:00`,
54-
end: `${getDate()} 03:20:00`,
55-
title: 'Meeting E',
56-
summary: 'Summary for meeting E',
57-
color: EVENT_COLOR
58-
},
59-
{
60-
start: `${getDate()} 04:30:00`,
61-
end: `${getDate()} 05:30:00`,
62-
title: 'Meeting F',
63-
summary: 'Summary for meeting F',
64-
color: EVENT_COLOR
65-
},
66-
{
67-
start: `${getDate(1)} 00:30:00`,
68-
end: `${getDate(1)} 01:30:00`,
69-
title: 'Visit Grand Mother',
70-
summary: 'Visit Grand Mother and bring some fruits.',
71-
color: 'lightblue'
72-
},
73-
{
74-
start: `${getDate(1)} 02:30:00`,
75-
end: `${getDate(1)} 03:20:00`,
76-
title: 'Meeting with Prof. Behjet Zuhaira',
77-
summary: 'Meeting with Prof. Behjet at 130 in her office.',
78-
color: EVENT_COLOR
79-
},
80-
{
81-
start: `${getDate(1)} 04:10:00`,
82-
end: `${getDate(1)} 04:40:00`,
83-
title: 'Tea Time with Dr. Hasan',
84-
summary: 'Tea Time with Dr. Hasan, Talk about Project'
85-
},
86-
{
87-
start: `${getDate(1)} 01:05:00`,
88-
end: `${getDate(1)} 01:35:00`,
89-
title: 'Dr. Mariana Joseph',
90-
summary: '3412 Piedmont Rd NE, GA 3032'
91-
},
92-
{
93-
start: `${getDate(1)} 14:30:00`,
94-
end: `${getDate(1)} 16:30:00`,
95-
title: 'Meeting Some Friends in ARMED',
96-
summary: 'Arsalan, Hasnaat, Talha, Waleed, Bilal',
97-
color: 'pink'
98-
},
99-
{
100-
start: `${getDate(2)} 01:40:00`,
101-
end: `${getDate(2)} 02:25:00`,
102-
title: 'Meet Sir Khurram Iqbal',
103-
summary: 'Computer Science Dept. Comsats Islamabad',
104-
color: 'orange'
105-
},
106-
{
107-
start: `${getDate(2)} 04:10:00`,
108-
end: `${getDate(2)} 04:40:00`,
109-
title: 'Tea Time with Colleagues',
110-
summary: 'WeRplay'
111-
},
112-
{
113-
start: `${getDate(2)} 00:45:00`,
114-
end: `${getDate(2)} 01:45:00`,
115-
title: 'Lets Play Apex Legends',
116-
summary: 'with Boys at Work'
117-
},
118-
{
119-
start: `${getDate(2)} 11:30:00`,
120-
end: `${getDate(2)} 12:30:00`,
121-
title: 'Dr. Mariana Joseph',
122-
summary: '3412 Piedmont Rd NE, GA 3032'
123-
},
124-
{
125-
start: `${getDate(4)} 12:10:00`,
126-
end: `${getDate(4)} 13:45:00`,
127-
title: 'Merge Request to React Native Calendars',
128-
summary: 'Merge Timeline Calendar to React Native Calendars'
129-
}
130-
];
16+
import {timelineEvents, getDate} from '../mocks/timelineEvents';
13117

18+
const INITIAL_TIME = {hour: 9, minutes: 0};
19+
const EVENTS: TimelineEventProps[] = timelineEvents;
13220
export default class TimelineCalendarScreen extends Component {
13321
state = {
13422
currentDate: getDate(),
13523
events: EVENTS,
136-
eventsByDate: _.groupBy(EVENTS, e => CalendarUtils.getCalendarDateString(e.start)) as {
24+
eventsByDate: groupBy(EVENTS, e => CalendarUtils.getCalendarDateString(e.start)) as {
13725
[key: string]: TimelineEventProps[];
13826
}
13927
};
@@ -147,13 +35,11 @@ export default class TimelineCalendarScreen extends Component {
14735
};
14836

14937
onDateChanged = (date: string) => {
150-
// console.warn('TimelineCalendarScreen onDateChanged: ', date, updateSource);
151-
// fetch and set data for date + week ahead
15238
this.setState({currentDate: date});
15339
};
15440

155-
onMonthChange = (/* month, updateSource */) => {
156-
// console.warn('TimelineCalendarScreen onMonthChange: ', month, updateSource);
41+
onMonthChange = (month: any, updateSource: any) => {
42+
console.log('TimelineCalendarScreen onMonthChange: ', month, updateSource);
15743
};
15844

15945
createNewEvent: TimelineProps['onBackgroundLongPress'] = (timeString, timeObject) => {
@@ -188,7 +74,7 @@ export default class TimelineCalendarScreen extends Component {
18874
text: 'Cancel',
18975
onPress: () => {
19076
if (timeObject.date) {
191-
eventsByDate[timeObject.date] = _.filter(eventsByDate[timeObject.date], e => e.id !== 'draft');
77+
eventsByDate[timeObject.date] = filter(eventsByDate[timeObject.date], e => e.id !== 'draft');
19278

19379
this.setState({
19480
eventsByDate
@@ -200,7 +86,7 @@ export default class TimelineCalendarScreen extends Component {
20086
text: 'Create',
20187
onPress: eventTitle => {
20288
if (timeObject.date) {
203-
const draftEvent = _.find(eventsByDate[timeObject.date], {id: 'draft'});
89+
const draftEvent = find(eventsByDate[timeObject.date], {id: 'draft'});
20490
if (draftEvent) {
20591
draftEvent.id = undefined;
20692
draftEvent.title = eventTitle ?? 'New Event';

‎src/calendar-list/style.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,8 @@ export default function getStyle(theme: Theme = {}) {
3030
left: 0,
3131
right: 0,
3232
top: 0,
33-
backgroundColor: appStyle.calendarBackground
33+
backgroundColor: appStyle.calendarBackground,
34+
paddingHorizontal: 15
3435
},
3536
// @ts-expect-error
3637
...(theme['stylesheet.calendar-list.main'] || {})

‎src/calendar/header/index.tsx‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -105,21 +105,24 @@ const CalendarHeader = forwardRef((props: CalendarHeaderProps, ref) => {
105105
testID,
106106
accessibilityElementsHidden,
107107
importantForAccessibility,
108-
numberOfDays = 1,
108+
numberOfDays,
109109
current = '',
110110
timelineLeftInset
111111
} = props;
112112

113+
const numberOfDaysCondition = useMemo(() => {
114+
return numberOfDays && numberOfDays > 1;
115+
}, [numberOfDays]);
113116
const style = useRef(styleConstructor(theme));
114117
const headerStyle = useMemo(() => {
115-
return [style.current.header, numberOfDays > 1 ? style.current.partialHeader : undefined];
116-
}, [numberOfDays]);
118+
return [style.current.header, numberOfDaysCondition ? style.current.partialHeader : undefined];
119+
}, [numberOfDaysCondition]);
117120
const partialWeekStyle = useMemo(() => {
118121
return [style.current.partialWeek, {paddingLeft: timelineLeftInset}];
119122
}, [timelineLeftInset]);
120123
const dayNamesStyle = useMemo(() => {
121-
return [style.current.week, numberOfDays > 1 ? partialWeekStyle : undefined];
122-
}, [numberOfDays, partialWeekStyle]);
124+
return [style.current.week, numberOfDaysCondition ? partialWeekStyle : undefined];
125+
}, [numberOfDaysCondition, partialWeekStyle]);
123126

124127
useImperativeHandle(ref, () => ({
125128
onPressLeft,
@@ -163,8 +166,8 @@ const CalendarHeader = forwardRef((props: CalendarHeaderProps, ref) => {
163166

164167
const renderWeekDays = useMemo(() => {
165168
const dayOfTheWeek = new XDate(current).getDay();
166-
const weekDaysNames = numberOfDays > 1 ? weekDayNames(dayOfTheWeek) : weekDayNames(firstDay);
167-
const dayNames = numberOfDays > 1 ? weekDaysNames.slice(0, numberOfDays) : weekDaysNames;
169+
const weekDaysNames = numberOfDaysCondition ? weekDayNames(dayOfTheWeek) : weekDayNames(firstDay);
170+
const dayNames = numberOfDaysCondition ? weekDaysNames.slice(0, numberOfDays) : weekDaysNames;
168171

169172
return dayNames.map((day: string, index: number) => {
170173
const dayStyle = [style.current.dayHeader];
@@ -186,7 +189,7 @@ const CalendarHeader = forwardRef((props: CalendarHeaderProps, ref) => {
186189
</Text>
187190
);
188191
});
189-
}, [firstDay, current, numberOfDays, disabledDaysIndexes]);
192+
}, [firstDay, current, numberOfDaysCondition, numberOfDays, disabledDaysIndexes]);
190193

191194
const _renderHeader = () => {
192195
const webProps = Platform.OS === 'web' ? {'aria-level': webAriaLevel} : {};

‎src/calendar/header/style.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,6 @@ export default function (theme: Theme = {}) {
5151
marginTop: 7,
5252
flexDirection: 'row',
5353
justifyContent: 'space-around',
54-
paddingHorizontal: 15
5554
},
5655
partialWeek: {
5756
paddingRight: 0

‎src/expandableCalendar/index.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -543,6 +543,12 @@ const ExpandableCalendar = (props: ExpandableCalendarProps) => {
543543
);
544544
};
545545

546+
const numberOfDaysHeaderStyle = useMemo(() => {
547+
if (numberOfDays && numberOfDays > 1) {
548+
return {paddingHorizontal: 0};
549+
}
550+
}, [numberOfDays]);
551+
546552
const renderCalendarList = () => {
547553
return (
548554
<CalendarList
@@ -565,6 +571,7 @@ const ExpandableCalendar = (props: ExpandableCalendarProps) => {
565571
renderArrow={_renderArrow}
566572
staticHeader
567573
numberOfDays={numberOfDays}
574+
headerStyle={numberOfDaysHeaderStyle}
568575
timelineLeftInset={timelineLeftInset}
569576
/>
570577
);

0 commit comments

Comments
 (0)