| Issue 215: | Create event by click/drag/unclick, giving it a specific start/end | |
| 30 people starred this issue and may be notified of changes. | Back to list |
similar to what google calendar lets you do
Jan 20, 2010
#2
fyr.w...@gmail.com
Jan 20, 2010
we have an urgent necessity in this opportunity
Jan 20, 2010
I need this fonction !
Jan 20, 2010
we urgently need
Jan 20, 2010
definately would make this plugin even more awesome.
Jan 25, 2010
This feature highly increase the usability of the component.
Jan 26, 2010
needed and starred ;)
Jan 30, 2010
Look at issue 312 , I've introduced this function.
Feb 1, 2010
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
Issue 312 has been merged into this issue.
Feb 5, 2010
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
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.
Feb 7, 2010
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?
Feb 8, 2010
2Nicola: Your attachments are just a part of example. I cannot run whole page. Please, provide full version of your code.
Feb 8, 2010
I've fixed bugs, so I think that everything works now. Please, take a look on a test example
Feb 8, 2010
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
It's not so important. The thing is that there's one bug left - switch between week & day view.
Feb 9, 2010
Error adding event in day view?
Feb 9, 2010
Here is final version with time selection on agendaDay view mode.
Feb 9, 2010
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
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
hello! how can i do to render an event by clicking on the day when month view is set?
Feb 15, 2010
Fyr, another bug.., if default view is month ( defaultview: 'month' ) then you can't create event in agendaWeek view.
Feb 15, 2010
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
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.
Feb 24, 2010
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
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.
Feb 27, 2010
here's a complete example with a built in jquery ui modal form. still working on upgrading to 1.4.5
Mar 5, 2010
in month view,how can i Create agenda event via mouse selection
Mar 5, 2010
who can answer my question,in month view,how can i Create agenda event via mouse selection?
Mar 6, 2010
You can't with this enhancement. You must make your own code for that.
Mar 15, 2010
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
Issue 377 has been merged into this issue.
Apr 1, 2010
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
Apr 9, 2010
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
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
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
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 ;-)
Apr 22, 2010
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)
Apr 22, 2010
PPS- special thanks to the folks at doodle.com for hurrying this feature along w/ their generosity.
May 4, 2010
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)
May 7, 2010
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
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
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
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
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
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
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
@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
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
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
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
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.
May 8, 2011
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
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
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
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
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
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
(No comment was entered for this change.)
Status:
Released
Labels: -Type-Enhancement Type-Feature
Apr 20, 2014
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.
Apr 20, 2014
The demo is here http://web-school.in/demo-version-2/ The files are here http://freecode.com/projects/web-school-community-edition |
|
| ► Sign in to add a comment |