I am using fullcalendar.io in my project, and although it's working great, there are some corner cases that makes the events display strangely. This is from an real life example in our project where there are drawn in a lot of parallell events:
You see here that on day number 2 from the left, three events are displayed as thin lines. If I change the calendar to day view, it look like this:
So we see those three events are pushed out to the right hand side even if they could have used more of the available space here.
I guess this might be a problem with the algorithm of how fullcalendar.io draws up the events, but have anyone else encountered this problem and found a solution for it?
Related
I am using React
I want to animate a series of chronological events occurring in network graph.
Requirements as follows;
Network graph displayed is statically drawn (i.e: nodes and edges never change)
Given a dynamic list of chronological events (which come from an api), animation shows the nodes in the network highlighted one after another for the given times
There is a play/pause slider to play/pause and scroll through the animation
The events are shown in a table and table rows can be clicked on to jump to the time in the animation they occured
Would also be nice to be able to play animation at 2x, 4x ... speeds
My questions
How can this be implemented in react?
Is there any library that can help me with this?
Or any similar project which may be a good starting point?
My thoughts
I am totally open to any open source solution as long as it can be implemented using react.
I am thinking of using d3 (though I have no prior experience). The following examples seem somewhat similar to what I want to do.
http://www.claudiobellei.com/2017/02/04/viznetworks/
https://observablehq.com/#stwind/raft-consensus-simulator
I'm hoping someone can help or point me in the right direction. I have been doing a lot of research but have not found anything that fits. I would like to make an area where you can drag and drop objects then connect them with arrows to show order.
I would like it so that you can drag and drop unlimited amounts of objects. Then be able to click on a "+" or something to then start to draw an arrow to the next object.
Quick summary for the overall project, I would like to eventually make a flowchart where it can branch off in two directions for decisions but have objects that I can drag out and then draw an arrow to the next object.
Libraries and articles
I found this article that I tried to follow, but I couldn't get it working, but this is a good representation of what I am looking for if it is modified to be done when clicking not just drawing.
I know about jsplumbtoolkit but I do not have that kind of money, also they do a lot more than what I would like to do.
I have seen the react-js-diagrams that seem to be what I want but have not been able to get it to work.
Image of what I would like
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'm working on timetable for school purposes. I receive time-ordered list of events and my goal is to draw them on timeline. The problem is that some event overlaps another (as shown on the picture below). What I want to do is to "pack" this events into the smallest space possible. This is single day with overlapping events.
First picture shows what I managed to do so far. As seen on picture, rectangles do not intersect each other and fill free space nicely. BUT I didn't manage to come up with reasonable algorithm for ordering.Second picture shows how events should be ordered.
This are two conditions, which make this problem different from classic packing problem:
Events has given x-coordinates (defined by beginning and end).
Events has fixed width, height is arbitrary.
This Problem reminds me a little bit of file system fragmentation problem. Easy solutions would be to implement one of the famous algorithm e.g. first-fit or best-fit.
But I guess you want the best solution. That's why I'd suggest implementing a backtracking algorithm. Be aware that I can cause long runtimes but I think this doesn't really matter in your context.
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: