Horizontal day planner/scheduler (drag and drop) with angularJS - javascript

I'm looking for a solution that would allow me to make a horizontal drag and drop day scheuler. I have been looking at AngularJS UI-calendar's day view and Telerik Kendo UI Scheduler's day view, but there dosen't seem to be an option to flip it from vertical to horizontal. I want hours to be placed on the x-axis instead of the usual y-axis.
Am I correct in my assumption that neither solution would allow me to accomplish that? If so any suggetion for a workaround/another solution?

Just started looking at this myself. Looking at Telerik Kendo UI Schedule, they have a Timeline view that looks like it will fit a horizontal view.
http://demos.telerik.com/kendo-ui/scheduler/timeline

Related

Is it possible to use fullcalender slotEventOverlap option in the timeline view?

Is it is possible to use fullcalender slotEventOverlap option in a timeline view? I want to show the overlapping time.
I have used https://fullcalendar.io/docs/timeline-view
I have contacted fullcalernder support team and the solution is
"The slotEventOverlap setting does not apply to the timeline view because it doesn't allow events to overlap. You could make a custom timeline view if you need them to overlap."

fullcalendar Month View Issues

I'm trying to use FullCalendar in my new project but I can't find any information on how to do what I want. Has anyone done something similar or have any idea on how I can achieve this? My aim is to have a Month View of the calendar like this:
However, what ever I've tried I couldn't make the 2 slots visible in the Month View.
What is displayed within those 2 slots? You will probably have to make your own custom view for this.
https://fullcalendar.io/docs/custom-views

fullcalendar Make more emphasis in BusinessHours

It is possible to emphasize business hours in fullcalendar by changing the background of these cells so as to make them more visible?
It's not possible to set via js of fullcalendar, just via css.
there are two examples:
Is it possible to do alternating row background colours in FullCalendar?
FullCalendar highlight row
cheers
Edit
There is a solution; Background Events an example:
How to grey out non working day in agendaDay view with arshaw fullcalendar v2.3.0

Bootstrap Calendar order of events in week view

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:

Building a Timeline Grid like layout in Javascript?

I am trying to create a Timeline Grid for adding and managing tasks at specific times(seconds) on a timeline. Is there a way to be able to create such a timeline Javascript/jquery?
What I am trying to do it have a 0.5 sec. intervals on the timeline. Every item has a start and an end range on the timeline. The items can be draggable to change starting and ending range and also resizeable. Here is a sample mochup I have built:
Any suggestions or solutions will be highly appreciated.
Thanks,
Praney
Have a look at the chap links plugin timeline.
http://almende.github.io/chap-links-library/timeline.html
In Particular these demos
http://almende.github.io/chap-links-library/js/timeline/examples/example13_grouping.html
http://almende.github.io/chap-links-library/js/timeline/examples/example15_mobile.html
Iv used this plugin before to make a management system, adding editing, drag between groups.

Categories

Resources