Hour and Header Customization

howljs / react-native-calendar-kit

React Native Calendar Kit is a powerful and flexible calendar component for React Native applications. It provides a customizable and feature-rich calendar view with support for various functionalities

https://howljs.github.io/react-native-calendar-kit/docs/intro/

MIT License

429 stars 73 forks source link

Hour and Header Customization #136

Closed emrekazaz-hub closed 6 days ago

emrekazaz-hub commented 1 week ago

I want to customize the hour and header day components. For the hours, I would like to add an icon next to the numbers (e.g., sun and moon icons) to indicate whether it's daytime or nighttime. For the header, I'd like to display some details about the day, including text and icons. Is this currently possible in V2, or is this feature something you plan to implement? howljsExample

howljs commented 1 week ago

With version 2.x, you can fully customize everything, but I forgot to export the renderDayBarItem function, so making this adjustment is a bit more laborious because you’ll have to modify the entire Header component using the renderHeaderItem function. I will add a function to custom day bar item in the next version.

As per my plan, the new version will be released by the end of this week

emrekazaz-hub commented 6 days ago

And another question. When we use the numberOfDays for single day the header changes. The day header becomes prop of CalendarHeader (LeftAreaComponent). Is this feature or bug :) 1 day view 3 days view

howljs commented 6 days ago

The LeftAreaComponent is only supported in multi-day mode. For single-day mode, the left side will display the day item, while the right side will show all-day events, similar to Google Calendar

howljs commented 6 days ago

@emrekazaz-hub For the time being, renderDayItem has been added so you can customize each day. In the near future, I will break down the components further so that everyone can customize even more.