Issue 215: Create event by click/drag/unclick, giving it a specific start/end
Status:  Released
Owner:
Closed:  Aug 2013
Project Member Reported by adamrs...@gmail.com, Nov 27, 2009
similar to what google calendar lets you do
Jan 20, 2010
#2 fyr.w...@gmail.com
Very useful feature for us. We do need it!
Jan 20, 2010
#3 giric...@gmail.com
we have an urgent necessity in this opportunity
Jan 20, 2010
#4 Rolletar...@gmail.com
I need this fonction !
Jan 20, 2010
#5 evgeniya...@gmail.com
we urgently need
Jan 20, 2010
#6 sneed...@gmail.com
definately would make this plugin even more awesome. 
Jan 25, 2010
#7 lapan...@gmail.com
This feature highly increase the usability of the component.
Jan 26, 2010
#8 bibendus...@gmail.com
needed and starred ;)
Jan 30, 2010
#9 nicola.b...@gmail.com
Look at  issue 312 , I've introduced this function.

Feb 1, 2010
#10 fyr.w...@gmail.com
I had write a letter to Adam, bout still have not received any reply :(
Started to develop my own solution on the base of Nicola Biada work pieces.
Feb 5, 2010
Project Member #11 adamrs...@gmail.com
 Issue 312  has been merged into this issue.
Feb 5, 2010
Project Member #12 adamrs...@gmail.com
ok, i get it!
releasing 1.4.4 has exhausted me a little, so i can't say when i'll get to it. but i 
would look at nicola's work (the only person daring enough to take action!)
Feb 6, 2010
#13 fyr.w...@gmail.com
Adam, please, also take a look on my own solution, based on Nicola's.
Known bugs:
1. Dragging event
2. Resizing event
3. Creating event with dragging lower, uper then lower then initial event

Bugs 1-2 are connected with incorrect z-index of event that is been creating. So the
only thing to left is to set correct z-index for event so the dragging and resizing
the event will work.
fc.zip
104 KB   Download
Feb 7, 2010
#14 nicola.b...@gmail.com
Hi to all,
attached is my revision of fullCalendar 1.4.4 with patch "forceUpdateOnChange" and
"Create agenda event via mouse selection".
Examples inside.

For Adam: a possible solution could be to create DIV at runtime for timeSlot on day
start selection, as fyr try to introduce. Should be applicable?
fullcalendar.js
91.0 KB   View   Download
index.php
8.2 KB   Download
Feb 8, 2010
#15 fyr.w...@gmail.com
2Nicola:
Your attachments are just a part of example. I cannot run whole page.
Please, provide full version of your code.
Feb 8, 2010
#17 fyr.w...@gmail.com
I've fixed bugs, so I think that everything works now.
Please, take a look on a test example
fc.zip
104 KB   Download
Feb 8, 2010
#18 nicola.b...@gmail.com
Hi fyr,
nice job!
I think should be better to move time slot:
"<div id="07:30-08:00" class="fc-rowcol [...]"
to row level at:
"<div class="fc-rowtable" style="position: relative; [...]"
ie:
"<div id="07:30-08:00" class="fc-rowtable" style="position: relative; 

so it isn't redundant.

Or, as in my example and as Adam works, use TD fc-slot[xx] level and multiply by
slotMinutes.
Look at readAgendaTime function from my index.php for an example.

Feb 9, 2010
#19 fyr.w...@gmail.com
It's not so important.
The thing is that there's one bug left - switch between week & day view. 
Feb 9, 2010
#20 nicola.b...@gmail.com
Error adding event in day view?
Feb 9, 2010
#22 fyr.w...@gmail.com
Here is final version with time selection on agendaDay view mode.
fc.zip
105 KB   Download
Feb 9, 2010
#23 cmont...@renr.es
First good work fyr. Your version still have bugs, if you switch day view , create
add a event, switch again to agendaDay view and try create event there, then "you
have selected null". And version of fullcalendar is 1.4.3 ... could you upgrade to 1.4.4?
Feb 9, 2010
#24 fyr.w...@gmail.com
1. Bugs are connected with calendar rendering. After switching you have to wait appx
5 sec until all will be rendered correctly.
2. While I was merging a new version of calendar with version of code, provided by
Nicola for 1.4.3, I have noticed no significant changes.
May be in downloads there's an old version instead of new one or these versions are
already incompatible.


Feb 9, 2010
#25 gregori....@gmail.com
hello! how can i do to render an event by clicking on the day when month view is set?
Feb 15, 2010
#26 cmont...@renr.es
Fyr, another bug.., if default view is month ( defaultview: 'month' ) then you can't
create event in agendaWeek view.
Feb 15, 2010
#27 cmont...@renr.es
Solved.

Instead:
	$('.fc-button-agendaDay').click(function ()
	{
		initFeature();
	});

When we create the calendar:

viewDisplay: function(view)
{
        if (view.name == 'agendaWeek' || view.name == 'agendaDay')
	{
		initFeature();
	}
},
Feb 23, 2010
#28 sneed...@gmail.com
i took the liberty of integrating the last code that fyr posted into the 
fullcalendar.
now all that's required to enable it is to set the parameter "dragToCreate" to true 
and set the param onDragToCreate to whatever callback function you would like. By 
default it will make the title blank but you can update the event however you want in 
the callback function and call the renderEvent function. 

Here's an example:

var date = new Date();
var day = date.getDate();
var month = date.getMonth();
var year = date.getFullYear();
var currentEvents = [{title: 'Normal event',start: new Date(year, month, day, 1, 0), 
end: new Date(year, month, day, 5, 30),allDay: false}];

$(document).ready(function() {
	
	$('#calendar_box').fullCalendar({
		header: {
			left: 'prev,next today',
			center: 'title',
			right: 'month,agendaWeek,agendaDay'
			},
		editable: true,
		defaultView: 'agendaWeek',
		events: currentEvents,
		dragToCreate: true,
		onDragToCreate: function(calEvent){
					calEvent.title = 'test event';
					
$('#calendar_box').fullCalendar('renderEvent', calEvent, true);
				}
		});
	});

I'm working on integrating some sort of modal popup into the callback function so 
that it would work like google calendar, but it would be easy to integrate you're own 
save functionality.
It probably needs more in depth testing than i was able to do, but it's a good start.
integrated-example.zip
107 KB   Download
fullcalendar.js
89.6 KB   View   Download
Feb 24, 2010
#29 lapan...@gmail.com
2Adam:
Are there any expectations to integrate fyr's feature to calendar? Now it takes time
to integrate it in each new version of component. Just want to know the nearest
perspective.
Feb 24, 2010
#30 fyr.w...@gmail.com
Here's a new version of calendar merged with version 1.4.5. 
Fixed bug on 'month' view.
IMHO speed of switching between views has been increased.
fc.zip
106 KB   Download
Feb 27, 2010
#31 sneed...@gmail.com
here's a complete example with a built in jquery ui modal form. still working on 
upgrading to 1.4.5
integrated-example.zip
164 KB   Download
Mar 5, 2010
#32 chokko7...@gmail.com
in month view,how can i Create agenda event via mouse selection
Mar 5, 2010
#33 chokko7...@gmail.com
who can answer my question,in month view,how can i Create agenda event via mouse
selection?
Mar 6, 2010
#34 cmont...@renr.es
You can't with this enhancement. You must make your own code for that.
Mar 15, 2010
Project Member #35 adamrs...@gmail.com
slightly changing the name of this issue so it will encompass dragging-event-creation 
in both agenda views + month/basicWeek/basicDay. will implement both at the same time.
Summary: Create event by click/drag/unclick, giving it a specific start/end
Mar 15, 2010
Project Member #36 adamrs...@gmail.com
 Issue 377  has been merged into this issue.
Apr 1, 2010
#37 tushar.i...@gmail.com
Hi All,

We are using the code given by fyr.work in fc.zip
We modified the code to add an event and the steps to add event are.
1. click on grid at anyware 
2. move the mouse vertically 
3. leave the mouse you will get the model window which showing some options to add 
event
4. once you submit that event is is added on calender 

The problem we are facing is 

if we are adding the event in last week of march say 28 March 2010 it get added at 
28 April 2010 because in fc.zip given by fyr.work they are using start date in "new 
Date(y, m, d, h1, m1)" so it taking the current month as April.

so can you please help.

Thanks,
Tushar Mahajan
fctest.zip
177 KB   Download
Apr 9, 2010
#38 shawn.mc...@uc.edu
Tushar,

The following code should fix the problem you describe

var selectedDate = new Date(view.visStart.getFullYear(), view.visStart.getMonth(),
view.visStart.getDate(), 0, 0, 0);
selectedDate.setDate(selectedDate.getDate() + selcol);
var selectedDay = selectedDate.getDate();
var selectedYear = selectedDate.getFullYear();
var selectedMonth = selectedDate.getMonth();

h1 = selTime.match(/(\d+):(\d+)\-/)[1];
m1 = (selTime.match(/(\d+):(\d+)\-/))[2];
h2 = selTime.match(/\-(\d+):(\d+)/)[1];
m2 = (selTime.match(/\-(\d+):(\d+)/))[2];

var startDate = new Date(selectedYear, selectedMonth, selectedDay, h1, m1);
var endDate = new Date(selectedYear, selectedMonth, selectedDay, h2, m2);
calEvent = { title: 'Custom title', start: startDate, end: endDate, allDay: false };
Apr 9, 2010
#39 shawn.mc...@uc.edu
Another question in the original the height of the agenda body is set and overflow is
set to auto.  In the supplied revision, the agenda view takes up the entire 24 hours
- any reason for this change?
Apr 9, 2010
#40 shawn.mc...@uc.edu
So I somewhat answered my own question after a lot of digging: it appears that
getting rid of the scroll bars is part of what allows for the creation of events. 
Can anyone here do some recoding and allow for event creation along side of a
scrollable agenda view?
Apr 9, 2010
#41 shawn.mc...@uc.edu
Here's a new version that keeps the scroll bars.  Sorry, I'm not as good as marking
my modifications as others - but that is what a good file comparison tool is for,
right ;-)
fullcalendar_create.js
90.9 KB   View   Download
Apr 22, 2010
Project Member #42 adamrs...@gmail.com
here is a working version of these features (also checked in to github)

