Skip to content

Support unavailable hours across multiple days and fix show unavailable hours with resources #233

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Duynguyen0897 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Support unavailable hours across multiple days and fix show unavailable hours with resources #233

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 31 additions & 8 deletions packages/react-native-calendar-kit/src/components/TimelineBoard/UnavailableHours.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,8 +48,19 @@ export const UnavailableHoursByDate = memo(
resources,
widthPercentage,
}: UnavailableHoursByDateProps) => {
const unavailableHours = useUnavailableHoursByDate(currentUnix);

let unavailableHours = useUnavailableHoursByDate(currentUnix);
// remove unavailableHours whose resourceId does not exist in resources
if (resources && unavailableHours) {
const resourceIds = new Set(
resources.map((resource) => resource.id)
);
unavailableHours = unavailableHours.filter((hour) => {
return (
// if exists, need to check both string and number types
!hour.resourceId || resourceIds.has(hour.resourceId) || resourceIds.has(String(hour.resourceId)) || resourceIds.has(Number(hour.resourceId))
);
});
}
if (!unavailableHours) {
return null;
}
Expand Down Expand Up @@ -116,11 +127,14 @@ const UnavailableColumns = memo(
const result: UnavailableColumnHourProps[] = [];
const widthPerResource = widthPercentage || 1 / resourcesList.length;

// Create a map for faster resource lookup
const resourceMap = new Map<string, number>();
// Create a map for faster resource lookup - support both string and number ids
const resourceMap = new Map<string | number, number>();
resourcesList.forEach((resource, index) => {
if (resource.id) {
if (resource.id !== undefined && resource.id !== null) {
// Store both string and number versions
resourceMap.set(resource.id, index);
resourceMap.set(String(resource.id), index);
resourceMap.set(Number(resource.id), index);
}
});

Expand All @@ -136,8 +150,17 @@ const UnavailableColumns = memo(
});
});
} else {
// Resource-specific unavailable hour
const resourceIndex = resourceMap.get(item.resourceId);
// Resource-specific unavailable hour - only apply to matching resource
// Try both original value and converted versions
let resourceIndex = resourceMap.get(item.resourceId);
if (resourceIndex === undefined) {
resourceIndex = resourceMap.get(String(item.resourceId));
}
if (resourceIndex === undefined) {
resourceIndex = resourceMap.get(Number(item.resourceId));
}


if (resourceIndex !== undefined) {
result.push({
item,
Expand Down Expand Up @@ -252,4 +275,4 @@ const styles = StyleSheet.create({
container: {
position: 'absolute',
},
});
});
19 changes: 14 additions & 5 deletions packages/react-native-calendar-kit/src/context/UnavailableHoursProvider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,6 @@ const UnavailableHoursProvider: FC<
})
).current;
const currentDate = useDateChangedListener();

const notifyDataChanged = useCallback(
(date: number, offset: number = 7) => {
let originalData: Record<string, UnavailableHourProps[]> = {};
Expand Down Expand Up @@ -71,11 +70,21 @@ const UnavailableHoursProvider: FC<

// Get unavailable hours either by specific date or by weekday
const unavailableHoursByDate =
originalData[dateStr] || originalData[weekDay];
originalData[dateStr] || originalData[weekDay] || [];

// Filter items that match the current date
const filteredHours = unavailableHoursByDate.filter((item) => {
// If item has a date property, only include it if it matches
if (item.date) {
return item.date === dateStr;
}
// If no date property, include it (applies to all matching weekdays)
return true;
});

// If unavailable hours are found for this day, store them
if (unavailableHoursByDate) {
data[dateUnix] = unavailableHoursByDate;
if (filteredHours.length > 0) {
data[dateUnix] = filteredHours;
}

// Move to the next day
Expand Down Expand Up @@ -143,4 +152,4 @@ export const useUnavailableHoursByDate = (dateUnix: number) => {
selectUnavailableHoursByDate
);
return state;
};
};