Calender using Material UI - reactjs

Could someone help me out in creating a calendar component using react and material UI. The calendar should be similar to the one as shown in the link https://react.rocks/example/react-big-calendar . I've checked the scheduler component for material UI but as per what I have understood, it is licensed. Can someone help me out in suggesting how I can start with the design part for the calendar. Thanks a lot in advance!

I have tried long time with this process and realized, we should not do that. It's painful and especially takes lots efforts, does not worth for the user requirements.
You can use another library like this.

Related

Can I use Joy UI with Material UI together?

I have a react application that uses Joy UI. I would like to use material UI as well. Can I use material UI and Joy UI together in a react app? If so how?
The official doc is live! Thanks Per Sunde for the fast info.
https://mui.com/joy-ui/guides/using-joy-ui-and-material-ui-together/
Yes, you can use Joy UI with Material UI (MUI), but you will have to implement a workaround, otherwise some components will throw an error and not work well or work at all.
siriwatknp updated the code and wrote a guide about how to use Joy UI and Material UI together. If you dont implement the fix described in the guide, then it will most likely fail when you try to use both libraries in the same project.
See the guide on how to use Joy and Material UI together here:
https://github.com/mui/material-ui/blob/master/docs/data/joy/guides/using-joy-ui-and-material-ui/using-joy-ui-and-material-ui.md
:::warning warning Note: Once Joy UI reaches component parity with Material UI, we recommend you to choose one or the other. Not only do they have a different design language (and therefore a different theme structure) but they would increase your bundle size as well as potentially create unnecessary complexities. :::
I believe they will post this guide on the official website soon, but I can only find the guide in their Github repo.
Update:
Guide is now on their official website:
https://mui.com/joy-ui/guides/using-joy-ui-and-material-ui-together/

Ant Design - How to wrap a Table into a Form.List in antd

everyone. I have a task UI like this pic. The project team is using React and Ant design.
This's first time i working with Antd so i don't know how shoudl i solve this task. I think i use a Table in a Form.List to display and handle use edit.
But i can't find any example code like that on anywhere. If you was solved problem like that, please show me a code sandbox link or any thing else.
Thanks for reading my problem.

React Table: Best Practices, Suggestions

I've been tasked with creating a dynamic table for our UI. We decided to use the tech stack of React/Redux and are trying to figure out the best way to develop:
Questions:
1) What, in your experience, has been the best tool to create a dynamic table that works well with action creators and user interactions?
a - Issue: Being able to sort and search without creating massive code
b - Issue: Being able to edit in row and delete in row
2) I've been playing with Material UI, Semantic UI, and others. Any thoughts on which one is easiest to customize
As always appreciate the help, sorry for the noob questions. I've been trying to code in Material UI, but it's a bit difficult to manage since I don't have much experience with it.
Did you try RC-Table? If not, I would recommend to give it a shot. RC components are the primary building blocks using which the entire ANT lib for React was built. RC components are majorly focused on various functional logic which is extended by ANT components. You can either try to use core RC-Table itself or ANT-Table to find if it eases your efforts. In our development, we consumed a few RC-blocks and it solved lots of our purpose. This has
Sorting without massive code (with their examples I believe)
Able to Edit cells and Delete rows.
I don't believe there exists a library that solves all purposes with all ease. Everyone has its own pros/cons. But you can give this RC/ANT a try if it would solve your needs. Nevertheless, referring RC blocks at any stage of REACT component development is worth a read.

TimePicker using Mobile Angular UI

UI Bootstrap (Angular Ui Team) has a nice looking TimePicker but I coundn't find similar in Mobile Angular UI. Am I missing something here? or any workaround?
Update:
What I'm asking here is that why TimePicker is not available (or Did I miss it? if I did, show me some code sample or link to a documentation) and Why Only the DatePicker is available in both platforms. I guess they are somehow derived from the same source (Bootstrap). Down voting is a good thing If I have asked something I shouldn't or simply a silly Question. What ever the reason for down voting I appreciate your comments about that. It helps me to improve my self. Thank you!
Answering my own question. :)
Nothing stops you mixing Mobile Angular UI & UI Bootstrap.

Creating charts with Netzke

Does anyone knows the way to create ext js charts with Netzke? I guess there is no such component right know, but maybe someone have an idea.
What are the basic steps to connect using Rails and EXT JS, without Netzke?
I have looked at that gist and this https://gist.github.com/1190511
But I still can't figure it out. Is there a chance to see, no matter how simple a working version of the simplest chart in the Demo app or anything else? I understand the EXT side but I am having a real problem in putting it together with Netzke. I know I am missing something really simple.
A chart component is too application-specific, but it's surely possible to create one using Netzke built-in client-server mechanisms. Here's a demo: http://variant.herokuapp.com (try selecting different dates on the calendar to see the charts updated on the fly). Here's a gist for the LineChart component used there: https://gist.github.com/4112061 - hope, it can give you an idea (Netzke 0.7.x).

Resources