howljs / react-native-calendar-kit Goto Github PK

Hello! first of all let me tell you that this is the library every developer who has to deal with dates is looking for!
I'd like to know if there's any way to retrieve the selected time slot when onPressBackground is fired because I only get the current date but not the time.

thanks!

When we are in edit mode like above, how to return back to normal?

when the day changes initialDate doesnt update properly. This happens when i navigate to a new screen on onPressEvent. When i try to navigate back afterwards with a new date, the initialDate does not change

const [events,setEvents]= useState([
{
id: '1',
start: '2023-03-13T06:00:00Z',
end: '2023-03-17T07:00:00Z',
color:'red',
])

I am adding static dates 13-17 dates. But the event shows only 13,14,16 dates. not showing for the 15 and 17 dates. I have attached a screenshot for your reference.

I want to show custom workweek days like Monday, Wednesday and Friday is that possible?

Because Some companies have 4 work days, that's why I need that features.

In the video example and documentation is no indication of the month or the year.

Can this be added to the header instead of the word 'Calendar', i.e January 2022.

It would be a good use of space without compromising / reducing the diary.

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)

Steps to reproduce:

Set initialTimeIntervalHeight and maxTimeIntervalHeight to 300.
scrollToNow does not scroll all the way to current time.

If anyone could look into this issue it would be greatly appreciated.
Thank you!

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 =)

Is it possible getting a slot start and end times on onPressBackground? Like onDragCreateEnd function. How can I do that?

Could we add an option to set the selectedEvent immediately after an event is created? That way the user would not have to re-select the event to increase the duration.

In April 2023 for the New Zealand time zone, I'm observing that Date 2 April and Sunday are rendered twice in a row, because of which the whole UI is getting disturbed Can anyone please help me out with this asap?

Please find the attachment here

Timezone is set to Wellington, New Zealand

My local timezone

I have tried switching multiple time zone i.e. NewYork USA and Perth Australia and my local time zone ie. India but my not facing such issues there I guess this issue is occurring in some timezone that needs to be checked.

Hey folks! Great job on getting this done using the latest libs available out there.

I was wondering if you guys plan to export only the header as a component allowing to have the same functionality of changing weeks, selecting days, animation but with custom children or even the header as it is with the functionalities mentioned before.

That would be great!

thanks!

Are there plans to support react native web?

after setting timeinterval to 20, there is invalid date in calendar.

I have used TimelineCalendar in my app.
i did not have full screen timeline calendar, due to we have some padding and stick drawer.

See attached have only 6 day fit to screen.

Hello, I cannot get the hours to show on the left hours column.

Edit: I tested on emulator and the hours are showing. Default font color on physical android devices is white, which is why the hours do not show because the background is also white.

Solved with: theme={{hourText: {color: 'black'}}}

Thank you

Can you please add the time to this I need to scroll the diary to the the particular event time I have edit.

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

Hi,

Thanks for this great package. But the month view was missing in this package. Can we expect this feature

Hi,
I've seen that it's possible to navigate to a given time (in addition to date) through the goToDate() method, but would it be possible to pass a 'scrollToTime' value also on component boot? Maybe by adding support for passing time to the initialDate prop?

Or is it already possible with current API?

The rationale behind this request is to be able to position the view directly at the start time of the first event of interest, skipping, for example, the empty hours before such event, but without having to change the day start hour with the start prop.

Thank you,
fc

HI,
when I set timeInterval= 15 or 30 or 45 onpressBackground returned the wrong time always.
If I add the start={8} and end={14} prop also it's get wrong time always

<TimelineCalendar
start={8}
end={16}
hourFormat="h:mm a"
firstDay={1}
allowPinchToZoom
viewMode={mode }
events={events}
scrollToNow={false}
showNowIndicator={false}
onPressEvent={pressEvent}
onPressBackground={onPressBackground}
timeInterval={15}
/>

If you fixed this issue soon, very helpful for me

Dragging is not working in android but it's working fine in iOS. Kindly check the code and video attached

