Skip to content

A
AppUms_Lecturer
Commit db75fea5 by tungnq
Options

TODO: Refactor code lọc theo ngày

parent a11a4b61
Showing with 472 additions and 446 deletions
src/screens/class_schedule/filter3day/index.js
import React from 'react'; import React, {useState, useRef, useEffect} from 'react';
import {Text, View, StyleSheet} from 'react-native'; import {DeviceEventEmitter, PanResponder} from 'react-native';
import Filter3DayView from './view' import Filter3DayView from './view';
const Filter3Day = ({navigation}) => {
const [currentDate, setCurrentDate] = useState(new Date());
const [selectedDate, setSelectedDate] = useState(new Date());
const [showMonthPicker, setShowMonthPicker] = useState(false);
const scrollViewRef = useRef(null);
useEffect(() => {
DeviceEventEmitter.emit('onDateChange', selectedDate);
}, [selectedDate]);
useEffect(() => {
DeviceEventEmitter.emit('onDateChange', currentDate);
}, [currentDate]);
const createMockEvents = () => {
return [
{
id: '1',
title: 'Lịch vào trực lớp TTCĐT 445.T1',
subtitle: 'CS lớp 4D',
time: '07:00',
endTime: '09:00',
date: '2025-07-24',
type: 'class',
},
{
id: '2',
title: 'Meeting team development',
subtitle: 'Phòng họp A1',
time: '10:00',
endTime: '11:30',
date: '2025-07-25',
type: 'meeting',
},
{
id: '3',
title: 'Training React Native',
subtitle: 'Online Zoom',
time: '14:00',
endTime: '16:00',
date: '2025-07-26',
type: 'training',
},
{
id: '4',
title: 'Code Review Session',
subtitle: 'Dev Team',
time: '09:30',
endTime: '11:30',
date: '2025-08-25',
type: 'review',
},
];
};
const mockEvents = createMockEvents();
const formatDateToString = (date) => {
const year = date.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, '0');
const day = date.getDate().toString().padStart(2, '0');
return `${year}-${month}-${day}`;
};
const getEventsForDate = (date) => {
const dateStr = formatDateToString(date);
return mockEvents.filter(event => event.date === dateStr);
};
const getDayName = (date) => {
const days = ['Chủ nhật', 'Thứ 2', 'Thứ 3', 'Thứ 4', 'Thứ 5', 'Thứ 6', 'Thứ 7'];
return days[date.getDay()];
};
const getMonthName = (monthIndex) => {
const months = [
'Tháng 1', 'Tháng 2', 'Tháng 3', 'Tháng 4', 'Tháng 5', 'Tháng 6',
'Tháng 7', 'Tháng 8', 'Tháng 9', 'Tháng 10', 'Tháng 11', 'Tháng 12',
];
return months[monthIndex];
};
const get3DaysDates = (date) => {
const dates = [];
for (let i = 0; i < 3; i++) {
const dayDate = new Date(date);
dayDate.setDate(date.getDate() + i);
dates.push(dayDate);
}
return dates;
};
const isToday = (date) => {
const today = new Date();
return (
date.getDate() === today.getDate() &&
date.getMonth() === today.getMonth() &&
date.getFullYear() === today.getFullYear()
);
};
const handleMonthSelect = (monthIndex) => {
const newDate = new Date(currentDate);
newDate.setMonth(monthIndex);
setCurrentDate(newDate);
setSelectedDate(newDate);
setShowMonthPicker(false);
DeviceEventEmitter.emit('onDateChange', newDate);
};
const swipeToNext3Days = () => {
const nextDate = new Date(currentDate);
nextDate.setDate(currentDate.getDate() + 3);
setCurrentDate(nextDate);
setSelectedDate(nextDate);
DeviceEventEmitter.emit('onDateChange', nextDate);
};
const swipeToPrev3Days = () => {
const prevDate = new Date(currentDate);
prevDate.setDate(currentDate.getDate() - 3);
setCurrentDate(prevDate);
setSelectedDate(prevDate);
DeviceEventEmitter.emit('onDateChange', prevDate);
};
const toggleMonthPicker = () => {
setShowMonthPicker(!showMonthPicker);
};
const panResponder = PanResponder.create({
onMoveShouldSetPanResponder: (evt, gestureState) => {
return Math.abs(gestureState.dx) > 30 && Math.abs(gestureState.dy) < 100;
},
onPanResponderMove: (evt, gestureState) => {},
onPanResponderRelease: (evt, gestureState) => {
if (gestureState.dx > 50) {
swipeToPrev3Days();
} else if (gestureState.dx < -50) {
swipeToNext3Days();
}
},
});
const calculateEventPosition = (startTime, endTime) => {
const [startHour, startMinute] = startTime.split(':').map(Number);
const [endHour, endMinute] = endTime.split(':').map(Number);
const startTotalMinutes = startHour * 60 + startMinute;
const endTotalMinutes = endHour * 60 + endMinute;
const durationMinutes = endTotalMinutes - startTotalMinutes;
const HOUR_HEIGHT = 80;
const topPosition = (startTotalMinutes / 60) * HOUR_HEIGHT;
const height = (durationMinutes / 60) * HOUR_HEIGHT;
return { topPosition, height };
};
const Filter3Day = (props) => {
return ( return (
<Filter3DayView /> <Filter3DayView
navigation={navigation}
currentDate={currentDate}
selectedDate={selectedDate}
showMonthPicker={showMonthPicker}
scrollViewRef={scrollViewRef}
panResponder={panResponder}
getEventsForDate={getEventsForDate}
getDayName={getDayName}
getMonthName={getMonthName}
get3DaysDates={get3DaysDates}
isToday={isToday}
handleMonthSelect={handleMonthSelect}
toggleMonthPicker={toggleMonthPicker}
calculateEventPosition={calculateEventPosition}
/>
); );
}; };
......
src/screens/class_schedule/filter3day/style.js
import { StyleSheet, Text, View } from 'react-native' import { StyleSheet, Dimensions } from 'react-native';
import React from 'react' import R from '../../../assets/R';
const styles = StyleSheet.create({ const { width: screenWidth, height: screenHeight } = Dimensions.get('window');
const HOUR_HEIGHT = 80;
const DAY_COLUMN_WIDTH = (screenWidth - 70) / 3;
}) const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: R.colors.white,
},
monthPickerContainer: {
backgroundColor: R.colors.white,
borderBottomWidth: 1,
borderBottomColor: R.colors.gray,
paddingVertical: 10,
},
monthPickerContent: {
paddingHorizontal: 15,
},
monthItem: {
paddingHorizontal: 20,
paddingVertical: 10,
marginRight: 10,
borderRadius: 20,
backgroundColor: R.colors.gray,
},
monthItemSelected: {
backgroundColor: R.colors.black,
},
monthItemText: {
fontSize: R.fontsize.fontSizeLabel,
fontFamily: R.fonts.fontRegular,
color: R.colors.black,
},
monthItemTextSelected: {
color: R.colors.white,
fontFamily: R.fonts.fontMedium,
},
daysHeaderContainer: {
flexDirection: 'row',
backgroundColor: R.colors.gray,
borderBottomWidth: 1,
borderBottomColor: R.colors.gray2,
},
timeColumnHeader: {
width: 70,
},
dayHeaderCell: {
width: DAY_COLUMN_WIDTH,
alignItems: 'center',
justifyContent: 'center',
borderRightWidth: 1,
borderRightColor: R.colors.gray2,
},
dayHeaderText: {
fontSize: R.fontsize.fontSizeLabel,
fontFamily: R.fonts.fontRegular,
color: R.colors.black,
},
todayHeaderText: {
color: R.colors.black,
fontFamily: R.fonts.fontRegular,
},
dayNumberContainer: {
minWidth: 28,
minHeight: 28,
borderRadius: 15,
alignItems: 'center',
justifyContent: 'center',
marginVertical: 5
},
todayNumberContainer: {
backgroundColor: R.colors.blue,
},
dayHeaderNumber: {
fontSize: R.fontsize.fontSizeLabel,
fontFamily: R.fonts.fontRegular,
color: R.colors.black,
},
todayHeaderNumber: {
color: R.colors.white,
fontFamily: R.fonts.fontMedium,
},
timeSlotsContainer: {
flex: 1,
backgroundColor: R.colors.white,
},
scrollContent: {
},
timelineContainer: {
flexDirection: 'row',
position: 'relative',
},
timeLabelsColumn: {
width: 70,
borderRightWidth: 1,
borderRightColor: R.colors.gray2,
},
daysGridContainer: {
flex: 1,
flexDirection: 'row',
},
dayColumn: {
width: DAY_COLUMN_WIDTH,
position: 'relative',
borderRightWidth: 1,
borderRightColor: R.colors.gray2,
},
timeSlot: {
height: HOUR_HEIGHT,
alignItems: 'center',
justifyContent: 'center',
borderBottomWidth: 1,
borderBottomColor: R.colors.gray2,
},
gridCell: {
height: HOUR_HEIGHT,
borderBottomWidth: 1,
borderBottomColor: R.colors.gray2,
width: '100%',
},
timeText: {
fontSize: R.fontsize.fontSizeLabel,
fontFamily: R.fonts.fontRegular,
color: R.colors.black,
},
eventCard: {
borderRadius: 8,
paddingHorizontal: 6,
paddingVertical: 4,
},
eventTitle: {
fontSize: R.fontsize.fontSizeLabel,
fontFamily: R.fonts.fontMedium,
color: R.colors.white,
marginBottom: 2,
},
eventSubtitle: {
fontSize: R.fontsize.fontSizeLabel,
fontFamily: R.fonts.fontRegular,
color: R.colors.white,
},
eventTime: {
fontSize: R.fontsize.fontSizeLabel,
fontFamily: R.fonts.fontRegular,
color: R.colors.white,
},
});
export default styles export default styles;
\ No newline at end of file \ No newline at end of file
src/screens/class_schedule/filter3day/view.js
import React, {useState, useRef, useEffect} from 'react'; import React from 'react';
import { import {
View, View,
Text, Text,
TouchableOpacity, TouchableOpacity,
ScrollView, ScrollView,
StyleSheet,
Dimensions,
SafeAreaView, SafeAreaView,
DeviceEventEmitter,
PanResponder,
} from 'react-native'; } from 'react-native';
import R from '../../../assets/R'; import R from '../../../assets/R';
const {width: screenWidth, height: screenHeight} = Dimensions.get('window'); import styles from './style';
const HOUR_HEIGHT = 80;
const DAY_COLUMN_WIDTH = (screenWidth - 70) / 3; const Filter3DayView = (props) => {
const {
navigation,
currentDate,
selectedDate,
showMonthPicker,
scrollViewRef,
panResponder,
getEventsForDate,
getDayName,
getMonthName,
get3DaysDates,
isToday,
handleMonthSelect,
toggleMonthPicker,
calculateEventPosition
} = props;
const Filter3DayView = ({navigation}) => {
const [currentDate, setCurrentDate] = useState(new Date());
const [selectedDate, setSelectedDate] = useState(new Date());
const [showMonthPicker, setShowMonthPicker] = useState(false);
const scrollViewRef = useRef(null);
useEffect(() => {
DeviceEventEmitter.emit('onDateChange', selectedDate);
}, [selectedDate]);
useEffect(() => {
DeviceEventEmitter.emit('onDateChange', currentDate);
}, [currentDate]);
const createMockEvents = () => {
return [
{
id: '1',
title: 'Lịch vào trực lớp TTCĐT 445.T1',
subtitle: 'CS lớp 4D',
time: '07:00',
endTime: '09:00',
date: '2025-07-24',
type: 'class',
},
{
id: '2',
title: 'Meeting team development',
subtitle: 'Phòng họp A1',
time: '10:00',
endTime: '11:30',
date: '2025-07-25',
type: 'meeting',
},
{
id: '3',
title: 'Training React Native',
subtitle: 'Online Zoom',
time: '14:00',
endTime: '16:00',
date: '2025-07-26',
type: 'training',
},
{
id: '4',
title: 'Code Review Session',
subtitle: 'Dev Team',
time: '09:30',
endTime: '11:30',
date: '2025-08-25',
type: 'review',
},
];
};
const mockEvents = createMockEvents();
const formatDateToString = (date) => {
const year = date.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, '0');
const day = date.getDate().toString().padStart(2, '0');
return `${year}-${month}-${day}`;
};
const getEventsForDate = (date) => {
const dateStr = formatDateToString(date);
return mockEvents.filter(event => event.date === dateStr);
};
const getDayName = (date) => {
const days = ['Chủ nhật', 'Thứ 2', 'Thứ 3', 'Thứ 4', 'Thứ 5', 'Thứ 6', 'Thứ 7'];
return days[date.getDay()];
};
const getMonthName = (monthIndex) => {
const months = [
'Tháng 1', 'Tháng 2', 'Tháng 3', 'Tháng 4', 'Tháng 5', 'Tháng 6',
'Tháng 7', 'Tháng 8', 'Tháng 9', 'Tháng 10', 'Tháng 11', 'Tháng 12',
];
return months[monthIndex];
};
const get3DaysDates = (date) => {
const dates = [];
for (let i = 0; i < 3; i++) {
const dayDate = new Date(date);
dayDate.setDate(date.getDate() + i);
dates.push(dayDate);
}
return dates;
};
const isToday = (date) => {
const today = new Date();
return (
date.getDate() === today.getDate() &&
date.getMonth() === today.getMonth() &&
date.getFullYear() === today.getFullYear()
);
};
const handleMonthSelect = (monthIndex) => {
const newDate = new Date(currentDate);
newDate.setMonth(monthIndex);
setCurrentDate(newDate);
setSelectedDate(newDate);
setShowMonthPicker(false);
DeviceEventEmitter.emit('onDateChange', newDate);
};
const swipeToNext3Days = () => {
const nextDate = new Date(currentDate);
nextDate.setDate(currentDate.getDate() + 3);
setCurrentDate(nextDate);
setSelectedDate(nextDate);
DeviceEventEmitter.emit('onDateChange', nextDate);
};
const swipeToPrev3Days = () => {
const prevDate = new Date(currentDate);
prevDate.setDate(currentDate.getDate() - 3);
setCurrentDate(prevDate);
setSelectedDate(prevDate);
DeviceEventEmitter.emit('onDateChange', prevDate);
};
const toggleMonthPicker = () => {
setShowMonthPicker(!showMonthPicker);
};
const panResponder = PanResponder.create({
onMoveShouldSetPanResponder: (evt, gestureState) => {
return Math.abs(gestureState.dx) > 30 && Math.abs(gestureState.dy) < 100;
},
onPanResponderMove: (evt, gestureState) => {},
onPanResponderRelease: (evt, gestureState) => {
if (gestureState.dx > 50) {
swipeToPrev3Days();
} else if (gestureState.dx < -50) {
swipeToNext3Days();
}
},
});
const calculateEventPosition = (startTime, endTime) => {
const [startHour, startMinute] = startTime.split(':').map(Number);
const [endHour, endMinute] = endTime.split(':').map(Number);
const startTotalMinutes = startHour * 60 + startMinute;
const endTotalMinutes = endHour * 60 + endMinute;
const durationMinutes = endTotalMinutes - startTotalMinutes;
const topPosition = (startTotalMinutes / 60) * HOUR_HEIGHT;
const height = (durationMinutes / 60) * HOUR_HEIGHT;
return { topPosition, height };
};
const renderMonthPicker = () => { const renderMonthPicker = () => {
if (!showMonthPicker) return null; if (!showMonthPicker) return null;
...@@ -320,148 +175,5 @@ const Filter3DayView = ({navigation}) => { ...@@ -320,148 +175,5 @@ const Filter3DayView = ({navigation}) => {
); );
}; };
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: R.colors.white,
},
monthPickerContainer: {
backgroundColor: R.colors.white,
borderBottomWidth: 1,
borderBottomColor: R.colors.gray,
paddingVertical: 10,
},
monthPickerContent: {
paddingHorizontal: 15,
},
monthItem: {
paddingHorizontal: 20,
paddingVertical: 10,
marginRight: 10,
borderRadius: 20,
backgroundColor: R.colors.gray,
},
monthItemSelected: {
backgroundColor: R.colors.black,
},
monthItemText: {
fontSize: R.fontsize.fontSizeLabel,
fontFamily: R.fonts.fontRegular,
color: R.colors.black,
},
monthItemTextSelected: {
color: R.colors.white,
fontFamily: R.fonts.fontMedium,
},
daysHeaderContainer: {
flexDirection: 'row',
backgroundColor: R.colors.gray,
borderBottomWidth: 1,
borderBottomColor: R.colors.gray2,
},
timeColumnHeader: {
width: 70,
},
dayHeaderCell: {
width: DAY_COLUMN_WIDTH,
alignItems: 'center',
justifyContent: 'center',
borderRightWidth: 1,
borderRightColor: R.colors.gray2,
},
dayHeaderText: {
fontSize: R.fontsize.fontSizeLabel,
fontFamily: R.fonts.fontRegular,
color: R.colors.black,
},
todayHeaderText: {
color: R.colors.black,
fontFamily: R.fonts.fontRegular,
},
dayNumberContainer: {
minWidth: 28,
minHeight: 28,
borderRadius: 15,
alignItems: 'center',
justifyContent: 'center',
marginVertical:5
},
todayNumberContainer: {
backgroundColor: R.colors.blue,
},
dayHeaderNumber: {
fontSize: R.fontsize.fontSizeLabel,
fontFamily: R.fonts.fontRegular,
color: R.colors.black,
},
todayHeaderNumber: {
color: R.colors.white,
fontFamily: R.fonts.fontMedium,
},
timeSlotsContainer: {
flex: 1,
backgroundColor: R.colors.white,
},
scrollContent: {
},
timelineContainer: {
flexDirection: 'row',
position: 'relative',
},
timeLabelsColumn: {
width: 70,
borderRightWidth: 1,
borderRightColor: R.colors.gray2,
},
daysGridContainer: {
flex: 1,
flexDirection: 'row',
},
dayColumn: {
width: DAY_COLUMN_WIDTH,
position: 'relative',
borderRightWidth: 1,
borderRightColor: R.colors.gray2,
},
timeSlot: {
height: HOUR_HEIGHT,
alignItems: 'center',
justifyContent: 'center',
borderBottomWidth: 1,
borderBottomColor: R.colors.gray2,
},
gridCell: {
height: HOUR_HEIGHT,
borderBottomWidth: 1,
borderBottomColor: R.colors.gray2,
width: '100%',
},
timeText: {
fontSize: R.fontsize.fontSizeLabel,
fontFamily: R.fonts.fontRegular,
color: R.colors.black,
},
eventCard: {
borderRadius: 8,
paddingHorizontal: 6,
paddingVertical: 4,
},
eventTitle: {
fontSize: R.fontsize.fontSizeLabel,
fontFamily: R.fonts.fontMedium,
color: R.colors.white,
marginBottom: 2,
},
eventSubtitle: {
fontSize: R.fontsize.fontSizeLabel,
fontFamily: R.fonts.fontRegular,
color: R.colors.white,
},
eventTime: {
fontSize: R.fontsize.fontSizeLabel,
fontFamily: R.fonts.fontRegular,
color: R.colors.white,
},
});
export default Filter3DayView export default Filter3DayView
src/screens/class_schedule/filterday/style.js
import { StyleSheet, Text, View } from 'react-native' import {StyleSheet, Dimensions} from 'react-native';
import R from '../../../assets/R';
const styles = StyleSheet.create({}) const {width: screenWidth, height: screenHeight} = Dimensions.get('window');
const HOUR_HEIGHT = 80;
export default styles const styles = StyleSheet.create({
\ No newline at end of file container: {
flex: 1,
backgroundColor: R.colors.white,
},
monthPickerContainer: {
backgroundColor: R.colors.white,
borderBottomWidth: 1,
borderBottomColor: R.colors.gray,
paddingVertical: 10,
},
monthPickerContent: {
paddingHorizontal: 15,
},
monthItem: {
paddingHorizontal: 20,
paddingVertical: 8,
marginRight: 10,
borderRadius: 20,
backgroundColor: R.colors.gray,
},
dateInfoContainer: {
paddingHorizontal: 15,
paddingVertical: 12,
alignItems: 'center',
justifyContent:'center',
maxWidth:70,
borderRightWidth:1,
borderRightColor:R.colors.gray,
},
dayName: {
fontSize: R.sizes.xs,
fontFamily: R.fonts.fontRegular,
color: R.colors.black,
marginBottom: 2,
},
dayNumber: {
fontSize: R.fontsize.fontSizeContent,
fontFamily: R.fonts.fontRegular,
color: R.colors.black,
},
timeSlotsContainer: {
flex: 1,
backgroundColor: R.colors.white,
},
scrollContent: {
paddingBottom: 50,
},
timelineContainer: {
flexDirection: 'row',
position: 'relative',
},
timeLabelsColumn: {
minWidth: 70,
borderRightWidth: 1,
borderRightColor: R.colors.gray,
},
eventsColumn: {
flex: 1,
position: 'relative',
minHeight: 24 * HOUR_HEIGHT,
},
timeSlot: {
height: HOUR_HEIGHT,
alignItems: 'center',
justifyContent: 'center',
borderBottomWidth: 1,
borderBottomColor: R.colors.gray,
},
gridLine: {
height: HOUR_HEIGHT,
borderBottomWidth: 1,
borderBottomColor: R.colors.gray,
width: '100%',
},
timeText: {
fontSize: R.fontsize.fontSizeContent,
fontFamily: R.fonts.fontRegular,
color: R.colors.black,
},
eventCard: {
borderRadius: 15,
paddingLeft: 15,
paddingTop: 10,
},
eventTitle: {
fontSize: R.fontsize.fontSizeContent,
fontFamily: R.fonts.fontRegular,
color: R.colors.white,
fontWeight: '400',
marginBottom: 5,
},
eventSubtitle: {
fontSize: R.fontsize.fontSizeContent,
fontFamily: R.fonts.fontRegular,
fontWeight: '400',
color: R.colors.white,
marginBottom: 5,
},
dayNumberToday: {
fontSize: R.fontsize.fontSizeContent,
fontFamily: R.fonts.fontRegular,
color: R.colors.white,
fontWeight: '400',
backgroundColor: R.colors.blue,
borderRadius: 15,
paddingHorizontal: 4,
paddingVertical: 3,
},
eventTime: {
fontSize: R.fontsize.fontSizeContent,
fontFamily: R.fonts.fontRegular,
color: R.colors.white,
fontWeight: '400',
},
});
export default styles;
\ No newline at end of file
src/screens/class_schedule/filterday/view.js
...@@ -4,14 +4,10 @@ import { ...@@ -4,14 +4,10 @@ import {
Text, Text,
TouchableOpacity, TouchableOpacity,
ScrollView, ScrollView,
StyleSheet,
Dimensions,
SafeAreaView,
} from 'react-native'; } from 'react-native';
import R from '../../../assets/R'; import R from '../../../assets/R';
import styles from './style';
const {width: screenWidth, height: screenHeight} = Dimensions.get('window');
const HOUR_HEIGHT = 80;
const FilterDayView = (props) => { const FilterDayView = (props) => {
const { navigation, const { navigation,
currentDate, currentDate,
...@@ -132,120 +128,3 @@ const FilterDayView = (props) => { ...@@ -132,120 +128,3 @@ const FilterDayView = (props) => {
}; };
export default FilterDayView; export default FilterDayView;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: R.colors.white,
},
monthPickerContainer: {
backgroundColor: R.colors.white,
borderBottomWidth: 1,
borderBottomColor: R.colors.gray,
paddingVertical: 10,
},
monthPickerContent: {
paddingHorizontal: 15,
},
monthItem: {
paddingHorizontal: 20,
paddingVertical: 8,
marginRight: 10,
borderRadius: 20,
backgroundColor: R.colors.gray,
},
dateInfoContainer: {
paddingHorizontal: 15,
paddingVertical: 12,
alignItems: 'center',
justifyContent:'center',
maxWidth:70,
borderRightWidth:1,
borderRightColor:R.colors.gray,
},
dayName: {
fontSize: R.sizes.xs,
fontFamily: R.fonts.fontRegular,
color: R.colors.black,
marginBottom: 2,
},
dayNumber: {
fontSize: R.fontsize.fontSizeContent,
fontFamily: R.fonts.fontRegular,
color: R.colors.black,
},
timeSlotsContainer: {
flex: 1,
backgroundColor: R.colors.white,
},
scrollContent: {
paddingBottom: 50,
},
timelineContainer: {
flexDirection: 'row',
position: 'relative',
},
timeLabelsColumn: {
minWidth: 70,
borderRightWidth: 1,
borderRightColor: R.colors.gray,
},
eventsColumn: {
flex: 1,
position: 'relative',
minHeight: 24 * HOUR_HEIGHT,
},
timeSlot: {
height: HOUR_HEIGHT,
alignItems: 'center',
justifyContent: 'center',
borderBottomWidth: 1,
borderBottomColor: R.colors.gray,
},
gridLine: {
height: HOUR_HEIGHT,
borderBottomWidth: 1,
borderBottomColor: R.colors.gray,
width: '100%',
},
timeText: {
fontSize: R.fontsize.fontSizeContent,
fontFamily: R.fonts.fontRegular,
color: R.colors.black,
},
eventCard: {
borderRadius: 15,
paddingLeft: 15,
paddingTop: 10,
},
eventTitle: {
fontSize: R.fontsize.fontSizeContent,
fontFamily: R.fonts.fontRegular,
color: R.colors.white,
fontWeight: '400',
marginBottom: 5,
},
eventSubtitle: {
fontSize: R.fontsize.fontSizeContent,
fontFamily: R.fonts.fontRegular,
fontWeight: '400',
color: R.colors.white,
marginBottom: 5,
},
dayNumberToday: {
fontSize: R.fontsize.fontSizeContent,
fontFamily: R.fonts.fontRegular,
color: R.colors.white,
fontWeight: '400',
backgroundColor: R.colors.blue,
borderRadius: 15,
paddingHorizontal: 4,
paddingVertical: 3,
},
eventTime: {
fontSize: R.fontsize.fontSizeContent,
fontFamily: R.fonts.fontRegular,
color: R.colors.white,
fontWeight: '400',
},
})
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment