It would be nice if there was a way to display a calendar in a timezone other than the browser's local one. moment-timezone supports timezone conversion using a named zone:

http://momentjs.com/timezone/docs/#/using-timezones/converting-to-zone/

I attempted to make this work by setting moment's default timezone, but it looks like all of the date "math" to determine the range of days and weeks is done by date-arithmetic, a library that AFAICT has no awareness of timezones.

Description

This PR adds the ability to resize month events as well as resize week/day events on both ends, top and bottom. I wasn't able to get this to perform correctly on hover which I suppose is ideal. We might find inspiration from #577.

This is a long standing issue so it would be good to see some movement on this.

Also, I think this could be a good first implementation that is refined on going forward.

Screenshots

Month

Week

Issues

#382

PRs

#577, #541, #406

Hi everyone. I've developed an app that requires dragging and dropping events from an external list onto the calendar. I've made it work in the old version using React-DnD. But in the new version it was ditched for another technology that I still can't find out what it is. So I'd like to ask is it possible to drop an outside event onto the calendar by using the new DnD approach? If yes could you give me a hint? Thank you very much.

I'm a Rails dev and new to Node/Webpack/React. When I switch between month/week/day view, the app often crashes and I get this error in the console: index.js?07ad:209 Uncaught TypeError: date[("get" + method)] is not a function.

<BigCalendar
  defaultDate={new Date()}
  defaultView='week'
  events={this.state.events}
/>

I wonder whether this has to do with how webpack is configured and compiles the files? Here's the file that causes the error, the problem is on line 209:

var MILI    = 'milliseconds'
  , SECONDS = 'seconds'
  , MINUTES = 'minutes'
  , HOURS   = 'hours'
  , DAY     = 'day'
  , WEEK    = 'week'
  , MONTH   = 'month'
  , YEAR    = 'year'
  , DECADE  = 'decade'
  , CENTURY = 'century';

