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/
Related
I have a fullCalendar plugin connected to Google Calendar and it shows all days, including days that don't have an event. I need it to show just days with an event. Is it possible?
I can't give a full answer since I am still chewing on this myself, but you might has well know what I've done. I work in a custom basic Day view called vertWeek, which looks like an agenda view. In dayRender, I have tried looping (.each) over fc-row and using freight trains of .has and .hasClass to try to hunt down those rows that have a td cell with .fc-container-event. The existence of this should be enough but no matter what I try I can't isolate a specific day-row. All rows get a green border or in the negative they get a red border.
I know my each works coz if I use .html on the index each row prints out its index number neatly. I don't have code handy, am away and tired, but go look for a post about squishing box calendar rows without events in them to get a gist of my efforts.
Hope this helps.
I want to make three changes to the fullcalendar Agenda view.
Remove start time from events, essentially I just want to display the title in each slot.
Change the height of timeslots, I have tried adjusting the contentHeight but that had no apparent effect.
Show 30min slots on Y-axis, I know about axisFormat option but it still only displays the full hours.
If anyone can give me any suggestions on how to accomplish these 3 changes?
Fullcalendar have rich callback set to configure:
You should use eventRender to modify it (hide title in already constructed is best way of it). Do not try construct new element and replace original
The same eventRender where you can add CSS or class and then change per event or direct from CSS
Agenda view does not have time slots at all, it is time-ordered list which does not represent proportion of time-lenght between events. If you wan't time based view, then try singe day view and set slotDuration as close as you want, even on the fly with buttons or keybind. + when setting slotDuration, if you wan't support adding events, change also snapDuration
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.
I am using a Ajax calendar control to pop up calendar from text box, want to display the week number in the calendar control itself, after user selects a week in the week mode (SelectionMode="DayWeek"), would like to display that week number in the text box. Preferably looking to implement using asp.net calendar control not jQuery.
Appreciate any assistance.
Thanks
Thought not to use the jquery, due to the ease and so many folks having solution out there i found the solution.
http://jsbin.com/eliki/16/
one of the issue is the the SQL server week (mostly in US) starts from Sunday, but iso8601Week starts from Monday, I did work around this by placing the weekend towards the end and disabling. Let me know what you think of the solution or have better solution out there.
http://jsbin.com/eliki/16/
Ujjwal
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).