I was building a scheduling app with react-big-calendar and I have noticed from React v17 onwards the resizable does not work because of the way react handles event changing.
this is the issue: https://github.com/jquense/react-big-calendar/issues/1785
I have seen in the comments that someone fixed this issue and made a pull request: https://github.com/jquense/react-big-calendar/pull/1857
My problem is that it is still not working, the resizable handles does not show up on the big calendar. I made sure I am using the latest version 0.33.6 and also tried to figure out where the user did the changes to events to fix the issue so that I can modify the package, but I noticed they both are completely different files, I wasn't able to find the event handlers in my node_modules/react-big-calendar so that I can make edits. So how do I fix this error? I cannot revert back to reactv16 because I must use v17 in my project.
Thanks in Advance! :)
Here's what my calendar looks like:
<DragAndDropCalendar
selectable
resizable
onEventDrop={onEventDrop}
onEventResize={resizeEvent}
localizer={localizer}
events={events}
onSelectSlot={handleSelect}
defaultView="week"
defaultDate={new Date()}
timeslots={2}
step={15}
popup
tooltipAccessor={(e) => e.title}
/>
</div>
Related
I’m new in coding and i couldn’t get how to fix the issue after i googled many times. The issue is i have a layout component which contains 4 different components. When i call a function in a function component it affects the others and the others re-render. Re-render is fine tho however my images are flickering on mobile browser. I would like to remove the flickering of the image loading. I’ve tried using React.memo() and useCallBack() but both of them didn’t work for me. I hope I made myself clear , thanks in advance
This is my app https://stackblitz.com/github/mithatercann/qrmenu
You are using what's its called "Prop Drilling". The better solution for your current problem is to implement some state management in your app, they are many third libraries for that, but for this instance and if your app is small you can use React Context API. If you're going to build big apps then I recommend implementing Redux.
I am using semantic-ui react to render a table of data. My requirement is that when the page is on mobile view, I hide certain columns. I tried using className="mobile hidden" on the Table.Cell element but this doesn't seem to work at all.
Then I tried using the Responsive component like below but I am getting an error. Am I missing something here? Unable to find anyone else having this issue ...
<Responsive as={Table.Cell} minWidth={Responsive.onlyMobile.minWidth}>
{record.datapoint}
</Responsive>
I get this error in the console when resizing the window...
index.js:2177 Warning: Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component. This is a no-op.
Please check the code for the Responsive component.
In fact, this is bug :( I've created PR that will solve described issue, see Semantic-Org/Semantic-UI-React#2421.
Code that you provided doesn't reproduce problem, the issue will be never occured with provided example. However, it exists :) The core problem is the unmount of Responsive component when it will be done by parent and setState() will be called on unmouted component. An example on codesandbox reproduces problem.
I have a page with SlickGrid on it and I wanted to add a FullCalendar to show date-based data in calendar form to augment the table (grid) display.
This worked fine (grid shows and calendar shows), but I noticed that I can no longer highlight and select text on the page after calling fullCalendar()
I identified root cause script as jquery.event.drag from ThreeDubMedia which is required for SlickGrid (it throws exception if jquery.event.drag lib is not loaded)
However, I'm having trouble finding a fix or even a hack to get this working without breaking other stuff (like SlickGrid functionality). I've been messing with FullCalendar options and even experimentally hacked some of the mousedown and selectstart handling code, but that didn't help. I also poked around with jquery.event.drag methods but I haven't had luck fixing the text selection issue while retaining the SlickGrid functionality that my users want (like being able to drag columns around and stuff).
So definitely some kind of integration issue but I'm not sure where the fault is.. it is weird that jquery.event.drag gives me zero problems until I actually create (render) the FullCalendar (by calling fullCalendar()), so maybe FullCalendar is to blame. It does proxy several events like mousemove, mouseup, and selectstart, but jquery.event.drag also can hijack events.. ugh.
Anybody have fix for this? Thanks.
Fiddle that shows the problem: http://jsfiddle.net/4kLf8jk5/
Clone of above Fiddle, but with call to .fullCalendar() commented out: http://jsfiddle.net/4kLf8jk5/2/
(These are minimalist examples but suffice to demonstrate the issue)
$("#calendar").fullCalendar();
$(document).unbind("dragstart");
Have you tried the 6pac repo?
This has a version of jquery.event.drag and ..drop updated for jquery version 2.x and 3.x and other small bugfixes. Might be worth a try before further investigation.
Version 3.0 of Slickgrid has recently been release that drops the jQueryUI dependency, including the drag and drop files mentioned above. This should make the drag and drop event hooks more consistent.
I am new to NativeScript technology, while developing application I need to debug the UI component like why this textview is not showing, layout is overlapping with another or find out other distortion in UI
Thanks for your time.
As mentioned in the other answer you can use the debug mode. I think things have possibly changed a bit since that answer, because you CAN to an extent debug the UI.
1) run the app in your emulator
tns debug android --bundle for example
this will output link such as chrome-devtools://devtools/bundled/inspector.html?experiments=true&ws=localhost:40000
2) open the link in chrome.
Use Elements tab to view the xml tree of elements. You can alter and add attibutes to elements. example: right click on an element, click "add attribute" and add color="blue", this should change the font color to blue for the element.
<Label color="blue"...
you can view the computed CSS on the right side. However i don't think you can edit/modify the css on the right side as in web development.
here are the docs
https://docs.nativescript.org/tooling/debugging/chrome-devtools
Normally the only reason a field is off is if you are using margin with a negative value or you are putting multiple items in a absolute or grid layout cell.
To debug you can use:
tns debug ios --emulator
or
tns debug android --emulator
However using that you would be having to debug the JS code that builds the screen. You are much better off looking at the xml and understanding how layouts work to understand exactly how it lays it out. Then trying to debug what mistake you are making.
I am developing an Ipad app with HTML5, Javascript/JQuery Mobile and Cordova/Phonegap. One of its features is to build and send an email, I am doing this using EmailComposer, the problem is that after the emailcomposer's screen runs and I return to the app, many of the list views (generated by Jquery Mobile) stop working.
Debugging I found that this happens when the function cordova.exec() runs. I tried to pass empty args, thought that maybe something were conflicting but the problem persists.
cordova.exec(null, null, "EmailComposer", "showEmailComposer", [args]);
Any idea of what could be causing this?
I don't think the issue is to do specifically with cordova.exec - that is just the method call for any native functionality.
Sounds more like part of your view is being redrawn and not getting enhanced by jQuery Mobile. You can trigger the create or refresh events on jQuery Mobile when you return to your app.
See the section on updating lists at the bottom of this page http://jquerymobile.com/test/docs/lists/docs-lists.html
I also faced the same problem, but now I solved it:
In "cordova.plist" write Key:EmailComposer and value:EmailComposer.
That's it!