cutterbl Github contribution chart
cutterbl Github Stats
cutterbl Most Used Languages

Activity

05 Oct 2022

Issue Comment

Cutterbl

Event drag & drop

Is there any event which tells when a event is being dragged(event between drag start and drag end)

Forked On 03 Oct 2022 at 06:37:55

Cutterbl

These questions are best asked on StackOverflow. This area is used for Issues and Feature Requests.

You should review the Drag & Drop documentation. Pay attention to the 'props'. There are multiple examples available.

Commented On 03 Oct 2022 at 06:37:55
Issue Comment

Cutterbl

Calender drag & drop event

I wanted to drag a event and drop it to the next month,day or week how can i do it?

Forked On 03 Oct 2022 at 06:35:35

Cutterbl

These questions are better served in StackOverflow, with this area intended for Issues and Feature Requests.

There is no facility for dragging an event from month to month (unless you put two instances side by side, maybe, with custom code for drag from outside). In the month view you can drag an event from one week to another (just drop it on the day you wish), or to any specific day. Within the week view you can drag an event from one day to another, within the same week.

Commented On 03 Oct 2022 at 06:35:35
Issue Comment

Cutterbl

Feature: Dayjs localizer

Notes:

  • I based the dayjs localizer off of the one for moment, as their API's are very similar
  • Note that when setting a default timezone on dayjs, this is only used when instantiating a dayjs instance by calling dayjs.tz(). Hence, it is manually checked whether a timezone aware dayjs should be used or not.
  • moment inverts offsets to be POSIX compatible. Dayjs doesn't do this, so I manually inverted them. moment docs
  • moment(date1).isSame(date2, 'date') is equivalent to moment(date1).isSame(date2, 'day'). see: note at https://momentjs.com/docs/#/manipulating/start-of/

I tested the dayjs localizer in the storybook, and everything seems to be working fine

Fixes #1953

Forked On 30 Sep 2022 at 12:15:19

Cutterbl

This is close. Don't import dayjs in the localizer and extend(). Apply the extensions to the instance of dayjs that they pass into the localizer function itself, right before you apply the locale. In the documentation for this localizer you'll want to let the developer know that these extensions will be applied, so they don't add them themselves, but this allows the developer to add other extensions that they feel may be needed by their app as well.

Commented On 30 Sep 2022 at 12:15:19
Issue Comment

Cutterbl

Swap TimeGrid and Resources

Clear and concise description of the problem

I need to switch the resources view from header to side panel and the timegrid from the side panel to the top.

In other words, I want the timegrid on the x-axis instead of y-axis

Screenshot (67)

Screenshot (68)

Suggested solution

Currently I don't have any solution for this or how it can be implemented.

Alternative

No response

Additional context

No response

Validations

  • [X] Read the docs.
  • [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this feature?

  • [X] I'm willing to open a PR

Forked On 29 Sep 2022 at 12:16:31

Cutterbl

This is a duplicate of #1855

Commented On 29 Sep 2022 at 12:16:31
Issue Comment

Cutterbl

Call For Feedback: Our Next Big Calendar

We all love Big Calendar. It covers a wide range of display scenarios, has support for low and high level component overrides, and can be used with a variety of localizers to allow us to use our preferred date/time manipulation library.

Big Calendar is a large, widely used Open Source component in the React community, with 175+k downloads weekly, and listed in every major 'React component listing' list you can find. We all need to thank @jquense and every contributor who has put time and effort in to moving Big Calendar forward for 130+ versions over the last seven years.

That said, React has grown and matured. Big Calendar hasn't had a true major update in some time. Most of it is still written with class components, only the Drag and Drop implementation uses a true context, there is very minimal memoization, and some things are so tightly coupled that even a minor change can have major ripple effects.

So the question becomes "What (and how) could we do better?" On the one hand, we want to continue to support React 16+ (not just the latest version), but on the other we want something more performant and extensible. Whatever we decide, we would likely introduce broad breaking changes.

So, if Big Calendar were to take that leap, what changes would we want to see that would make the efforts worth while for developers? And, who wants to help?

I'm asking for feedback here. Let's start a discussion. What's done well? What needs work? What are your suggestions to move Big Calendar into the next seven years?

Forked On 29 Sep 2022 at 12:08:07

Cutterbl

Thoughts on headless: I think we absolutely make hooks available that a dev could, theoretically, completely write their own interface. That said, Calendar is 'Big' and complex. One of the advantages is the ability to implement 'out of the box'.

Commented On 29 Sep 2022 at 12:08:07
Issue Comment

Cutterbl

Call For Feedback: Our Next Big Calendar

We all love Big Calendar. It covers a wide range of display scenarios, has support for low and high level component overrides, and can be used with a variety of localizers to allow us to use our preferred date/time manipulation library.

Big Calendar is a large, widely used Open Source component in the React community, with 175+k downloads weekly, and listed in every major 'React component listing' list you can find. We all need to thank @jquense and every contributor who has put time and effort in to moving Big Calendar forward for 130+ versions over the last seven years.

That said, React has grown and matured. Big Calendar hasn't had a true major update in some time. Most of it is still written with class components, only the Drag and Drop implementation uses a true context, there is very minimal memoization, and some things are so tightly coupled that even a minor change can have major ripple effects.

So the question becomes "What (and how) could we do better?" On the one hand, we want to continue to support React 16+ (not just the latest version), but on the other we want something more performant and extensible. Whatever we decide, we would likely introduce broad breaking changes.

So, if Big Calendar were to take that leap, what changes would we want to see that would make the efforts worth while for developers? And, who wants to help?

I'm asking for feedback here. Let's start a discussion. What's done well? What needs work? What are your suggestions to move Big Calendar into the next seven years?

Forked On 29 Sep 2022 at 12:03:16

Cutterbl

@tannerlinsley Cool that you considered it! And thanks for TanStack. Inspiration :)

Commented On 29 Sep 2022 at 12:03:16
Issue Comment

Cutterbl

Call For Feedback: Our Next Big Calendar

We all love Big Calendar. It covers a wide range of display scenarios, has support for low and high level component overrides, and can be used with a variety of localizers to allow us to use our preferred date/time manipulation library.

Big Calendar is a large, widely used Open Source component in the React community, with 175+k downloads weekly, and listed in every major 'React component listing' list you can find. We all need to thank @jquense and every contributor who has put time and effort in to moving Big Calendar forward for 130+ versions over the last seven years.

That said, React has grown and matured. Big Calendar hasn't had a true major update in some time. Most of it is still written with class components, only the Drag and Drop implementation uses a true context, there is very minimal memoization, and some things are so tightly coupled that even a minor change can have major ripple effects.

So the question becomes "What (and how) could we do better?" On the one hand, we want to continue to support React 16+ (not just the latest version), but on the other we want something more performant and extensible. Whatever we decide, we would likely introduce broad breaking changes.

So, if Big Calendar were to take that leap, what changes would we want to see that would make the efforts worth while for developers? And, who wants to help?

I'm asking for feedback here. Let's start a discussion. What's done well? What needs work? What are your suggestions to move Big Calendar into the next seven years?

Forked On 28 Sep 2022 at 03:53:49

Cutterbl

@tannerlinsley Appreciate the feedback. Wasn't suggesting adding to to TanStack, so much as taking a similar packaging approach

Commented On 28 Sep 2022 at 03:53:49
Issue Comment

Cutterbl

Feature: Dayjs localizer

Notes:

  • I based the dayjs localizer off of the one for moment, as their API's are very similar
  • Note that when setting a default timezone on dayjs, this is only used when instantiating a dayjs instance by calling dayjs.tz(). Hence, it is manually checked whether a timezone aware dayjs should be used or not.
  • moment inverts offsets to be POSIX compatible. Dayjs doesn't do this, so I manually inverted them. moment docs
  • moment(date1).isSame(date2, 'date') is equivalent to moment(date1).isSame(date2, 'day'). see: note at https://momentjs.com/docs/#/manipulating/start-of/

