I'm working on a Rails app that has events in it, and I'd like to be able to show a timeline of events. There's an Event model, and events have a start_date and end_date.
I can show the events by date etc without any problem. However, what I'd like to be able to do is create a horizontal "timeline", similar to the network graph on Github. Basically I'd like to be able to plot a graph with lines from the start date to the end date, and for any given set of events I'd like the timeline on the top to start with the date of the earliest event and then span horizontally in even increments of time to the end date of the last event.
How would you accomplish something like that in HTML / JS? I believe I understand the server side of things enough to pull any needed data from the app, what I don't understand is how to make a view out of it. To be honest I'm not even sure where to start.
I really appreciate any feedback or suggestions on how to get started in tackling this. I realize this question is more open-ended than ideal, I'll be happy to try and make it more specific in response to comments.
try event_calendar, you may see some screen shots here and this is the railscast
HTH :)
Related
I'm projecting a calendar and, although a little bit familiar with PHP for the backend, I'm struggling with the front end which will be in Javascript.
I'm trying to keep things simple as I'm still in the learning process, so basically, the table is created using bootstrap/CSS and it shows the present weekdays from Monday to Sunday.
I'd like now to add some front end in order to draw the boxes when I click/drag the mouse over the cells. When done the script will save the start date/ end hour in a MySQL database.
The problem is, how can I draw those boxes?
Ways I was thinking how to do that:
Keep things simple: basically, I will not draw any boxes but simply color the background and the line of those cells selected on the even .onmousedown
Try the hard way: try something harder and better looking and explore better the world of libraries in JS. I was looking in JCanvas thing, but for my level, I still have to understand better how it works.
The problem then is how to pass the parameter of these boxes to a backend script that saves the start/end hour. Of course, I was thinking to give to every cell a specifical id with hour/date, so I think it'd be easy to recall them both for drawing the calendar event with the mouse and also to draw all the present events on the database when the table is loaded.
What can approach do you suggest me to take? Any input would be great!
Thank in advance
Luca!
PS: I'm not expecting full code or whatever, just doing some projects in order to learn more!
I think the first option will work great. Adding the background color and border on the selected cell will help in highlighting.
You'll also need some of the things listed below:
AJAX: To communicate with the back end script.
Events - Bubbling and Capturing: You don't really have to put the event on every cell but the whole table, you could capture the event target with event.target.
I have a high interest in creating my own event calendar/scheduler for my site and found Bootstrap Calendar, it has real potential. I looked at dhtmlxScheduler but its hard to customize the look, it has a lot of nice features though. I have a Fullcalendar now and I like the new Scheduler but I still want a more custom look and some custom functionally.
My JS/Jquery is limited so it makes it difficult to get a real picture of BS-Cal layout and unfortunately there seems to be little documentation other than comments in the code.
So my issue with BS-Cal is the event ordering/stacking in the week view.
The Question - Can the events be reordered in a per day list like the 2nd photo below.
So far - I see the offset class for the columns and the events but the events seem to be wrapped in a "row" div which forces a single "list" for the whole week rather than per day placement order left to right on the table.
Here is what I believe is happening:
This is what I'm hoping to accomplish:
I've just started exploring using svgs within rails. I want to dynamically update a gagejs with the created_at column on my Comment model.
Is this possible? For example, if the user hasn't created a comment in x amount of time the gage drops randomly between a certain range. It sounds like a fun problem to solve, i just would like to know that it is indeed solvable.
Thank you.
You can use setTimeout to run something after a delay and DOM to update things dynamically. The links give you some examples of each so you'd just need to tie them together.
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.
I was wondering if there was a simple way to make a topdown list calendar for a website. I don't want to use the google calendar. I would also want the calendar to show like the next 5 events and hide the rest until the 5 shown have already happened. If there is a way to do this with jquery I wouldn't mind doing that either.
Here's a good starting point:
http://www.javascriptkit.com/script/cutindex1a.shtml
Just about every layout for a calender structure, and then event-show limiting etc could be implemented by you at the end. At the least it'll give you a base with which to work from.
Hope that helps.