var dates = module.exports = {

  add: function(date, num, unit) {
    date = new Date(date)

    switch (unit){
      case MILI:
      case SECONDS:
      case MINUTES:
      case HOURS:
      case YEAR:
        return dates[unit](date, dates[unit](date) + num)
      case DAY:
        return dates.date(date, dates.date(date) + num)
      case WEEK:
        return dates.date(date, dates.date(date) + (7 * num)) 
      case MONTH:
        return monthMath(date, num)
      case DECADE:
        return dates.year(date, dates.year(date) + (num * 10))
      case CENTURY:
        return dates.year(date, dates.year(date) + (num * 100))
    }

    throw new TypeError('Invalid units: "' + unit + '"')
  },

  subtract: function(date, num, unit) {
    return dates.add(date, -num, unit)
  },

  startOf: function(date, unit, firstOfWeek) {
    date = new Date(date)

    switch (unit) {
      case 'century':
      case 'decade':
      case 'year':
          date = dates.month(date, 0);
      case 'month':
          date = dates.date(date, 1);
      case 'week':
      case 'day':
          date = dates.hours(date, 0);
      case 'hours':
          date = dates.minutes(date, 0);
      case 'minutes':
          date = dates.seconds(date, 0);
      case 'seconds':
          date = dates.milliseconds(date, 0);
    }

    if (unit === DECADE) 
      date = dates.subtract(date, dates.year(date) % 10, 'year')

    if (unit === CENTURY) 
      date = dates.subtract(date, dates.year(date) % 100, 'year')

    if (unit === WEEK) 
      date = dates.weekday(date, 0, firstOfWeek);

    return date
  },


  endOf: function(date, unit, firstOfWeek){
    date = new Date(date)
    date = dates.startOf(date, unit, firstOfWeek)
    date = dates.add(date, 1, unit)
    date = dates.subtract(date, 1, MILI)
    return date
  },

  eq:  createComparer(function(a, b){ return a === b }),
  neq: createComparer(function(a, b){ return a !== b }),
  gt:  createComparer(function(a, b){ return a > b }),
  gte: createComparer(function(a, b){ return a >= b }),
  lt:  createComparer(function(a, b){ return a < b }),
  lte: createComparer(function(a, b){ return a <= b }),

  min: function(){
    return new Date(Math.min.apply(Math, arguments))
  },

  max: function(){
    return new Date(Math.max.apply(Math, arguments))
  },

  inRange: function(day, min, max, unit){
    unit = unit || 'day'

    return (!min || dates.gte(day, min, unit))
        && (!max || dates.lte(day, max, unit))
  },

  milliseconds:   createAccessor('Milliseconds'),
  seconds:        createAccessor('Seconds'),
  minutes:        createAccessor('Minutes'),
  hours:          createAccessor('Hours'),
  day:            createAccessor('Day'),
  date:           createAccessor('Date'),
  month:          createAccessor('Month'),
  year:           createAccessor('FullYear'),

  decade: function (date, val) {
    return val === undefined 
      ? dates.year(dates.startOf(date, DECADE))
      : dates.add(date, val + 10, YEAR);
  },

  century: function (date, val) {
    return val === undefined 
      ? dates.year(dates.startOf(date, CENTURY))
      : dates.add(date, val + 100, YEAR);
  },

  weekday: function (date, val, firstDay) {
      var weekday = (dates.day(date) + 7 - (firstDay || 0) ) % 7;

      return val === undefined 
        ? weekday 
        : dates.add(date, val - weekday, DAY);
  },

  diff: function (date1, date2, unit, asFloat) {
    var dividend, divisor, result;

    switch (unit) {
      case MILI:
      case SECONDS:
      case MINUTES:
      case HOURS:
      case DAY:
      case WEEK:
        dividend = date2.getTime() - date1.getTime(); break;
      case MONTH:
      case YEAR:
      case DECADE:
      case CENTURY:
        dividend = (dates.year(date2) - dates.year(date1)) * 12 + dates.month(date2) - dates.month(date1); break;
      default:
        throw new TypeError('Invalid units: "' + unit + '"');
    }

    switch (unit) {
      case MILI:
          divisor = 1; break;
      case SECONDS:
          divisor = 1000; break;
      case MINUTES:
          divisor = 1000 * 60; break;
      case HOURS:
          divisor = 1000 * 60 * 60; break;
      case DAY:
          divisor = 1000 * 60 * 60 * 24; break;
      case WEEK:
          divisor = 1000 * 60 * 60 * 24 * 7; break;
      case MONTH:
          divisor = 1; break;
      case YEAR:
          divisor = 12; break;
      case DECADE:
          divisor = 120; break;
      case CENTURY:
          divisor = 1200; break;
      default:
        throw new TypeError('Invalid units: "' + unit + '"');
    }

    result = dividend / divisor;

    return asFloat ? result : absoluteFloor(result);
  }
};

function absoluteFloor(number) {
  return number < 0 ? Math.ceil(number) : Math.floor(number);
}

function monthMath(date, val){
  var current = dates.month(date)
    , newMonth  = (current + val);

    date = dates.month(date, newMonth)

    while (newMonth < 0 ) newMonth = 12 + newMonth

    //month rollover
    if ( dates.month(date) !== ( newMonth % 12))
      date = dates.date(date, 0) //move to last of month

    return date
}

function createAccessor(method){
  return function(date, val){
    if (val === undefined)
      return date['get' + method]()

    date = new Date(date)
    date['set' + method](val)
    return date
  }
}

function createComparer(operator) {
  return function (a, b, unit) {
    return operator(+dates.startOf(a, unit), +dates.startOf(b, unit))
  };
}



/*****************
 ** WEBPACK FOOTER
 ** ./~/date-arithmetic/index.js
 ** module id = 415
 ** module chunks = 0
 **/

As initially referenced in #93 I would like to take a stab at simplifying the codebase.

Initial ideas:

1. pull out internationalization into a separate package. react-big-calendar-moment, react-big-calendar-globalize
2. remove state, use props for everything unless there is literally no other way to do it
3. make all components pure
4. reduce file size to single page in an IDE for every file, split up large components

And from a development perspective:

1. unit test everything using mocha/enzyme/sinon and use jsdom in wallaby for instant test failure notification
2. remove tangled dependencies, create higher order components to do that, but keep the display logic clean and simple, and dumb.
3. use react-storybook for visual testing of components (https://github.com/kadirahq/react-storybook), this is by far the easiest way. I usually tweak the component in there, then write the unit test both to verify invisible things and as a regression catcher.
4. move to es6 completely? Let the user transpile as necessary, so no more lib/

Basically, I'll do these things for my own use, gradually over time, but I would like it to be useful to you also.

What do you think? Anything strike you as a different direction for your priorities?

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

Bug

What's the current behavior?

A regression/edge case of #404 (which should be reopened)

Code Sandbox: https://codesandbox.io/embed/react-big-calendar-example-96cue

This edge case occurs precisely when the following two conditions are satisfied:

1. There is an event A that overlaps with another event B which ends later
2. There are events C and D that begin after A but overlap with B

Affected Browser(s):

• Mozilla Firefox 68.0
• Google Chrome 75.0.3770.142

What's the expected behavior?

For event B not to be completely hidden by events C/D. Example (from Google Calendar):

It's great that we can specify our own custom components, but they seem to be Uncontrolled. I would like to be able to pass state and methods down to custom components - is there a way to do this?

An example use case - I want to add a button in the Toolbar which will modify some of the events on the calendar.

I've created this PR, that serve the same purpose as https://github.com/intljusticemission/react-big-calendar/pull/373. The difference is that the logic of the resource is done directly in the TimeGrid instead of creating a ResourceGrid which DRY things up and allow to enjoy resource in the week view as well.

changes:

1. re-factored TimeSlice/TimeSliceGroup in TimeGutter removes some loop code in favor of mapping, makes selection easier to implement
2. re-factored DaySlot uses same code as TimeGutter to generate html
3. re-factored selection code reduces code size substantially, separates concerns (selection is not handled within components, but with higher-order components Selection and Selectable)
4. otherwise, it's the same! Visually functioning the same way, external API identical

Potential API to expose:

1. because the selection is now configurable, it is possible to expose the function for creating the selection div
2. time slices, can make smaller slices (up to 5 per group) default is 2
3. rather than using new Date() for now, we should pass this as a prop, with default value of new Date(). Makes the component slightly more pure.

potential bugs to fix (pre-existing behavior):

1. selection of the all-day slots doesn't do anything (and never did). Perhaps we need to expose onSelectAllDay?
2. react/react-dom can be upgraded to 15.1.0. I left that for you to decide, I don't use anything here that breaks in earlier versions to my knowledge

P.S. had a nice vacation, hope your week was good :)

The component is awesome - the only thing missing for me is a resource view.

It is often the case to add resources to a calendar event: Eg. a car vendor could add a sales agent and a car model to the event. Now it is easy enough to render the event contents with custom color and text, but events will still be mixed up in the Week/Day columns.

I would like a Week like view, but instead of the week days it would show resource names, displaying the resources' events in the respective columns.

The api/props can be very simple. I have the following props in mind:

• resourceAccessor, resourceAccessor= 'salesguy_id'
• the list of resources, resources= { [{id: 1, name: 'John'}, {id:2, name: 'Linda'}] }
• a function to test membership, resourceMembership = { (resource, event) => resource.id == event.salesguy_id }
• a renderable node as resource column headers, resourceHeader= { (resource) => resource.name }
• an option to show the resource view in the toolbar, views= ['month', 'week', 'day', 'agenda', 'resource'] messages= { ...messages, resource: 'Sales agent view' }

Like this we could also easily switch between different resource categories - eg sales agents and available car models, calling that "Events by sales agent view, Events by available cars". Any resource restriction rules are handled by the application, but the display can easily be handled by the calendar.

Interested to know what you think about it, raf

This PR adds the ability to resize events to the DND plugin, as discussed in issue https://github.com/intljusticemission/react-big-calendar/issues/382. It includes:

bug fix to core:

• eventComponent was being destructured incorrectly in the DayColumn component's renderEvents function (so it was always undefined)

enhancements to dragAndDrop addon:

• passing prop resizable will have the wrapper use a new component ResizableEvent as the eventComponent for the calendar
• the onEventResize callback will give the ability to hook into the DND wrapping. It receives:
  • resizeType: 'drag' or 'drop' based on what type of interaction is causing the resize
  • eventData: object containing the original event as well as a new end for the event

gotchas:

Since only the original event object is accessible through react-dnd... In the onEventResize callback you will not be able to use Array.prototype.indexOf for finding the event again -- unless you continue to mutate the original event and splice it into the cloned events array... but I'm not sure if we would want to recommend that practice

This pull requests allows day columns to wrap over to the following day if the Calendar's max prop is set to a time before min. This is useful if you got events that commonly span past midnight. Another edge case this resolves is that "min = max = 00:00" allows you to create events that end at 00:00 the following day instead of 23:59, which seems to be the current limit.

Check that this is really a bug

• [X] I confirm

Reproduction link

https://codesandbox.io/s/funny-booth-hsub7o?file=/src/App.js

Bug description

The event is not showing on the calender when I pass the defaultDate={new Date()}. But when I pass the date with this format defaultDate={new Date(2022, 12, 27)} It shows up. Can you help me out with this issue @jquense . Thanks

Expected Behavior

<Calendar onNavigate={onNavigate} events={myEventsList} defaultDate={new Date()} localizer={localizer} step={15} // timeslots={8} defaultView='day' views={views} style={{height: 600}} />

Actual Behavior

<Calendar onNavigate={onNavigate} events={myEventsList} defaultDate={new Date(2022, 12, 27)} localizer={localizer} step={15} // timeslots={8} defaultView='day' views={views} style={{height: 600}} />

react-big-calendar version

1.5.2

React version

18.2.0

Platform/Target and Browser Versions

Chrome

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

Check that this is really a bug

• [X] I confirm

Reproduction link

https://codesandbox.io/s/calender-impl-75fq2k?file=/package.json

Bug description

In {Calendar} of react-big-calender, How can we create the custom range for the agenda view like we should disable/hide going back more than 2 days? and should disable/hide looking ahead more than 2 weeks? As we want the performer not to infinitely browse future and past data.

Expected Behavior

The user is unable to view data from more than 2 days before now() in Agenda View

The user is unable to view data from more than 2 weeks after now() in Agenda View.

Actual Behavior

Currently, users can infinitely browse future and past data.

react-big-calendar version

^1.5.0

React version

^18.1.0

Platform/Target and Browser Versions

Google Chrome Version 108.0.5359.124 (Official Build) (arm64)

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

Clear and concise description of the problem

In this commit support for Luxon was added. However, the readme was never updated to reflect its intended usage or that it was supported at all.

Suggested solution

Add documentation detailing usage and support of Luxon as a localizer.

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

Fix bug dragging an event in the RTL month view calendar gets confused to the wrong side

Describe the big picture of your changes here to communicate to the maintainers why we should accept this pull request. If it fixes a bug or resolves a feature request, be sure to link to that issue.

The best way to propose a feature is to open an issue first and discuss your ideas there before implementing them.

Always follow the contribution guidelines when submitting a pull request.

Check that this is really a bug

• [X] I confirm

Reproduction link

https://codesandbox.io/s/keen-mopsa-wb63ky?file=/src/App.js:788-930

Bug description

When events start on Day 1 and end on Day 2, with showMultiDayTimes enabled:

• The day 1 event doesn't show the end time
• The day 2 event doesn't show the start time for the event

Expected Behavior

The events should show the correct time even when it is spanning across days, or at least a prop where we can set what needs to be displayed.

Actual Behavior

The day 1 event doesn't show the end time, The day 2 event doesn't show the start time for the event.

react-big-calendar version

1.5.0

React version

18.1.0

Platform/Target and Browser Versions

MacOs

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