I tested the dayjs localizer in the storybook, and everything seems to be working fine

Fixes #1953

Forked On 26 Sep 2022 at 08:11:00

Cutterbl

@marnixhoh You bring a valid point. That particular piece of documentation goes back quite a ways, since before we began using the localizers (internally) for managing internal date math. We're currently in discussions around Big Calendar vX, where we are talking about having the localizers as their own separate packages. For now though, I'll stick with my thoughts on bullet three though. If we require this functionality internally to properly manage calendar display, then it really should be part of the default configuration, and the developer shouldn't have to guess at it.

Commented On 26 Sep 2022 at 08:11:00
Issue Comment

Cutterbl

Increase number of rows visible to 6 just like google calendar

Do you want to request a feature or report a bug?

I am using this library in an app that requires 6 rows just like seen on google calendar. I am not able to find a fix for this currently.

What's the current behavior?

The monthly view only allows 5 rows to be displayed in the monthly view

What's the expected behavior?

Month view should show 6 rows or be configurable by the user

I will appreciate any help with this.

Forked On 26 Sep 2022 at 07:01:58

Cutterbl

@firmanjml No, there is not.

Commented On 26 Sep 2022 at 07:01:58
Issue Comment

Cutterbl

Render custom component as Event

Can somebody point me on how to render a custom component as an event. Ideally, I would like to render different components for different days

Thx in advance

Forked On 26 Sep 2022 at 03:17:02

Cutterbl

@mourabitiziyad A few things here

This works fine

