Issue 312: Create AgendaDay event via mouse
Status:  Duplicate
Merged:  issue 215
Owner: ----
Closed:  Feb 2010
Reported by nicola.b...@gmail.com, Jan 30, 2010
Hi Adam,
in attach you can find a revised version of fullcalendar with creation of
AgenaaDay event via mouse selection.
This is possible with my previous patch that introduce DIV element for any
timeslot in AgendaView.

Hope this help

Nicola

Note: any modification in code in prefixed by "BC" keywords
fullcalendar.js
85.2 KB   View   Download
SelectViaMouse-1.png
2.0 KB   View   Download
SelectViaMouse-2.png
3.0 KB   View   Download
Jan 30, 2010
#1 nicola.b...@gmail.com
for coloring in selection:
	#calendar .fc-agenda-body .ui-selecting {
		background: #8ae234; /* #66CC00; */
	}
	#calendar .fc-agenda-body .ui-selected {
		background: #fcaf3e; /* #66CC00; */
		color: #000;
	}

Jan 31, 2010
#2 nicola.b...@gmail.com
Selection code:
---
var selcol = -1;
var selOpts = {
	autoRefresh: true,
	filter: ".fc-rowcol",
	start: function(e) {
		$(".ui-selected", this).removeClass("ui-selected");
console.log("Start selection");
	},
	stop: function(e) {
console.log("Stop selection.");
		$(this).selectable('destroy');
		selcol = -1;
	},
	selecting: function(e, ui) {
	}
}
$("#calendar .fc-agenda-body div.fc-rowcol").mousedown(function() {
	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);
	}
});

Jan 31, 2010
#3 nicola.b...@gmail.com
Now, I need some help from Adam (or anyone else) in order to integrate selection code
into fullcalendar plugin and in order to create specific events handler, ie: 
"selectionStart"
"selectionEnd"

Thanks 

Nicola

Feb 1, 2010
#5 nicola.b...@gmail.com
A little improvement, how to extract selected slot names:
var selOpts = {
	autoRefresh: true,
	filter: ".fc-rowcol",
	start: function(e) {
		$(".ui-selected", this).removeClass("ui-selected");
	},
	stop: function(e) {
        $(".ui-selected", this).each(function(){
          console.log($(this).closest('td').attr('class').match(/fc-slot(\d+)/));
		});
		$(this).selectable('destroy');
		selcol = -1;
	},
	selecting: function(e, ui) {
	},
	selected: function(e, ui) {
        	$(ui.selected).text('selected');
	}
}

Feb 2, 2010
#6 nicola.b...@gmail.com
Hi to all,
attached there's another version of the code to place in the
"$(document).ready(function() {" in order to activate selection.
This version extract start and end time from selection.

example-fcalendar-selectViaMouse.js
1.9 KB   View   Download
Feb 5, 2010
Project Member #7 adamrs...@gmail.com
nicola,
thank you very much for coding this! i will likely borrow from your code when i put 
this feature in the official release.

the more i think about it, the more it might be nice to have an actual event element 
expand/contract with the selection, to give the user the expectation that an event 
will be created once they let go of the mouse. google calendar does it this way.

i will keep you updated on this feature's progress. will do this by responding to the 
other thread (where this discussion originated... merging). thanks!
Status: Duplicate
Mergedinto: 215
Mar 5, 2010
#8 chokko7...@gmail.com
in month view,how can i Create agenda event via mouse selection

Apr 19, 2010
#9 marcin.m...@gmail.com
Hi Nicola.
Do you have this plugin/modification working with latest release ver. 1.4.5 from 21
Feb 2010? I would appreciate if you share it with me (and the others) if you got that
of course. I tried to modify the latest version to get custom slots coloured but with
no success.

Thanks in advance!