see examples/selectable.html for a demo + a rundown of the new options

everything is pretty stable and working well, but before i put this into an official 
release, i need to figure out if i want this functionality bundled by default. right 
now, it is coded into the core. it be nice if i could get it into a separate file (like 
gcal.js) as a sort-of plugin. it will probably be more trouble than its worth, so i'll 
probably just release as-is, but when 1.5 rolls around (w/ the official plugin system) 
this will likely be a separate module.

please write back if you find any bugs, or think the api should be different.

PS- this new feature won't "create" a new event for you, it will just trigger an event 
when a selection is made. you need to create the event yourself (like though the 
renderEvent method)
fullcalendar-selectable.zip
134 KB   Download
Apr 22, 2010
Project Member #43 adamrs...@gmail.com
PPS- special thanks to the folks at doodle.com for hurrying this feature along w/ 
their generosity.
May 4, 2010
#45 francois...@gmail.com
Hi guys,

View attached file.
I combined some weekcalendar functions with the fullcalendar script. It ends up
working quite well. The code is still in "draft" mode, but you can customize it as
you wish. Feel free to have a look (you can add an event by a click, edit it, and
remove it)
fullcalendar_addRemoveEv.rar
121 KB   Download
May 7, 2010
#46 anthony....@gmail.com
Hi,