<TimelineCalendar
ref={calendarRef}
viewMode={viewMode}
events={events}
initialDate={selectedWeekViewDate}
unavailableHours={unavailableHours}
isLoading={loading}
onChange={_onChange}
onPressOutBackground={() => {
setIsModelVisible(false)
setIsDatePickerVisible(false)
}}
onLongPressEvent={_onLongPressEvent}
onPressEvent={onPressEvent}
onPressBackground={onGridClick}
selectedEvent={selectedEvent}
onEndDragSelectedEvent={setSelectedEvent}
dragStep={20}
theme={{
dragHourColor: '#001253',
dragHourBorderColor: '#001253',
dragHourBackgroundColor: '#FFF',
editIndicatorColor: '#FFF',
eventTitle: {
color: colors.white,
fontWeight: 'normal',
paddingLeft: 4,
paddingVertical: 1,
},
}}
/>

Hi
Kindly let me know how we can customise the slots to show slot intervals similar to screenshot shown below

When I change the hourFormat to this:

hourFormat="HH:mm A"

It results in the time going from 11:00AM, 12:00PM, 13:00PM, 14:00PM and so on.

Is there a way to fully integrate AM/PM format?

I'm trying to change the background color of the event itself, and even stuff like the border radius.
What I'd ideally want is to make the root event's background color to be transparent. The reason is that I need to render part of the event content with ~30% opacity, which isn't possible currently since the event has a fixed background of white.

I want to end with a huge thank you for this amazing library. Fantastic work 👏

Hi. I am implementing the react-native-calendar-kit in one of my projects. onPressBackground gives the wrong timeslot information when the user presses it.

Any workaround?

thanks

There is an issue in version 1.13. When I load the events it show the wrong week days for a second and then it loads the correct date. Kindly find the video for that.

Hi folks,

I'm working on an application that supports i18n, and I tried to implement calendar-kit.
It looks fine on LTR but not on RTL.

Here is screenshot for the issue:

Current used libraries:

"react-native": "0.70.6"
"react": "18.1.0"
"@shopify/flash-list": "^1.4.1"
"react-native-reanimated": "^2.14.4"
"@howljs/calendar-kit": "^1.13.1"
....

Anyone can help or suggest a solution for me? thanks.

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)?

Instead of using constant timezones, can you integrate dynamic timezone. Currently there is issue in Now indicator in daylight saving for Australia/Sydney and others timezones.

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

range from 0 to 24

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:

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

Hi author,
I found an issue related to drag events when long press and drag events to edit. I drag the event from week 1 to week 2 same as the video bellow. Can you check it please?
https://vimeo.com/799791066
Thanks

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.

Please find the example below:

When setting time interval prop unavailable Hours Not working as expected.

Its working fine 1 hour based view.But if i change to 15 or 30 o4 45 min interval.Unavilable backgroud color not filled properly

Look great! Can we use this library already in production?

Adding a onZoomIntervalChange would allow us to do some calculations inside renderEventContent.

For my case, I'm rendering a multi-event type event where each of the event types has to take X % of the total event's height. In order for me to calculate that, I need the current interval height - if I want to have pinch to zoom enabled.

I guess it could be added here?

Hi. I am implementing the react-native-calendar-kit in one of my projects. I need that calendar to be in the EST timezone but when I pass prop it to it, the Library crashes on the screen

System info

System:
    OS: macOS 11.5.2
    CPU: (8) x64 Intel(R) Core(TM) i7-4980HQ CPU @ 2.80GHz
    Memory: 179.98 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node
    Yarn: 1.22.15 - /usr/local/bin/yarn
    npm: 8.3.1 - ~/.nvm/versions/node/v16.14.0/bin/npm
    Watchman: Not Found
  Managers:
    CocoaPods: 1.11.2 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.2, iOS 15.2, macOS 12.1, tvOS 15.2, watchOS 8.3
    Android SDK: Not Found
  IDEs:
    Android Studio: 2020.3 AI-203.7717.56.2031.7583922
    Xcode: 13.2.1/13C100 - /usr/bin/xcodebuild
  Languages:
    Java: 15.0.2 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2 
    react-native: 0.67.5 => 0.67.5 
    react-native-macos: Not Found
  npmGlobalPackages:

I need timeZone prop and support in my project. Due to that issue, I am also getting the wrong date on onPressBackground when the user presses the timeslot on the calendar.

Any workaround on this and quick solution

Thanks

I'd like to sponsor this project, does @howljs or this repo have a way you like to be sponsored?