components={{
  month: {event: MyMonthEventLayout} 

Commented On 26 Sep 2022 at 03:17:02
Issue Comment

Cutterbl

Uncaught TypeError: d[("get" + method)] is not a function when i click on "+3 more" event

Check that this is really a bug

  • [X] I confirm

Reproduction link

http://localhost.com

Bug description

here is my Calendar Component, i can't find a solution to this! please i need some help.

const localizer = momentLocalizer(moment)


<Calendar
                        localizer={localizer}
                        events={retrieveAllEvents}
                        defaultView="month"
                        startAccessor="start"
                        endAccessor="end"
                        style={{ minHeight: 1000, margin: '50px' }}
                        eventPropGetter={(event, start, end, isSelected) => ({
                            event,
                            start,
                            end,
                            isSelected,
                            style: { backgroundColor: event.assignedColor },
                        })}
                        components={{
                            event: EventTooltip,
                        }}
                    /> 

here is my object

const handleAddEvent = () => {
        if (newEvent)
            dispatch(
                addNewEvent({
                    title: newEvent.title,
                    description: newEvent.description,
                    start: moment(formatUTC(newEvent.start)).toDate(),
                    end: moment(formatUTC(newEvent.end)).toDate(),
                    assignedTo: newEvent.assignedTo,
                    assignedColor: newEvent.assignedColor,
                })
            )
    } 

Expected Behavior

No response

Actual Behavior

No response

react-big-calendar version

@latest

React version

@latest

Platform/Target and Browser Versions

windows chrome@latest

Validations

  • [X] Read the docs.
  • [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
  • [X] Make sure this is a react-big-calendar issue and not an implementation issue

Would you like to open a PR for this bug?

  • [ ] I'm willing to open a PR

Forked On 21 Sep 2022 at 12:27:04

Cutterbl

Your reproduction link is not a CodeSandbox, so there is no way of seeing the exact issue. This error always comes up when your event's start and end dates are not true JS Dates. Big Calendar does not attempt to parse string dates. See our documentation on [Understanding Dates]](http://jquense.github.io/react-big-calendar/examples/index.html?path=/story/guides-understanding-dates--page)

Commented On 21 Sep 2022 at 12:27:04
Issue Comment

Cutterbl

How to set start of month and end of month when using date-fns localizer?

Clear and concise description of the problem

How to set start of month and end of month when using date-fns localizer? I tried to use date-fns to localize calendar to "fa-IR" and calendar system to jalali, but calendar system is still gregorian! So I want to set first day and last day of month to show proper calendar base on jalali months days.

Suggested solution

No idea

Alternative

No response

Additional context

No response

Validations

  • [X] Read the docs.
  • [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this feature?

  • [ ] I'm willing to open a PR

Forked On 19 Sep 2022 at 05:38:41

Cutterbl

@alirezaaminii Not sure if @vahidimani figured this out, but I did give a possible answer to Jalali calendar in a StackOverflow answer. At least a good place to get started, maybe.

Commented On 19 Sep 2022 at 05:38:41
Issue Comment

Cutterbl

Increase number of rows visible to 6 just like google calendar

Do you want to request a feature or report a bug?

I am using this library in an app that requires 6 rows just like seen on google calendar. I am not able to find a fix for this currently.

What's the current behavior?

The monthly view only allows 5 rows to be displayed in the monthly view

What's the expected behavior?

Month view should show 6 rows or be configurable by the user

I will appreciate any help with this.

Forked On 19 Sep 2022 at 12:12:25

Cutterbl

The number of items, displayed in a date cell in the month view, is dependent upon the size of your outer container on your calendar. Layout of events is dynamically calculated based upon the available space. The greater the height, the more rows display.

Commented On 19 Sep 2022 at 12:12:25
Issue Comment

Cutterbl

Uncaught TypeError: Cannot call a class as a function

I have a library of React components. Within this library, I'm applying react-imask to the input control of my DateTimePicker. Within Storybook, everything is fantastic. But, once I use this control in my application, it goes to hell. The issue are the blocks I use to control user input of the control.

import IMask from 'imask/esm/imask';
import MaskedRange from 'imask/esm/masked/range';
import MaskedEnum from 'imask/esm/masked/enum';

export const blocks = {
  MM: {
    mask: MaskedRange,
    from: 1,
    to: 12,
  },
  DD: {
    mask: MaskedRange,
    from: 1,
    to: 31,
  },
  YY: {
    mask: MaskedRange,
    from: 0,
    to: 99,
  },
  yyyy: {
    mask: MaskedRange,
    from: 1850,
    to: 9999,
  },
  h: {
    mask: MaskedRange,
    from: 1,
    to: 12,
  },
  hh: {
    mask: MaskedRange,
    from: 1,
    to: 12,
  },
  KK: {
    mask: MaskedRange,
    from: 0,
    to: 23,
  },
  mm: {
    mask: MaskedRange,
    from: 0,
    to: 59,
  },
  A: {
    mask: MaskedEnum,
    enum: ['AM', 'PM'],
  },
  a: {
    mask: MaskedEnum,
    enum: ['am', 'pm'],
  },
}; 

I've setup my control similar to the way the Guide configures a MomentJs based date control. You can see a slightly simplified example in this CodeSandbox.

CodeSandbox has the same problem that I do. While my control works flawlessly in Storybook, when I import it into my app and try to use it I get the dreaded Uncaught TypeError: Cannot call a class as a function. This appears to happen the minute I begin typing in a field.

For me, I compile my library using Rollup, with a pretty basic Babel config:

library Babel config:

module.exports = function (api) {
  api.cache(false);
  return {
    presets: ['@babel/preset-env', 'react-app'],
    plugins: ['@babel/plugin-transform-runtime'],
    exclude: /node_modules\/(?!imask)\/.*/,
    env: {
      test: {
        presets: [
          [
            '@babel/preset-env',
            {
              modules: 'commonjs',
              targets: {
                node: 'current',
              },
            },
          ],
          'react-app',
        ],
      },
    },
  };
}; 

Notice that I've tried to include imask in the bundling process here. I've tried this with and without the exclude statement.

Once my package is consumed by my app, I use Webpack to bundle my app. The Babel config here is very similar:

app Babel config:

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        modules: 'cjs',
      },
    ],
    'react-app',
  ],
  exclude: /node_modules\/(?!imask)\/.*/
}; 

