This is nice library how to set time to 12 hours format instead of 24 hour format

Its not possible to set only a specific date and disable the rest like in react-big-calander

Hello.

It seems like events only render of they have start date on a rendered date.

1. If an event starts before rendered dates it will not render at all even if end date is past the whole span.
2. If looking at multiple days a multi day event will only render on the "first" date.

Example 1. Day view. Only renders one of the events

Example 2. Three day view.

• Event "50379" Should render on every single day since its start is long before and long after the entire span.
• Event "50388" Renders correctly the first day but not at all on the other days even tough it has end date that is long past the 3 day span.
  

Downloaded and ran your example:

import { Calendar } from 'react-native-big-calendar'

const events = [
  {
    title: 'Meeting',
    start: new Date(2020, 9, 23, 10, 0),
    end: new Date(2020, 9, 23, 10, 30),
  },
  {
    title: 'Coffee break',
    start: new Date(2020, 9, 24, 15, 45),
    end: new Date(2020, 9, 24, 16, 30),
  },
]

function App() {
  return <Calendar events={events} height={600} />
}

however no matter what I do/change, the calendar will show as empty without any events.

BaseEvent has start and end fields defined as Date.

The event onPressEvent from Calendar component emits a BaseEvent object.
That instance seems to have its start and end fields as DayJs objectes instead of date.

Good morning.

Description

I'm trying to use the eventRenderer function in the events array but it doesn't work, would you please help me to know what I'm doing wrong? The main objective is to style the event cell individually (font-size by task time span).

Screencapture

Need to hide calendar header which shows date. Any ways to do it? Can we provide any class to handle css

Hi there,

First of all thanks a lot for creating and maintaining this repo, it has been really helpful! :)

That being said, I've encountered an issue when using the prop scrollOffsetMinutes:

I think to fix that, it would only require to the following change (double checking the object exists before using the scrollTo method):

Cheers

Related: #440

It would be great if min and max time range.

I'd like to ask you how the custom mode works and if it is possible to present hours as steps(30) and timeslots(1)? I've been using react big calendar for react, and it does have this amazing feature where I can say for instance that the initial hour is 06:30 and the last slot is 22:30 to be presented, and it renders 06:30, 07:00, 07:30, etc.

Proposal:

<Calendar
  minTime="06:30"
  maxTime="22:00"
/>

in package.config

"build:clean": "rm -rf build/", this will not work on windows and build fails.

day mode is not working

Hey,
First, i would like to say that i love the lib and the work you have done here
There is a small problem i would like to address you with,

My goal is to swipe the dates correctly, meaning:
When i swipe my finger Left i want to it to advance in the dates forward and not render the previous ones
And to other side accordingly

Please if you dont understand something tell me

Adding a video:

Video to explain

Hello 🙂
I find the library very interesting, however it lacks some features that I would like to have as a "month" view, a "day" view or display an event when it lasts all day...
So I would like to know if it is possible for you to put a Contribution Guide in the README so that I can contribute to the development of the lib ?

Thank's 😉

Obvious.

First of all Thanks a lot for this lib! A current block for us is that it doesn't support "month" mode type.
Are there any plans for it in the near future?

This is what I encountered with latest version.

This error is located at:
in NavigationContainer (at App.js:82)
in ThemeProvider (at App.js:81)
in Provider (at App.js:80)
in App (at renderApplication.js:45)
in RCTView (at AppContainer.js:109)
in RCTView (at AppContainer.js:135)
in AppContainer (at renderApplication.js:39)

Im trying to customise to use certain hours of the day (for example 9-5)

If i change the hours to reflect this. I can draw the grid etc fine

But rendering the current time and the events are not correct.

From my understanding, its due to the logic within the getRelativeTopInDay and getEventCellPositionStyle methods.

But i'm struggling to figure out the logic. Is there an easy way to make this universal based on the hours variable in utils.js?

when i try calendar with mode ="month" the layout seems incorrect, other mode work fine:

Currently swipe action is just pan responder, which moves very unnaturally.

Shouldn't it just be showing "5 more" and "7 more" once?

Here's my code

import React, { FunctionComponent, useMemo } from 'react';
import { ScrollView, Dimensions } from 'react-native';
import { Calendar, ICalendarEvent } from 'react-native-big-calendar';
import moment from 'moment';
import { useSelector } from 'react-redux';
import Navbar from '../commons/Navbar';
import { RootState } from '../../reducers';

const { height } = Dimensions.get('window');

const CalendarView: FunctionComponent = () => {
  const { appointments } = useSelector((state: RootState) => state.appointments);
  const events: ICalendarEvent[] = useMemo(() => {
    return appointments.map(a => {
      return { start: moment(a.Times.Start).toDate(), end: moment(a.Times.End).toDate(), title: a.Client.Forename };
    });
  }, [appointments]);
  return (
    <>
      <Navbar back />
      <ScrollView>
        <Calendar
          onPressCell={date => console.log(date)}
          onPressEvent={event => console.log(event)}
          events={events}
          height={height - 100}
          mode="month"
        />
      </ScrollView>
    </>
  );
};

export default CalendarView;

Hi,
First of all thank you for such a great plugin.

Is it possible to change the height of the cell? I tried using eventcellstyle but it didnt work. Please advise.

Thank you.

The key for event generated with the logic key={'${event.start}${event.title}'}. I have a case where there can be multiple events with exactly same details. This results in a react warning.

Maybe index be added to the combination to prevent this from happening?

Great job on selecting the slots to create an event.

