I have to create small simple calendar and attendance list with React and Material-UI. The problem is I am new to React and programming overall so I don't know how to start :/. I know I am rushing my learning process but I recently gain an opportunity to start a practice job in software company and I want to make my best so they can offer my a job.
I have to do following:
Create list with workers(attendance list)
Create a Calendar
When I click on a name, calendar shows if that person was present or not
When I click on a date, calendar shows a name, entry and leave time
Worker's list won't be hard but calendar will :/ I don't ask you to do this. I would appreciate if you would show me the hints and maybe few lines of code.
ps. Only react, js, html and css. UI should be based on Maetrial Design. No jQuery or other frameworks.
Thanks
You can refer to the existing model.
react-big-calendar、react-event-calendar....
You can get them on https://www.npmjs.com/ .
Yes there are number of Material Design widgets. You can check at:
http://www.material-ui.com/#/components/date-picker
If you click on the grey heading of each example- it will show you the equivalent React.js code.
Related
How do they do this? I use React.JS and hooks and have online ordering set up, but I wish to do a similar thing where I can style the UI depending on the restaurant.
You can see in the links before, all the online ordering layout is similar but the UI is different for each one.
Thanks
These look like templates to me. You will need some kind of Admin interface from where a user can select the template, as well as information like brand, logo, menu for his website.
Think of something like WordPress, where we select or install a theme for our website and then set up the rest of the website by adding logo, items etc.
So you will definitely need a backend for this to store these values for the individual customers into the database.
You will also need to store the domain name mapped to each template somewhere.
Excellent answer from #vaibhavmande. That is in fact how we do it. (I'm the mobi2go CTO). Here's another sample : https://ghostytoasty.mobi2go.com/. At a basic level you can customize your theme and layout, but you can also customize CSS for each brand. On top of that we actually have a fairly comprehensive javascript framework so orders can be added to a basket without a roundtrip to the server. In some complicated cases we have custom javascript as well (this gives great power but can leave you open to certain bugs). Lots of snapshot testing with https://www.cypress.io/ helps. We're a proud NZ based company but have offices in Australia, North America and Europe. We're also hiring so if you want to learn it all first hand : https://mobi.bamboohr.com/jobs :)
I'm currently working on a project that requires building a web page with a Calendar.
The Calendar should suppport booking (which means positioning boxes within the Calendar that span on a number of cells)
I built something simple using css grid, but later on I found out the customer uses IE11.
I tried using AutoPrefix to make the grid compatible, but it messed it up even worse and I think I'll waste more time adjusting then just using something other than grid.
I'm about to scrap my design and just go old school with <table> but before I do that, I wanted to ask for recommendations. Is there a better solution?
This is what it should look like:
Background
I am tasked with developing the front-end to an analytics product that presents the information to the user in a customizable dashboard like the one used by Google Analytics:
- Dashboard is comprised of draggable widgets arranged in a grid layout
- Widgets have a drag handle which can be clicked by the user to start dragging
- Widgets can be re-ordered by dragging and dropping the widget
Question
Part 1. Using jQuery (or any other open source Javascript API) can anyone explain to me how such a feature is implemented, from a high level overview.
Part 2. Can you recommend any resources for me to read that may be relevant to implementing this feature, or any foreseeable related features? (books, links, api docs, tutorials)
EDIT This one looks even better and more maintained! GRID by UberVU
Next one on the list is gridster.js
PS: I know this is an old thread but since this question is the first hit in Google I think its worth listing some newer libraries.
You can easily implement this.
You will get required info from
http://net.tutsplus.com/tutorials/javascript-ajax/inettuts/
and
http://james.padolsey.com/javascript/inettuts-with-cookies/
First what comes to head is jQuery UI.
Use HTML 5
http://html5doctor.com/native-drag-and-drop/
You can find a lot of info here:
http://jqueryui.com/demos/draggable/
Use jQuery, and get on the Demo & Doc page to see how D&D is being used.
http://jqueryui.com/demos/draggable/
http://jqueryui.com/demos/droppable/
If you wanna dive into a Widget Page/Dashboard architecture, and would like to see how others did it, take a look at Omar AL Zabir's book
http://www.amazon.com/Building-Web-2-0-Portal-ASP-Net/dp/0596510500/ref=ntt_at_ep_dpt_1
I am pretty sure this one is going to make you happy!
http://net.tutsplus.com/tutorials/javascript-ajax/inettuts/
I am developing a search form which displays a number of categories and sub-categories. The client has requested that I do not use cascading dropdowns but to display radiobuttons instead so that the user can see the top level categories at a glance.
I had a bit of a look around for any javascript plugins that might give me a head start and save me from having to write all of the code from scratch but didnt come up with too much.
Can anyone suggest a good plugin that will allow me to display a radio button list in a hierarchical collapsible tree structure?
Cheers,
Tristan
Solution
I ended up using this plugin and adapting it to my own needs -> http://code.google.com/p/checkboxtree/
There is a great jQuery plugin called jsTree.
http://www.jstree.com/
I personalize it for my needs as well.
What I want to achieve is as follows:
For example, there is a symbol which represents a table on a web page, a user can drag this element to any place on the web page, when the user looses the cursor, a dialogue box will pop up to ask the user to input values of attributes, for example,the number of columns, the number of rows, after the input, the corresponding table will come out at the place where the user chose. Of course, the symbol which represents a table is still at the original place. It is like a web version of dreamweaver. How to do this with Javascript?
If your question is how to start researching this feature I'd start with:
JQuery to get started with fancy yet easy javascript functionality
JQuery UI: Draggable, Dialog, etc
To actually develop the feature, if you don't know where to start, start small. Create a very basic web page with maybe just an icon and a button and then write some javascript to do something minor like display a dialog and show the result. Slowly start adding things like dragging something around, etc.
The JQuery UI stuff has lots of demos that you can start out with as a base to start customizing.
Warning: The first time I hit the JQuery UI Demos page I wasted at least a couple of days playing with all their cool stuff. It's so easy because the source is right there and you can also see it working in the browser on the demo page.
Did you look at the jQuery UI demonstration pages? The simple photo manager demo contains all the major pieces you'll need: Dragging an item, handling the drop event, doing something custom on drop. The revert demo may also be of interest
Begin by defining the requirements of your project. Break it down into smaller tasks and milestones. Then some learning and research on what javascript and frameworks like jquery can provide. Also check for existing solutions or components that you may be able to use and reduce your development efforts.