When you edit several calendar events you have too much hours in select forms (start
& end). In fact, both select forms keep the old options.

So into the function called "setupStartAndEndTimeFields" you have to introduce the
following code at the beggining in order to clean the select forms before adding hours.

$startTimeField.html("");
$endTimeField.html("");

Hope is gonna be useful.


May 7, 2010
#47 sunniyeow
I just wanted to write in to say that Adam's fullcalendar-selectable.zip example
works great. We can now select a single or multiple days. Thanks!
May 7, 2010
#48 sunniyeow
Ok, after testing out the new "select" trigger quite a bit...Adam, it's interfering
with your "dayClick" trigger. I feel that we should keep the current "dayClick" as is
(used for a SINGLE day) and make the new "select" only fire for MULTIPLE selected days.
May 23, 2010
#49 karl....@gmail.com
Hi,
I noticed that there's a position issue with the background while dragging down a new
event IF you set the minTime/maxTime different than their default values.

For instance if minTime: 7 and maxTime: 20, the selectHelper doesn't display properly
under the mouse, but like 300px down.

Anyone fixed this already?

thank you
May 26, 2010
#51 nic.bour...@gmail.com
Yes. I have the latest version coming from gitHub. The issue is in the agenda.js 
file.  

The slotDateCell function doesn't look at the firstHour to calculate which row is 
used.