On react native (iOS), it seems i cannot select the hour 2300-0000 (I'm in week view)

I need to create a month view with calendar events which is available on desktop demo

https://react-native-big-calendar.netlify.app/?path=/story/desktop--month-mode

Running this lib for the first time and receiving this Type Error:

TypeError: undefined is not an object (evaluating '_$$_REQUIRE(_dependencyMap[14], "react-native-big-calendar").Calendar')

This error is located at:
    in Unknown (at SceneView.tsx:122)
    in StaticContainer
    in EnsureSingleNavigator (at SceneView.tsx:114)
    in SceneView (at useDescriptors.tsx:153)
    in RCTView (at View.js:34)
    in Unknown (at CardContainer.tsx:245)
    in RCTView (at View.js:34)
    in Unknown (at CardContainer.tsx:244)
    in RCTView (at View.js:34)
    in Unknown (at CardSheet.tsx:33)
    in CardSheet (at Card.tsx:573)
    in RCTView (at View.js:34)
    in Unknown (at createAnimatedComponent.js:217)
    in AnimatedComponent (at createAnimatedComponent.js:278)
    in AnimatedComponentWrapper (at Card.tsx:555)
    in PanGestureHandler (at GestureHandlerNative.tsx:13)
    in PanGestureHandler (at Card.tsx:549)
    in RCTView (at View.js:34)
    in Unknown (at createAnimatedComponent.js:217)
    in AnimatedComponent (at createAnimatedComponent.js:278)
    in AnimatedComponentWrapper (at Card.tsx:544)
    in RCTView (at View.js:34)
    in Unknown (at Card.tsx:538)
    in Card (at CardContainer.tsx:206)
    in CardContainer (at CardStack.tsx:623)
    in RCTView (at View.js:34)
    in Unknown (at Screens.tsx:84)
    in MaybeScreen (at CardStack.tsx:616)
    in RCTView (at View.js:34)
    in Unknown (at Screens.tsx:54)
    in MaybeScreenContainer (at CardStack.tsx:498)
    in CardStack (at StackView.tsx:462)
    in KeyboardManager (at StackView.tsx:458)
    in RNCSafeAreaProvider (at SafeAreaContext.tsx:76)
    in SafeAreaProvider (at SafeAreaProviderCompat.tsx:42)
    in SafeAreaProviderCompat (at StackView.tsx:455)
    in RCTView (at View.js:34)
    in Unknown (at StackView.tsx:454)
    in StackView (at createStackNavigator.tsx:87)
    in StackNavigator (at app.routes.js:22)
    in Routes (at routes/index.js:9)
    in EnsureSingleNavigator (at BaseNavigationContainer.tsx:409)
    in BaseNavigationContainer (at NavigationContainer.tsx:91)
    in ThemeProvider (at NavigationContainer.tsx:90)
    in NavigationContainer (at routes/index.js:8)
    in Routes (at App.js:21)
    in PersistGate (at App.js:19)
    in Provider (at App.js:18)
    in App (at renderApplication.js:47)
    in RCTView (at View.js:34)
    in Unknown (at AppContainer.js:107)
    in RCTView (at View.js:34)
    in Unknown (at AppContainer.js:134)
    in AppContainer (at renderApplication.js:40)

Maybe is happening because of some configuration, but I implemented:

at configuration: yarn add react-native-big-calendar
also added: yarn add @types/react @types/react-native

export default () => {
const events = [
    {
      title: 'Meeting',
      start: new Date(2020, 1, 11, 10, 0),
      end: new Date(2020, 1, 11, 10, 30),
    },
    {
      title: 'Coffee break',
      start: new Date(2020, 1, 11, 15, 45),
      end: new Date(2020, 1, 11, 16, 30),
    },
  ];

return(
 <Calendar events={events} height={300} />
)
}

Hi @acro5piano, hope you're doing well.

Firstly, I must say the library is very promising.

I would only like to ask when the onClickCell feature be available?

Thank you very much.

I want to display something like this. Is this possible ?

https://github.com/ericz1803/react-google-calendar

I've added a custom header to the calendar, where I'm allowing the change of date with prev and next buttons.
Clicking these buttons, the date is being updated and passed on to the Calendar component. But the Calendar UI remains the same. It does not change to the date. Swipping on the calendar works, but not via an external state.

Here is my code

import React, { useState } from 'react';
import { Calendar as BigCalendar } from 'react-native-big-calendar';

import CalendarHeader from './CalenderHeader';

export default function Calendar() {
  const [date, setDate] = useState<Date>(new Date());

  const handleDateChange = (updatedDate: Date) => {
    setDate(() => new Date(updatedDate));
  };

  return (
    <>
      <CalendarHeader date={date} onDateChange={handleDateChange} />
      <BigCalendar
        ampm
        mode="day"
        date={date}
        events={[
          {
            title: 'Meeting 0',
            start: new Date(date.getFullYear(), date.getMonth(), date.getDate() - 1, 3, 0),
            end: new Date(date.getFullYear(), date.getMonth(), date.getDate() - 1, 5, 0),
          },
          {
            title: 'Meeting',
            start: new Date(date.getFullYear(), date.getMonth(), date.getDate(), 10, 0),
            end: new Date(date.getFullYear(), date.getMonth(), date.getDate(), 11, 0),
          },
          {
            title: 'Coffee break',
            start: new Date(date.getFullYear(), date.getMonth(), date.getDate(), 4 + 12, 15),
            end: new Date(date.getFullYear(), date.getMonth(), date.getDate(), 4 + 12, 40),
          },
        ]}
        overlapOffset={100}
        height={680}
        renderHeader={() => null}
      />
    </>
  );
}

Here is the CalenderHeader

import React from 'react';
import { add as addDuration } from 'date-fns';

import { Text, Wrapper, Button } from '@flurn/pandora/components';
import { DateFormats, formatDate } from '@flurn/pandora/utils';

interface CalendarHeaderProps {
  date: Date;
  onDateChange: (date: Date) => void;
}

export default function CalendarHeader(props: CalendarHeaderProps): JSX.Element {
  const { date, onDateChange } = props;

  const handleDateChange = (change: number) => () => {
    onDateChange(addDuration(date, { days: change }));
  };

  return (
    <Wrapper justifyContent="space-evenly" flexDirection="row" alignItems="center" my={12}>
      <Button fullWidth={false} primary={false} label="< Prev" onPress={handleDateChange(-1)} />
      <Text bold>{formatDate({ date1: date.toString(), option: DateFormats.Day })}</Text>
      <Button fullWidth={false} primary={false} label="Next >" onPress={handleDateChange(+1)} />
    </Wrapper>
  );
}

This is happening on both Android and iOS. Tested on android device and iOS simulator.

Here is the behavior -
https://user-images.githubusercontent.com/12946926/127954631-3765fb86-8eb5-47f5-869b-8df198b2feea.mp4

In the above video, you can see that initially swiping on the screen takes me to the previous date. But when I try to click on the header buttons, I see a flicker but the current day calendar does not change.

When I set weekStartsOn to 1 and the weeks starts on Monday the week is shown correctly but when the day view is active on a Sunday and I switch to the week view it shows me the week after instead of the current week.

In the current implementation of eventRenderer creates functions for each event. This is not ideal in terms of performance.

Custom render function should be like this

const eventRenderer = (event, touchableOpacityProps) => (
  <TouchableOpacity {...touchableOpacityProps}>
    <Text>{event.title}</Text>
  </TouchableOpacity>
)

<Calendar
  events={events}
  renderEvent={eventRenderer}
/>

Hi, is possible to show the month name on 'month' mode view?

I have been developing with react native for a few months. How difficult is it to implement dragging to create/move events in this library? Any pointers?

I want to contribut to the module but as the title suggests I can't get the react-native example to work on android. I cloned the project and then ran:

$yarn install
$yarn build
$yarn sync-ios
$cd rndemo
$yarn react-native run-android

The app keeps crashing with the error:

Error: Unable to resulve module './Calendar.tsx' from 'build\index.js'

The index.js file inside the build folder is as follows:

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var Calendar_tsx = require('./Calendar.tsx');
var interfaces_ts = require('./interfaces.ts');



Object.keys(interfaces_ts).forEach(function (k) {
	if (k !== 'default') Object.defineProperty(exports, k, {
		enumerable: true,
		get: function () {
			return interfaces_ts[k];
		}
	});
});
Object.defineProperty(exports, 'Calendar', {
	enumerable: true,
	get: function () {
		return Calendar_tsx.Calendar;
	}
});
//# sourceMappingURL=index.js.map

I looked at the buld folder and it does not include any .tsx files so I think there might be a problem with the build process.

Ran into an issue when creating custom colors for events. I have two events with same colour on top of each other. I'm trying to separate them visually using box shadow but for some reason box shadow styling doesn't seem to be applied to the component on top. Is there some override there?

If there was some property passed to eventCellStyle which would indicate if a component is on top of another I could use border to separate those but I don't want to add borders to all of my events to solve this issue. Any ideas?

Hello,

thank you for the great library it is really awsome good work,

I am actually trying to change the hours range from [00:00-23:00] to [08:00-19:00], i have tried to change the hours variable in index.js, but the events are no longer aligned with their proper HourGuideColumn, can you help please ?

Thank you in advance

Hi,
The calendar is not scrolling inside a ScrollView in android. Working perfectly on ios.

Is it possible to set own backgroundColors for the events passed from events-array? How to use the prop eventCellStyle to change the color dynamic?

If I have data like:

title: event.title,
start: event.start,
end: event.end,
color: event.colorCode

How to show current date, month and year at top. Also controls with left/right arrow for next/previous month/week/year based on whatever mode is selected.

Can we please consider adding the following styling TODOs:

• Ability to customize the hour sidebar (colors, fonts etc)
• Ability to customize the font in an event cell
• Ability to customize grid line style

Hi
I need to make some business logic in my app after completing the Meeting or the event of the Leave meeting? But I am not able to found any events to capture and do this.
Will you please help in this