I feel like there's something very basic I must be missing. Storybook uses Webpack under the hood, so it appears to be able to handle all of this. As a side note, using the commonJs 'IMask' (for the blocks) gives me additional, but different, problems.

Any help you can give me would be greatly appreciated.

Forked On 15 Sep 2022 at 01:35:15

Cutterbl

@uNmAnNeR Seeing the 6.4.3 alpha. Any chance this fix/change might make it in to 6.4.3?

Commented On 15 Sep 2022 at 01:35:15
Issue Comment

Cutterbl

Feature: Dayjs localizer

Notes:

  • I based the dayjs localizer off of the one for moment, as their API's are very similar
  • Note that when setting a default timezone on dayjs, this is only used when instantiating a dayjs instance by calling dayjs.tz(). Hence, it is manually checked whether a timezone aware dayjs should be used or not.
  • moment inverts offsets to be POSIX compatible. Dayjs doesn't do this, so I manually inverted them. moment docs
  • moment(date1).isSame(date2, 'date') is equivalent to moment(date1).isSame(date2, 'day'). see: note at https://momentjs.com/docs/#/manipulating/start-of/

I tested the dayjs localizer in the storybook, and everything seems to be working fine

Fixes #1953

Forked On 15 Sep 2022 at 01:24:30

Cutterbl

@marnixhoh Finally getting an opportunity to look through this. Here are a few notes.

  • The final paragraphs of the Localizers Guide need to be updated to include the new localizer.
  • The localizer prop documentation needs to be updated to include the new localizer
  • Looking at the demo example code, if the localizer requires all of these plugins to extend dayjs to function properly (isBetween, isSameOrAfter, etc) then extending dayjs should automatically happen at the beginning of your dayjsLocalizer function rather than having the developer figure it out. The only real exception to that is if you're allowing the developer to optionally including timezone support. (See the momentLocalizer for clarity on optional tz support)
  • When constructing date based props for you Calendar demo, try to use the library (dayJs) to construct those prop values (something we need to fix in some demos), as opposed to the dates utils.
  • If you review the unit tests you'll see commented out bits for the Luxon localizer. These are currently used to quickly switch out the localizer used in testing. Please provide configurations for the DayJs localizer as well, so that testing can be verified.

Commented On 15 Sep 2022 at 01:24:30
Issue Comment

Cutterbl

Feature/add custom formats

I found an issue with date formats in react-big-calendar when i tried to use jalali calendar. I defined the last formats as a default value for momentLocalizer (defaultStringFormats and defaultFunctionFormats). so when develper wants to change for example dayHeaderFormat from 'dddd MMM DD' to ' @#MMM DD - dddd #@' can pass the customFormats parameter to momentLocalizer and it will be used in calendar instead of defaultStringFormats

Forked On 15 Sep 2022 at 12:30:23

Cutterbl

@smarzism I'm confused. Are you saying our current way of overriding the default formats doesn't work?

Commented On 15 Sep 2022 at 12:30:23
Issue Comment

Cutterbl

Selecting time from start to end in different days not working

Check that this is really a bug

  • [X] I confirm

Reproduction link

https://github.com/anwarmah/calender

Bug description

Scheduling the start and end time within the day is working. But different days is not working.

const handleOpen = (calls) => { setCallData(callStructure); setCallData(f=>({ ...f, start: calls.start})); setCallData(f=>({ ...f, end: calls.end})) setOpen(true); }

Expected Behavior

Start and end time different days need to work.

Actual Behavior

Start and end time different days not working.

react-big-calendar version

0.38.9

React version

8.6.0

Platform/Target and Browser Versions

15.2

