Hi,

Thanks for making this great library available! We're actively migrating to it in our new app. There is one missing feature though that we'd need to make full use of it.

We require being able to set availability on a day-by-day basis. In other words, we don't have repeated availability by default, so we cannot use the current unavailability, which assumes it's the same info for each week. Note that we actually use availability, which we then convert to unavailable hours using xspans, which is totally fine. No need to change that.

It would therefore be great if the "unavailable hours" could support dates as an index as opposed to just day numbers. Would this be something that you'd like to add? I'm a bit short on time, otherwise I'd look into it myself.

When you have a very short event, like 5 or 15 minutes the element is so small you can't see it, and sometimes, interact with it.

This PR introduces a minimum height theme property to make sure the EventBlock is always at least X high.

First of all thank you for making this excellent library.

I would like to propose this small addition to the code where the NowIndicator uses a custom "now" time. The use case for us at Sunsama is that the user can have a different timezone set than the timezone used by the device. Having the ability to change the "now" time will make it able for us to show the time indicator in the "now" the user expects to see.

I am hoping this is something you can use, if not feel free to close this PR and we will just keep using this internally.

Sometimes we need the event across several days but are only available part-time during each day. For example:

 {
    id: '1',
    title: 'presale',
    startDay: '2022-12-22',
    endDay: '2022-12-25',
    startTime: '09:00:00',
    endTime: '12:00:00'
  },

then the event draws as:

Do with this what you will but if you are creating/editing an event and have a specifically short time label then the time indicator label when dragging displays not really useful information. In the case below dragging the box would just display the full hour.

Since dragging is a more fine-grained control I needed a separate hour formatting for that.

We are actively integration this component inside our app, but we need to have a simple button to quickly go to the current date. I can't use the header of the screen itself but we have room in the day header because we always show one day at a time. Is there any was to implement a custom component (right or left)?

When I've set the start and end hoour and then started dragging for creating new event the hour highlighted on left side by blue color, doesnt show proper time, still using old start-end

https://user-images.githubusercontent.com/98807756/206170666-fe76bca6-def6-4a84-9b6f-5b4937cc7da6.MP4

range from 0 to 24

OnChange function doesn’t return dates properly after changing the mode. At first some random dates are returned then after correct dates are returned.

I'm going to assume that editIndicatorColor is used for this specific view, so I've added it in there since currently you cannot change the drag-indicator colour and also the property isn't used.

Hello currently on fabric project seems to giving errors due to @shopify/flash-list is not compatible with fabric right now https://github.com/Shopify/flash-list/issues/196 Just a heads up otherwise great work keep it up

Currently the renderEventContent is declared in the DragEditItem but never passed into, so in effect it never works. This patch passes that property in properly.

Hello, as the title says, i assigned an onpress to a FAB, to change the calendar view from "week" to "day".

However, when i press the fab to access the day viewmode, it takes me to the previous day.

apparently this happens only when changing to viewmode="day" with the onpress, initializining the calendar with viewmode="day" or "week", displays the correct dates.

here's the code for reference: ` const actions = [ { text: "Oggi", icon: require("../../../assets/Week-icon.png"), name: "day", position: 1 }, { text: "Settimana", icon: require("../../../assets/Today-icon.png"), name: "week", position: 2 }, ];

const Calendar = () => {

const [isView, setIsView] = useState<CalendarViewMode>('week'); 
console.log('isView start', isView);


const onPressButton = (name: String) => {
    if(name === "week") setIsView("week");
    if(name === "day") setIsView("day"); 

    console.log('isView onPress', isView);
}

return ( 
    <> 
        <TimelineCalendar 
        locale='it'
        allowPinchToZoom
        initialTimeIntervalHeight={60}
        minTimeIntervalHeight={29}
        maxTimeIntervalHeight={110}
        halfLineContainerStyle={calendareStyles.container}
        viewMode={isView} /> 
        
        <FloatingAction
        actions={actions}
        color={"blue"}
        onPressItem={name => {
          onPressButton(name);
        }}
        floatingIcon= {require("../../../assets/calendar-icon.png")}
        iconWidth={30}
        iconHeight={23} /> 
    </> 
);

}

export default Calendar; ` Thank you =)

I'm testing the library and it displays wrong time.

"@howljs/calendar-kit": "^1.10.2"

import {StyleSheet} from 'react-native';
import React from 'react';
import {TimelineCalendar, EventItem} from '@howljs/calendar-kit';

const exampleEvents: EventItem[] = [
  {
    id: '1',
    title: 'Test1',
    start: '2022-12-20T11:00:44.098Z',
    end: '2022-12-20T12:00:44.301Z',
    color: '#A3C7D6',
  },
  {
    id: '2',
    title: 'test 2',
    start: '2022-12-18T10:00:05.313Z',
    end: '2022-12-18T11:00:05.313Z',
    color: '#B1AFFF',
  },
];

export const Agenda = () => {
  return <TimelineCalendar viewMode="threeDays" events={exampleEvents} />;
};

export default Agenda;

And result is like on the screen:

There is one hour difference in app in comparison to data (exampleEvents). Eg. start: 10 in data but in app 11. Any idea what I'm doing wrong?

PS. Passing timeZone prop results in crashing the app (timeZoneData is undefined)