Modified it from	

function slotDateCell(date) {
		var col = dayDateCol(date);
		var row = Math.floor((date.getHours() * 60 + date.getMinutes()) / 
options.slotMinutes);
		return [row, col];
	} 

To

	function slotDateCell(date) {
		var col = dayDateCol(date);
		var row = Math.floor((date.getHours() * 60 + date.getMinutes()) / 
options.slotMinutes) - options.minTime * (60 / options.slotMinutes);
		return [row, col];
	}


Hopefully Adam will have the time to implement it and push it back.
May 31, 2010
Project Member #52 adamrs...@gmail.com
sunniyeow, karl.wnw, and nic.bourgoin... thanks for your observations. i have 
addressed these issues.

i have just officially released the selection functionality in v1.4.6.
docs: http://arshaw.com/fullcalendar/docs/selection/
demo: http://arshaw.com/js/fullcalendar/examples/selectable.html

NOTE: this functionality only deals with the selecting portions of time on the 
calendar. it does not automatically create an event. you'll need to do that yourself 
in the `select` callback (see examples/selectable.html). For those of you wanting an 
"add event" box to show up after a selection, 
[https://code.google.com/p/fullcalendar/issues/detail?id=162 this feature] is for you.

Please post related feature requests or bug reports as new issues. Thanks for 
everyone's patience while getting this release out.
Status: Fixed
Jun 25, 2010
#53 dumbif...@gmail.com
Greetings to adam and those many of you especially nicola for all your work in helping out fullcalendar. I have been using it for a while and I've found it really useful.
An issue i faced while using the select was:
When I click on the date in the month view, the function as specified in the select: function(start, end, allDay) {etc code i want to run here } is fired.

I am trying to achieve the following:
1) User clicks on a date on the month view
2) user gets sent to the agendaDay view on the date that he clicked via dayclick() and changeView and gotoDate.
3) User uses select to select time slots.
4) fire up the code i want to run.

Any advice is much sppreciated.

Regards,
Han
Jun 25, 2010
#54 Ioanno...@gmail.com
@dumbified

If I am not mistaken you can check the current view. So when select() is fired check if current view is agendaDay before executing your code. Same can be done for dayclick().