Validations

  • [X] Read the docs.
  • [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
  • [X] Make sure this is a react-big-calendar issue and not an implementation issue

Would you like to open a PR for this bug?

  • [X] I'm willing to open a PR

Forked On 15 Sep 2022 at 12:21:07

Cutterbl

@anwarmah Without seeing the data associated with your events it's very hard to troubleshoot your problem, which is why we ask you to fork our Issue Template when reporting an Issue. Judging by your code it would appear that an event's start and end are strings rather than true JS Date objects. This would explain the functionality you're receiving. See our documentation on Dates in Big Calendar.

Commented On 15 Sep 2022 at 12:21:07
Issue Comment

Cutterbl

ERROR: react-dom.development.js:86 Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code.

Check that this is really a bug

  • [X] I confirm

Reproduction link

http://localhost.com

Bug description

Show big calendar in a react application and then open console, you can see a warning

react_devtools_backend.js:4026 Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code. See https://reactjs.org/link/unsafe-component-lifecycles for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://reactjs.org/link/derived-state

Please update the following components: DayColumn 

Expected Behavior

DayColumn component need an update from mantainers

Actual Behavior

No response

react-big-calendar version

1.5.0

React version

18.2.0

Platform/Target and Browser Versions

linux

Validations

  • [X] Read the docs.
  • [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
  • [X] Make sure this is a react-big-calendar issue and not an implementation issue

Would you like to open a PR for this bug?

  • [ ] I'm willing to open a PR

Forked On 10 Sep 2022 at 05:52:30

Cutterbl

We are already aware of this issue, and a search of Issues will show you that it's been previously reported.

Commented On 10 Sep 2022 at 05:52:30
Issue Comment

Cutterbl

feat(add colors): add colors to cards (#2236)

Add custom colors to the event cards

Forked On 10 Sep 2022 at 05:50:20

Cutterbl

@ktechila This requires one to include styling with each event, rather than conditional styling based upon an event's properties. The eventPropGetter approach already exists to handle this kind of scenario.

Commented On 10 Sep 2022 at 05:50:20
Issue Comment

Cutterbl

making the current months whole calendar view show in a side panel when in today view

I am making a react calendar using react-big-calendar. When I am in my default view, which is todays view, on the side I want to be able to also display the months calendar in a typical calendar form.

Has anyone been able to achieve this? I am posting a picture of my desired outcome for reference. I have been looking for a few hours and i haven't been able to find anyone whole has done something similar. so any help would be incredibly appreciated.

Screenshot 2022-09-09 at 07 02 05

Forked On 09 Sep 2022 at 04:56:20

Cutterbl

Seems like a StackOverflow question. You would use a basic calendar control, in your right hand panel, and need some logic to sync displays in someway (probably by controlling your date prop at a higher level, and sharing between the two)

Commented On 09 Sep 2022 at 04:56:20
Issue Comment

Cutterbl

Call For Feedback: Our Next Big Calendar

We all love Big Calendar. It covers a wide range of display scenarios, has support for low and high level component overrides, and can be used with a variety of localizers to allow us to use our preferred date/time manipulation library.

Big Calendar is a large, widely used Open Source component in the React community, with 175+k downloads weekly, and listed in every major 'React component listing' list you can find. We all need to thank @jquense and every contributor who has put time and effort in to moving Big Calendar forward for 130+ versions over the last seven years.

That said, React has grown and matured. Big Calendar hasn't had a true major update in some time. Most of it is still written with class components, only the Drag and Drop implementation uses a true context, there is very minimal memoization, and some things are so tightly coupled that even a minor change can have major ripple effects.

So the question becomes "What (and how) could we do better?" On the one hand, we want to continue to support React 16+ (not just the latest version), but on the other we want something more performant and extensible. Whatever we decide, we would likely introduce broad breaking changes.

So, if Big Calendar were to take that leap, what changes would we want to see that would make the efforts worth while for developers? And, who wants to help?

I'm asking for feedback here. Let's start a discussion. What's done well? What needs work? What are your suggestions to move Big Calendar into the next seven years?

Forked On 07 Sep 2022 at 12:03:18

Cutterbl

@Canopix My reasoning behind considering nx began with this chart, specifically relating to the last three items on the list. Use of the NX Console in VS Code helps to take a lot of the guesswork out of the setup, and the code gen bits are heavy timesavers. Plus the have a pretty nice plugin ecosystem.

Commented On 07 Sep 2022 at 12:03:18