| Issue 270: | Select time via mouse | |
| 2 people starred this issue and may be notified of changes. | Back to list |
Hi Adam, in order to select event time via mouse I've modified last source ( issue 269 ) with the new one attached. Instructions: $(document).ready(function() { var selcol = -1; var selOpts = { autoRefresh: true, filter: ".fc-rowcol", start: function(e) { $(".ui-selected", this).removeClass("ui-selected"); selcol = -1; }, stop: function(e) { }, selecting: function(e, ui) { } } $("#calendar .fc-agenda-body div.fc-rowcol").mousedown(function() { if (selcol < 0) { $(window).unbind('resize'); selcol = parseInt(this.className.match(/fc\-rowday(\d+)/)[1]); $("#calendar .fc-agenda-body").selectable ('option', 'filter', 'div.fc-rowtable div.fc-rowday' + selcol).selectable ('_init'); $(window).bind('resize', CalResize); } }); $("#calendar .fc-agenda-body").selectable(selOpts); </script> <style> #calendar .fc-agenda-body .ui-selecting { background: #66CC00; } #calendar .fc-agenda-body .ui-selected { background: #66CC00; color: #000; } </style> --- This new version works with DIV on time slot row and not with TABLE like the previous one. Hope this help. Nicola
Jan 19, 2010
(No comment was entered for this change.)
Status:
Duplicate
Mergedinto: 269 |
|
| ► Sign in to add a comment |
Error in IE. With IE selecting an event fires a DIV selection. In order to prevent this the following code istantiates the selectable element only at mousedown. Note: I use a <div id="test"></div> in my page to track selection events <script> var selcol = -1; var selOpts = { autoRefresh: true, filter: ".fc-rowcol", start: function(e) { $(".ui-selected", this).removeClass("ui-selected"); $("#test").text($("#test").text() + ">start"); }, stop: function(e) { $("#test").text("Stop selection."); $(this).selectable('destroy'); selcol = -1; }, selecting: function(e, ui) { } } $("#calendar .fc-agenda-body div.fc-rowcol").mousedown(function() { $("#test").text("MD"); if (selcol < 0) { selcol = parseInt(this.className.match(/fc\-rowday(\d+)/)[1]); selOpts.filter = 'div.fc-rowtable div.fc-rowday' + selcol; $("#calendar .fc-agenda-body").selectable(selOpts); } }); // $("#calendar .fc-agenda-body").selectable(selOpts); }); </script>