Regards Alexandros
Jun 25, 2010
#55 dumbif...@gmail.com
Hi alexandros,
I have tried that however it doesn't work. When I click on the date on the month view, it will be changed to the agendaDay and the code will still be executed even though it has just changed over to agendaDay view.
some code:
select: function(start, end, allDay) {
	alert($('#calendar').fullCalendar('getView').name);
	if($('#calendar').fullCalendar('getView').name == "agendaDay")
	{
		var title = prompt('Event Title:');
		if (title) {
			$('#calendar').fullCalendar('renderEvent',
				{
					title: title,
					start: start,
					end: end,
					allDay: allDay
				},
				true // make the event "stick"
			);
		}
		$('#calendar').fullCalendar('unselect');
		}
	},
Jun 26, 2010
#56 Ioanno...@gmail.com
Hello again,

To be honest I haven't used the new select functionality yet, but this is how I use to handle the dayClick events.
It seamed to me that checking the view before executing your code is the obvious thing to do in this case too.
Anyway, some ideas would be:
1.Try to initialize your calendar with selectable: false, and when you switch to the agendaDay then set selectable: true. However, checking in the documentation I didn't find a way to change the value of selectable after the calendar is initialized. If someone could contribute in this it would be great.
2.Once you click on a day, instead of changing the view, destroy the calendar and initialize it again with the day view. I know it sounds far fetch..

Hope I helped somehow.
Alexandros
Jul 14, 2010
#57 VonPhan...@gmail.com
francois2oo86,

I've just loaded your code and it is great stuff. Just what I was looking for.

Great job! I will use it as a guide to add exactly what I need which will be a drop down box loaded with pre-created events that can be added as well.


Feb 1, 2011
#58 paresh.s...@gmail.com
can i have dialog as shown in my attached file when i add new event in month view.
I dont want promt to get open, i want popup like thing.
dialog.jpg
406 KB   Download
May 8, 2011
#60 ahma...@gmail.com
to francois...@gmail.com

thank for you write 
but i find bug in fullcalendar_addRemoveEv.rar 

it is input action and 'esc' key -> auto save bug
and new version fullcalendar ..

plz reupload last your source 

May 8, 2011
#61 ahma...@gmail.com
to francois...@gmail.com

thank for you write 
but i find bug in fullcalendar_addRemoveEv.rar 

it is input action and 'esc' key -> auto save bug
and new version fullcalendar ..

plz reupload last your source 

Dec 16, 2011
#62 almi...@gmail.com
francois

how do you save events to database and render? 
You've commented eventRender function. Explain this moment please

eventRender : function(calEvent, $event) {
         /* if (calEvent.end.getTime() < new Date().getTime()) {
            $event.css("backgroundColor", "#aaa");
            $event.find(".wc-time").css({
               "backgroundColor" : "#999",
               "border" : "1px solid #888"
            });
         } */
      },
Mar 29, 2012
#63 i...@agoraenschede.org
Would it be possible to include to include the dragToCreate setting and  onDragToCreate callback available in the newest version of FullCalendar. (Or is there already a possibility there that I don't see). And if it is can someone tell me how to implement it?
Sep 16, 2012
#64 haydarda...@hotmail.com
I'm doing a calendar program. I want when I click on the link to go to the desired date. How do I make. If you have an idea I'd appreciate if you send an email to haydardarilmaz@hotmail.com.

Sep 16, 2012
#65 haydarda...@gmail.com
I'm doing a calendar program. I want when I click on the link to go to the desired date. How do I make. If you have an idea I'd appreciate if you send an email to haydardarilmaz@hotmail.com.

Aug 13, 2013
Project Member #66 adamrs...@gmail.com
(No comment was entered for this change.)
Status: Released
Labels: -Type-Enhancement Type-Feature
Apr 20, 2014
#67 rajparu2...@gmail.com
Hey guys great work. I am trying to use the full calendar to save the events to mysql database. I'm using the calendar in the community edition of webschool version 2. But I'm not able to store the events into database nor retrieve it from database please help. I'm doing as a part of my academic project and I'm running short of time. Please.