I am trying to wrap FullCalendar React component with my own functional React component with useContext hook to access MobX store (I might use the store in other components eventually) and observer() to make it react to changes in the store. My component reacts as I would expect, but I have trouble making the FullCalendar component render after a change.
I've tried finding a solution, wrapping <FullCalendar> in <Observer>, playing with autorun() and reaction() but nothing worked. I have to be missing something
This sandbox https://codesandbox.io/s/mobx-fullcalendar-xejn9 shows a simplified version of my solution so far.
Clicking the button at the top adds an event to the observable store, which gets shown in a list below it. But the calendar doesn't show the new event.
Weirdly enough if I make a change in the code, save it, the CodeSandbox causes the render and the events show up in the calendar.
Thanks to #ADyson, I found a solution. Instead of passing a static list of events to the FullCalendar component
events={store.events}
I can pass an event fetching function. So in the most trivial case, I can just pass the events from the store to the successCallback function and it works.
events={(fetchInfo, successCallback, failureCallback) => {
successCallback(store.events);
}}
I've updated the CodeSandbox https://codesandbox.io/s/mobx-fullcalendar-xejn9 as well.
Related
I have a react component that is rendered in two different pages and I want it to have different css for each page. So I passed it a prop to switch between the css classes, but, because there is no page refresh between the 2 pages, my component doesn't change the css class, only if I manually refresh the page, my component sees the prop I passed and changes the css class.
Can anyone tell me how can I make the component rerender on page change ? even if there is no page refresh?
I tried, until now, to change the state of the component with componentDidUpdate, but it ends up rerendering on a infinite loop, and the page doesn't load anymore.
Is there any other way to do this ?
I think you can solve the problem using history. This will help you to track the URL changes.
if you're using a functional component you can use useParams
the second solution that comes to my mind is to use the param as the key of the component, that will force the re-render.
I imagine you are using react router dom, if so I think getting the location by doing useLocation() would achieve the desired result as when the url changes this hook would cause a re-render
const location = useLocation()
I'm trying to render images and each images should be clickable. I tried to write a code below. However, the click events fires when a user access to the component. Can you explain why is it happening?
the code that I wrote is here
When I use a callback function, it worked out!
events={{click: () => this.props.addToCart(item.product_id)}}
I'm making a plugin that gets the actual panel or text selection and runs a command on the cli with that value and some params that the user adds in a input.
The idea is to have a similar view than find-and-replace package, but from the first beginning I wasn't able to use space-pane-views for a error on jQuery.
So I decided to make it with React and as far as I was making everything was okayish, but I found 2 big problems.
First I understand what's the View of space-pan and all the ShadowDOM that uses, I feel that is not compatible with React at all, is some kind of big Model that gets data from the dom and from some methods.
So I created a <input /> and I figuret out that you can't interact as normal as a website with that input, doesn't have the hability of delete normally the text and you can't use the atom-text-editor styles into it.
in another hand I try to create a Custom Web Component with React like:
<atom-text-editor
{...this.props}
mini
tabindex='-1'
class={`${this.props.className}`}
data-grammar='text plain null-grammar'
data-encoding='utf8'
/>
and it works with inheriting the styles, but I can't access to the content of the Shadow DOM, neither add eventHandlers like onChange (onKeyPress works btw), this is basically a problem more than React that Atom, but is as far as I went in the intention to create a View in Atom.
Another option could be add draft-js from Fb, but it's a crazy idea for create a simple input.
Any idea to solve one of both problems?
Thanks!
If you add a normal input in React with className='native-key-bindings' the input contains the nativew key bindings, and you can attach the eventHandlers there.
I'm using meteor & IronRouter, and trying to do some javascript-driven animations when the template is ready/rendered.
However, the IR hook events don't seem to fire when they should.
onBeforeAction and onAfterAction only seem to fire before the new page is rendered.
So there is no updated DOM to animate.
I also tried overriding the action, calling render myself, and then animating.
however, the DOM is still not updated... even using Meteor.defer
action: ->
this.render() # works ok
Meteor.defer ->
Template.SceneView.animateScene()
This was still getting called while the old template was present. I guess since Meteor is still updating async-ly, and so defer() didn't really defer...
So a hack around this is to call the animate function from the template itself, and then also use Meteor.defer to call the animation, so the DOM is updated.
The Blaze rendered() hook only fires once on template creation.
Separately there are some new ui_hooks in Blaze, but these seem to be before insert or deletes happen. I guess I could use this and take over the whole DOM manipulation but that seems like overkill for just playing some animations when a page is ready...
https://github.com/percolatestudio/transition-helper/blob/master/transition-helper.js
UPDATE. I found out about the afterFlush event
So it seems that having reactive templates, somehow makes defer timing not work.
Instead if I use the following, the DOM is all updated in time for the animation trigger.
action: ->
this.render()
Deps.afterFlush ->
Template.SceneView.animateScene()
You could also use plain css, if you have a package like animate.css in your app (http://daneden.github.io/animate.css/)
If you have this class animated bounceIn on the div or element thats at the top of your template it will also display an animation when the template comes into view.
I want the fullCalendar to redraw itself (all the structure and events) without reloading the page.
Scenario:
I am using a patch of fullCalendar that supports the Resource View. For a few user actions I want to change the resources. But I don't want to reload the page.
You could 'destroy' and 'render' the calendar as a whole. But that might be cumbersome - especially in older browsers.
$('#calendar').fullCalendar('destroy');
$('#calendar').fullCalendar('render');
If you don't actually need to render the table, but just rerender the events again, you could use the 'rerenderEvents' method:
$('#calendar').fullCalendar('rerenderEvents');
Hopefully this helps!
Use refetchResources: .fullCalendar( 'refetchResources' )
This will fetch and freshly re-render the resource data, per the FullCalendar documentation.
The problem:
"...The problem is that the calendar is initialized while the modal or div is not visible... " based on this link enter link description here
In my opinion, destroy is not needed in this case, only with render you can see the calendar.
My solution:
<script type="text/javascript">
$('#objectname').show(0,onObjectShow);
function onObjectShow(){$('#calendar').fullCalendar('render');}
</script>
You must to be sure that the object(container of calendar) is fully visible. For example, my first mistake was to put this code on "onClick" event, and click event is triggered before show the object container and has no effect.
Solution Based on this reference.
You can also redraw calendar on the fly using below command-
$(window).trigger("resize");