VisJs Timeline - Weird item movement when it crosses hidden days - vis.js

I use the visjs timeline library to have a view of the work weeks. I used the hiddenDates option which allows me to hide Saturday & Sunday , but when I move an item through Saturday and Sunday to go from Friday to Monday, the item has a strange behavior.
By looking at the browser console I understand that Saturday and Sunday are well hidden on the screen but, that the item goes through them and will have a moment where (item.start & item.end = week end date ) which explains the weird behavior of the item.
How can I fix this problem to allow the item to have a smooth transition between Friday and Monday when moving please?
Here is a link to help you understand the problem. Try to move from Friday to Monday slowly with the item : (link is in the comments)

Related

How to Show events that span multiple days as individual events on each day that it spans?

I am using a fullcalendar.js Version 2.4.0 and fullcalendar spans long events I.e Events which are From 3rd May to 5th May are show as a long Event Streched all over, but what I need to show is to span multi - day Events as Seperate Event on Each day
For Example in Image attached Below A Event Children's Petting zoo is a 3 day Event, so it is shown 3 times seprately on these days which is giving it a clean look. I want to show in the same way.
How can Acheive this as given in Screenshort with Fullcalendar in All the Views.
See Screenshort of my calendar and point 2 which I want to do.

How to restrict time on Day view

on the Day view, the FullCalendar shows available times from 0 to 24.
I need to show only certain times (from 8 to 18).
How can I achieve this?
Thanks
In the Agenda Options you can set minTime and maxTime.
minTime - Determines the starting time that will be displayed, even when the scrollbars have been scrolled all the way up.
maxTime - Determines the end time (exclusively) that will be displayed, even when the scrollbars have been scrolled all the way down.

Want to Display 3 months at a time in FullCalendar (adam Shaw)

I want to be able to view 3 large months at a time using FullCalendar by Adam Shaw in my WP site. Possible? In other words, current month, plus two more. A 90 day events Calendar starting with the if the current date falls in a given month. Example, today is July 26, so display July, Aug, Sept.
Any ideas? I am calling it for use in a WP Events manager application.
Thanks,
Create three FullCalendar instances next to each other:
Set the defaultView for all three to 'month'.
Disable the previous and next buttons for two of the three calendar instances by manipulating their headers.
Disable any other views (like agendaDay, agendaWeek, etc.) in all calendar headers.
Whenever the viewDisplay callback is called on the calendar with the previous and next buttons, update the other calendar's date using gotoDate.
If you also need to use a week and/or day view, you may wish to set them up in a similar way, although I can imagine that would be confusing. You could also hide (using CSS) two of the three calendars when the user navigates to day or week view, and make them reappear when the user selects month view again. You probably need some CSS hocus pocus anyway to make it all look slick, but I think it should be doable.

FullCalendar Show events in two months?

I want to display two months in the calendar, namely July and August. All the other months should be hidden, for example the next month or previous month button should be disabled.
For example, if one event is span from 29th July to 3rd August that should be display in the same window of two months view.
Is this possible with FullCalendar?
Yes, using two calendars on one page; see http://jsfiddle.net/wijgerden/W77vt/ for an example using the recent FullCalendar v2.0.2 release.
This example still has buttons for previous, next, and today enabled (also showing how viewRender can be used to synchronise the two calendars). But you can remove those by changing right: 'prev,next today' to just right: '' on the cal0 configuration (in JavaScript).

Draggable UI in jQuery

I am currently working on a project where I need to go for draggable elements. There will be list of options e.g. Sunday, Monday, Tuesday... Saturday. Here user will be selecting any of them, say Sunday, Wednesday, Saturday. I need to display them in such a way the user can realign them in any Order.
E.g
Sunday
Saturday
Wednesday
or
Sunday
Wednesday
Saturday
And I need to get the display order in my Client/ Server side
I have decided to provided asp checkboxs for the parent list. When user checks any of the option, I need to populate it in another UI which would later helps me to realign the selected options. I have gone through few samples of draggable jQuery UI but not sure which will suit my requirement.
Can any one suggest the BEST?
I think this should be enough for you:
http://jqueryui.com/demos/draggable/#sortable
Also, I would suggest not using the checkboxes but adding another draggable component that marks the limit between used and unused days, like:
> Saturday
> Sunday
> **Below are ignored**
> ...
I think it may be more usable.
I think this project helps you
http://arshaw.com/fullcalendar/
Also you can find samples on these links
http://www.webresourcesdepot.com/wp-content/uploads/file/jquerydragdrop/
http://net.tutsplus.com/tutorials/javascript-ajax/drag-to-share/
http://tutorialzine.com/2009/09/shopping-cart-php-jquery/
http://www.isocra.com/2008/02/table-drag-and-drop-jquery-plugin/

Resources