jquense / react-big-calendar Goto Github PK
View Code? Open in Web Editor NEWgcal/outlook like calendar component
Home Page: http://jquense.github.io/react-big-calendar/examples/index.html
License: MIT License
gcal/outlook like calendar component
Home Page: http://jquense.github.io/react-big-calendar/examples/index.html
License: MIT License
Hello,
thanks a lot for great work with react-big-calendar. I have noticed something weird in Month view at your example page: http://intljusticemission.github.io/react-big-calendar/examples/index.html
When I look at events file i find:
{
"title": "All Day Event",
"allDay": true,
"start": new Date(2015, 3, 0),
"end": new Date(2015, 3, 0)
}
which tells me that this event should be displayed one cell to the right (Tuesday). I see it on Monday.
This happens every time I set start and end date up to new Date(2015, 3, 4), here we got Friday (which is one day late in my opinion). Then when I change dates to new Date(2015, 3, 5) the display skips Saturday and displays on Sunday.
Regards
I want to see the details View from the pop-up by clicking the event-cell.
(for example. https://github.com/romainberger/react-portal-tooltip)
To use the 'react-portal-tooltip' component requires 'id' element.
I know className and style can be added, or id is not able to add?
lib/EventCell.js
if (eventPropGetter) var _eventPropGetter = eventPropGetter(event, start, end, selected),
id = _eventPropGetter.id, // ***** for example. *****
style = _eventPropGetter.style,
xClassName = _eventPropGetter.className;
return _react2['default'].createElement(
'div',
_extends({}, props, {
id: id, // ***** for example. *****
style: _extends({}, props.style, style),
className: _classnames2['default']('rbc-event', className, xClassName, {
'rbc-selected': selected,
'rbc-event-allday': isAllDay || _utilsDates2['default'].diff(start, _utilsDates2['default'].ceil(end, 'day'), 'day') > 1,
'rbc-event-continues-prior': continuesPrior,
'rbc-event-continues-after': continuesAfter
}),
onClick: function () {
return onSelect(event);
}
}),
_react2['default'].createElement(
'div',
{ className: 'rbc-event-content', title: title },
Component ? _react2['default'].createElement(Component, { event: event, title: title }) : title
)
);
Place to use the r-b-c
eventStyleGetter(event, start, end, isSelected) {
let style = {
backgroundColor: '#ff0000',
};
return {
id: 'rbc-cell-' + event.id, // ***** for example. *****
className: 'hoge',
style: style
};
}
Hello,
It's is not issue. ;-) may be feature request discussion.
Most favorite features from FullCalendar.IO: drag & drop and resize still not able on React? I want to drag object from another widget and drop on react-big-calendar. Drag & drop events inside calendar.
Hi, I have an issue with events at the end of march, but not of all years and only in "month" view.
Starting from the input below, I had a wrong result where I put a "-" sign, and a good result where I put a "+" sign:
- "start":new Date(2011, 2, 28),"end":new Date(2011, 2, 28)
What happens?
Thanks in advance,
Davide
Hi there,
This might be a bit of a silly question, but I've been struggling to get this up and running in a non-node environment. Basically I'm trying to get it running from inside of a WordPress website, but for that I'd need a compiled JS file that I can include. However I'd like to avoid having one file compiled with all dependencies(React, Lodash, etc.), since I'm already loading React from a separate file.
Is that even possible?
The issue cause by function Selection.js::getBoundsForNode line top = rect.top + (document.body.scrollTop || 0) does not correct because document.body.scrollLeft return 0
The issue may be fixed by changing to:
top = rect.top + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0);
see http://stackoverflow.com/questions/3464876/javascript-get-window-x-y-position-for-scroll
First off thanks for the great lib.
Second, is there any way to disable certain views?
For example, I only want the month view. I know I can hide the day/week/month selector with css, but if you click on the date in the month view, it opens the agenda view automatically. Any way to disable that functionality? Or have only the month view?
I was looking into using react-big-calendar in a project (while simultaneously experimenting with rollup and seeing if react-bing-calendar could get a jsnext:main
build to make it compatible).
During that I noticed that src/utils/dates.js imports and tries to use directions
from src/utils/constants.js; but directions
doesn't even exist inside constants.js
.
In events.js, i noticed that you only support "start": new Date(2015, 3, 0)
as the date format.
Does bigcalendar support other date formats for start and end date? How can i achieve something of this format
start: '2015-12-01-09:30AM'
First off, love react-big-calendar thanks for all the work you guys have done!
Looks like today's (March 13th) daylight savings time is causing problems in the week view. The 2am time slot isn't rendered at all in the time-gutter (calendar basically skips from 1am to 3am). This problem showed up locally for me but I noticed that it's also happening on the demo page. Theoretically it makes sense that the 2am time slot disappeared (since that hour was skipped) but even when switching between weeks in the calendar the 2am slot doesn't appear.
Sometimes business logic don't include All Day events.
It would be nice to have possibility to disable this functionality with a prop.
Hi, Again --- Love, love, love this project. Amazing work!
I want to change the layout of the today/back/next toolbar so that back and next are arrows before and after the date. Then Today becomes its own button. The goal is to free up some real estate for custom addition of filters.
Part of me wants to leave the calendar as is and just add filters at top, but the OCD part wants it all to align together in a nice flow.
Anyway, if I wanted to redo the layout of the toolbar, what would you suggest I do? Should I fork your code and alter it, or is there an open avenue for me to hide the tool bar, and just create a custom toolbar that calls the same events your toolbar does? Is that feasible?
Greetings. I am trying to use BigCalendar with no toolbar and with absolute positioning to fill part of a flexbox layout page. Month view looks good on all browsers I tested, but week view produces the following issues:
On Safari and Opera I encountered no issue with week view.
Just go to the demo http://intljusticemission.github.io/react-big-calendar/examples/index.html
and select the "Selectable" demo calendar.
Dates displayed in the popup once you click in week/day views are incorrect. Month view popups sometimes show the correct date (in a MM/DD/YYYY format).
Same issue with my npm calendar library, where I have no min/max props set on the calendar.
Currently, the TimeGutter on the day/time views doesn't appear to be customizable and always returns as 0px for me. This leads to a line running straight down the middle of the (nearly invisible) "all day" label, as well as the time labels that continue down the list.
Is this a customizable setting? If not, how is this calculated currently? How can I keep it from dropping to 0 and screwing up the display?
Thanks in advance!
Hi, Is there an API to navigate to a specific date?
Hi!
I'm trying to implement your component to the my project but I'm receiving one error all the time.
render: ->
<BigCalendar />
Uncaught Error: Invariant Violation: Uncontrolled(Calendar).render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.
Do you have some idea how to solve this or maybe an idea why I'm getting this kind of error?
Thank you very much!
I'm trying to load the react-big-calendar.css file via cssify/lessify/ tried another library, and they are all throwing a parse error when trying to load this file.
However, since I use less anyway, I required the less file, and all is well in the world. However, other non-less users might have issue with it :)
By the way, love this project --- HUUUUGE lifesaver.
Hi, I'm using your component, but I have an issue. I implemented a eventPropGetter method and I return an object with a className attribute. The class was correctly assigned to the event in the month view, but it is ignored in the other views.
Realize there are some big changes, but it would help to resolve build conflicts.
Hi,
The row segment are rendered too short when I create an event spanning over an entire month:
This behavior is also reproduced in the week view.
I have tried to look up the code for the possible error but I could not find it.
I produced this bug with version 0.9.8
I use react
0.14.7
My browser is chrome version 48.0.2564.97
If you don't have time to look it up, I take any pointer to help out :)
Thank you for this superb react component!
Would like to add the ability to have the .rbc-selected
class added to the month view to allow for styling on the selected day separately from today's date with .rbc-now
.
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:
= 'salesguy_id'
= { [{id: 1, name: 'John'}, {id:2, name: 'Linda'}] }
= { (resource, event) => resource.id == event.salesguy_id }
= { (resource) => resource.name }
= ['month', 'week', 'day', 'agenda', 'resource']
= { ...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
Popup example not working on your example website/
When running npm run examples
the following errors come up:
ERROR in ./examples/App.js
Module not found: Error: Cannot resolve module 'markdown-jsx-loader' in /home/harel/dev/tmp/bigcal/react-big-calendar/examples
@ ./examples/App.js 13:15-36
ERROR in /home/harel/dev/tmp/bigcal/react-big-calendar/node_modules/component-metadata-loader/lib/index.js:12
let prism = require('./prism-jsx');
^^^
Unexpected strict mode reserved word
@ ./examples/Api.js 11:49-106
I'm trying to get a baseline example in order to report another display issue when using big cal with semantic ui (at least that's my suspicion) but for now I can't even get the examples to work.
amazing work!
is this repo support drop / dray events like this ?
I checked example, It display only one month.
How to get full year calendar. like this - http://epsy.ldtp.net/fullcalendar/demos/year.html
Is it possible to use the component with React.js 0.13?
Hello, I have a question. Is it possible to show events in UTC time, and not in local? I want events to be at the same date and time no matter where the user is from.
I was making quite hacky code to neglect the timezone offset date.setMinutes(date.getMinutes() + date.getTimezoneOffset())
, but because of this I have a problem with Daylight Saving Time. I've got all events shifted on 27 March. But all other events, before and after 27 of March are good.
So if possible, please give me a hand with my problem, either it is a solution for showing UTC dates or DST shift.
In some cases it should be prevented to create overlapping slots.
I would propose a property e.g. overlapping={false}
, which defaults to true.
I implemented an overlapping check into an own calendar and disabled the slot creation for areas where a slot / event already existed.
Hello could you advice me how to use this component in Ruby on rails?
needs compiled source...
Hi, I'm really new to React so perhaps I'm missing something, but it seems like there is no way to use the formats
config to provide a format for the timestamps on the left hand side of the day view. It defaults to hh:mm a
but I would like to simply use hh a
as all our events will start/end at the top of an hour.
Is this already possible and I missed it? Should it be possible?
I looked in the code and didn't see an obvious opportunity to provide a pull request, but would be happy to if you could point me in the right direction :-)
Hello! I am testing the calendar in own project.Thank you for your work.
In the week and day views while dragging the mouse we get a selected area which gives as slotInfo object, whereas mouse click does not do same thing. In case there was not prior selection dayslot does not hold slotInfo in its inner state. If there was a selection made, clicking will refer to that same selection's data as slotInfo (no matter where I click, obviously since in DaySlot state holds it, and click refers to this.state ).
...
selector
.on('select', () => {
this._selectSlot(this.state)
this.setState({ selecting: false })
})
...
It would be (imo) helpful to treat click as a smallest selection according to the slot where clicking was made, and like in selection set info to inner state.
Thank you for this great component!
We are using it for a project that needs german labels. I could only get the german Toolbar labels (Today, Month, Week, ...) to work by including this Code in Calendar.jsx, so it passes the messages props to the Toolbar Component:
diff --git a/src/Calendar.jsx b/src/Calendar.jsx
index 6f79088..8bfb2b5 100644
--- a/src/Calendar.jsx
+++ b/src/Calendar.jsx
@@ -276,6 +276,7 @@ let Calendar = React.createClass({
label={viewLabel(current, view, formats, culture)}
onViewChange={this._view}
onNavigate={this._navigate}
+ messages={this.props.messages}
/>
}
Did I overlook something or is this a bug?
Thanks
While min/max props on the calendar set the displayed time ranges correctly, the selected dates seem to be confined to the dates given in min/max as well (at least in Week/Day view).
This makes no sense as the dates in the calendar are not confined. Probably related to #17
From the docs it seems that the date part in min/max should have no effect.
Hi,
We found an issue with daylight saving time. Event are shown one day before their real dates for the week where daylight saving time gets effective.
Probably the rendering is relative to the first day of the weeks which is in eastern time.
We will try to look more into on our side.
Thanks!
If a slot contains more than one event in week or day view, the events are overlapping horizontally, even if popup=true. It would be nice if for that case there would be a "+" on the right of the slot that would open the popup same as in month view.
Nice component, any plans to make this touch enabled? It really should have this functionality given the mobility requirements of most apps these days. If I end up uses this, I'll make a PR if you don't have any plans to implement this yourself.
Thanks again for the work here :)
Hi, I use your big-calendar but I have a problem with how it is displayed. I made an attachement with the screenshot
This is how I use it:
var BigCalendar = require('react-big-calendar');
require('react-big-calendar/lib/css/react-big-calendar.css');
render: function () {
return (
<Layout active="plan" title="Planning">
<div className="content-app fixed-header">
<div className="app-header">
<button className="btn btn-md btn-info" onClick={this.copyWeek}>
Copy week
</button>
<button className="btn btn-md btn-success pull-right" onClick={this.openModal}>
New course
</button>
</div>
<div className="app-body">
<div className="box">
<BigCalendar
events={this.events}
defaultDate={new Date()}
defaultView='week'
views={[]}
onSelectSlot={(this.slotSelected)}
onSelectEvent={(this.eventSelected)}
/>
</div>
</div>
</div>
</Layout>
}
But if I remove the defaultView and views attribute, and then choose week the table looks fine.
I'm using the 0.9.4 release and I'm seeing an assertion error that I wasn't seeing in 0.9.2.
The failure is around finding the function firstOfWeek
in the localizer.
I'm using moment
to initialize:
BigCalendar.setLocalizer(
BigCalendar.momentLocalizer(moment)
);
Hi, Me again!
I'm using your wonderful module like so:
<Scheduler
events={this.props.events || []}
defaultView='month'
selectable={true}
onSelectSlot={this.addEvent}
>
</Scheduler>
Unfortunately, the day view label is doing this!
Aka, its reading in the day of the week instead of the actual numerical calendar date. Any thoughts? Your demo works fine, so not sure what I'm doing differently.
I'm using moment as my localizer, in case that makes any difference.
Hi, Thanks so much for make this repo. it's sooo useful. I'm not sure if this is a issue. When selectable is true on week view. I can not create a all day event to cover the whole day, because there is not registered click event on all day row. I can only go back to the calendar view to create a all day events.
Setting the min
and max
props in the Calendar Component (two Date values specifying a starting time and ending time) nicely limit the displayed time range in the Week and Day Views.
I.e. using
min={new Date(2015, 10, 19, 8, 0, 0)}
max={new Date(2015, 10, 19, 21, 0, 0)}
limits the TimeGutter to display only the hours from 08:00 AM to 21:00 PM.
Unfortunately the time properties of the event passed to any onSelectSlot / onSelectEvent handlers now have messed up start and end times. These times seem to still assume a timegrid going from 00:00 to 24:00. Dragging the selection is even worse as now slots light up in a reverse(?) order and start and end times are set to 00:00.
Should this work, should I do something else or is this unsupported behaviour?
Thanks
When I try to create new selection on week view, wrong date is passed as param to on select function. Time bounds are set correctly but date is wrong
since this is based off of Full Calendar, is there a way to create recurring events?
Would be great to have ability to highlight the day header in Weekly view the same way as it is done in Monthly view with .rbc-now
style.
In a given month, I do not want to show dates which are outside from the month.
How to do it ?
On chrome v49, the use of flexbox causes the month and agenda views to dissapear.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.