We Keep Coding

I can't seem to get resourceId on eventDrop and drop, im using resourceTimelineMonth and are trying to move them around

I can't seem to get resourceId on eventDrop and drop, im using resourceTimelineMonth and are trying to move them around.
If i try info.resourceId i get "undefined".
editable: true,
droppable: true,
eventResize: function (info) {
alert("Resize event: " + info.event.id + info.event.title + " end is now " + info.event.end.toISOString());
if (!confirm("Gem?")) {
info.revert();
}
SetEvent(info);
},
eventDrop: function (info) {
console.log('resourceId: ' + info.resourceId);
//alert(info + " Drop event: " + info.event.title + " was dropped on " + info.event.start.toISOString());
console.log(info.title);
//SetEvent(info);
},
drop: function (info) {
// is the "remove after drop" checkbox checked?
console.log("Drop event: " + info.resourceId);
//SetEvent(info);
}
Edit
On eventResize and eventDrop you can find the resource id under: info.event._def.resourceIds[0]
On drop you can find it under: info.resource._resource.id

On eventResize and eventDrop you can find the resource id under: info.event._def.resourceIds[0]
On drop you can find it under: info.resource._resource.id

You can also use event.getResources() so that you can get more information about the resource: id, title...
https://fullcalendar.io/docs/Event-getResources
For example:
eventDrop: function(info) {
var infoResources = info.event.getResources();
var resourceId = infoResources[0]._resource.id;
var resourceTitle = infoResources[0]._resource.title;
}

Add appointment on JQuery FullCalendar with double click

I'm fiddling around with JQuery Full Calendar and what I'd like to figure out with your help is adding an event to the calendar by Double Clicking. I wired up the double click event in the JQuery, however I am not exactly sure what to do with it. When I double click the calendar, it does display a popup window which is fine. I know how to send an event's details to the code behind. I guess my big issue is when the person double clicks, how do I bring up a form for them to fill out? I only have four fields and the all-day option to pass into Exchange via EWS. That side works just fine. So I need help figuring out how to do two things.
When they double click, bring up a form for them to add details
Send the information to the code behind - re-use the ajax call? Create a new one?
$(document).ready(function () {
initThemeChooser({
init: function (themeSystem) {
$('#calendar').fullCalendar({
themeSystem: themeSystem,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listMonth'
},
selectable: true,
selectHelper: true,
weekNumbers: true,
navLinks: true,
editable: true,
eventLimit: true,
events: <% =JsonEvent %>,
eventDrop: function (event, delta, revertFunc) {
if (!confirm("Are you sure about this change?")) {
revertFunc();
} else {
UpdateEvent(event);
$(this).fullCalendar( 'refetchEvents' );
}
},
eventResize: function(event, delta, revertFunc) {
alert(event.title + " changed end is now " + event.end.format());
if (!confirm("is this okay?")) {
revertFunc();
}
else
{
UpdateEvent(event);
$(this).fullCalendar( 'refetchEvents' );
}
},
eventClick: function(calEvent, jsEvent, view) {
alert('Event: ' + calEvent.title + '\nDate: ' + moment(calEvent.Start).format("MM-DD-YYYY") + '\nStart: ' + moment(calEvent.start).format("hh:mm:ss A") + '\nEnd: ' + moment(calEvent.end).format("hh:mm:ss A"));
$(this).fullCalendar( 'refetchEvents' );
// change the border color just for fun
$(this).css('border-color', 'red');
},
eventDoubleClick: function(calEvent, jsEvent, view) {
alert('Event: ' + calEvent.title);
alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
alert('View: ' + view.name);
// change the border color just for fun
$(this).css('border-color', 'red');
}
});
function UpdateEvent(event)
{
var data = {};
data.id = event.id;
data.starts = event.start;
data.ends = event.end;
data.subject = event.title;
$.ajax({
url: 'Calendar.aspx/UpdateEvent',
method: 'POST',
dataType: 'JSON',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(data),
success: function (response, type, xhr) {
var retVal = JSON.stringify(response);
},
error: function (xhr) {
window.alert('error: ' + xhr.statusText);
}
});
}
},
change: function (themeSystem) {
$('#calendar').fullCalendar('option', 'themeSystem', themeSystem);
}
});
});

Here's the approach you should take:
1) instead of the alerts, display a new div (maybe using CSS styling etc to make it effectively a modal dialog) containing your form.
2) I assume that Create needs to behave slightly differently to Update so I guess you'd need a slightly different ajax call as well.

full calendar background color selected disappear on prev/next button click

I have added some CSS classes in the day click event for giving some background color to the selected dates
However, when a user clicks the prev, next, or today buttons, added classes are removed and previous color selected are lost.How can I retain the selected color even on button click
$('#calendar1').fullCalendar({
locale: userlang,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
dayClick: function(date, jsEvent, view) {
debugger;
alert('Clicked on: ' + date.format());
component.set('v.selecteddate1', date.toISOString());
console.log('selected val--->'+component.get("v.selecteddate"));
//alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
alert('Current view: ' + view.name);
// change the day's background color just for fun
$(this).css('background-color', 'orange');
},
editable: true,
events: data,
eventClick: function(event,jsEvent, view) {
debugger;
//alert(event.url);
console.log('event url:'+event.url);
console.log('event starttime:'+event.StartDateTime);
//component.find("expdate1").set("v.selecteddate",event.StartDateTime);
alert('test'+view.name);
component.set()
},
eventMouseover: function(event, jsEvent, view) {
$(jsEvent.target).attr('title', event.title+' '+'Hora de inicio:'+new Date(event.start).toDateString()+' Hora de finalización: '+new Date(event.end).toDateString());
}
//alert('Hello'+paramvalueget);
});

Fullcalendar, want to show all events on dayclick its not showing up

I am using fullcalendar, once a user clicks on a date the events on that day should show up on the pop up.
Currently I have the list of the events with me , I am able to show the events on that day on calendar and make it clickable.
But now I want those events to show on dayclick which I am not able to do.
Below code shows the events on that day on calendar:
eventClick: function(event) {
$.colorbox({html:"<h1>"+event.title+"</h1><br><p>Tour
starts on :"+$.fullCalendar.formatDate(event.start,
'yyyy-M-dd')+"<br>Tour type :
<a href='http://reservations.valantech.com/order-
tour/"+$.fullCalendar.formatDate(event.start,'yyyy-M-
dd')+"/"+event.ID+"'>"+event.type+"</a></p>"});
},
Below code open a pop up when a date is clicked:
dayClick: function(date, allDay, jsEvent, view) {
if (allDay) {
alert('Clicked on the entire day: ' + date);
}else{
alert('Clicked on the slot: ' + date);
}
alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
alert('Current view: ' + view.name);
// change the day's background color just for fun
//$(this).css('background-color', 'red');
},
Now I want to merge these two basically.
Clicking the date should open a pop-up with a list of all available events for that date.
I tried to do :
dayClick: function(date, allDay, jsEvent, view) {
$('#calendar').fullCalendar('clientEvents', function(event) {
if(event.start <= date && event.end >= date) {
return true;
}
return false;
});
but it didnt worked for me.

Try this
dayClick: function(date, allDay, jsEvent, view) {
$('#calendar').fullCalendar( 'changeView', 'basicDay');
$('#calendar').fullCalendar( 'gotoDate', date );
};

It should be like this.
You can change criteria of return value if return true will return actual event and added to your array Array.
and finally you will got array Array variable with all events of that date.
Please check the condition as per your requirements.
dayClick: function(date, allDay, jsEvent, view) {
console.log(date);
$('#agenda_calendar').fullCalendar( 'changeView', 'month');
//$('#agenda_calendar').fullCalendar( 'gotoDate', date );
var array = $('#agenda_calendar').fullCalendar('clientEvents', function(event){
return ( event.start >= date && event.end < date ); // May be change
});
console.log(array);
});

Jquery FullCalendar Extend Start Date or End Date

I am using Jquery FullCalendar.
Here is the link of calender I am using : http://arshaw.com/fullcalendar/
I have a case where I have startdate and enddate.
Now if I extend startdate or enddate by dragging it.
How can I get the response event that was triggered when I dragged/extend the date?
For Example:
When I move the event from one date to another I use eventDrop. It gives me the days added or subtracted to the original dates.
I need the same solution for extending startdate or enddate.
Possibilities I am facing:
Original Dates : 2013-12-04 to 2013-12-07
When Extends : 2013-12-04 to 2013-12-10
OR
When Extends : 2013-12-01 to 2013-12-07
Here are the cases I am facing. How can I track that what event I performed in Calender and what parameters it pass ?

You can use eventResize
below is the example from offical site:
http://arshaw.com/fullcalendar/docs/event_ui/eventResize/
$('#calendar').fullCalendar({
events: [
// events here
],
editable: true,
eventResize: function(event,dayDelta,minuteDelta,revertFunc) {
alert(
"The end date of " + event.title + "has been moved " +
dayDelta + " days and " +
minuteDelta + " minutes."
);
if (!confirm("is this okay?")) {
revertFunc();
}
}
});

Jquery Fullcalender is providing alot of options where you play around wth your events , as per you requirement
Original Dates : 2013-12-04 to 2013-12-07
When Extends : 2013-12-04 to 2013-12-10
This is when you extend the event duration, to catch the event where you change the end date you can use the below code
eventResizeStart: function (event, jsEvent, ui, view) {
console.log('RESIZE START ' + event.title);
},
eventResizeStop: function (event, jsEvent, ui, view) {
console.log('RESIZE STOP ' + event.title);
},
eventResize: function (event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view) {
console.log('RESIZE!! ' + event.title);
console.log(dayDelta + ' days'); //this will give the number of days you extended the event
console.log(minuteDelta + ' minutes');
},
Original Dates : 2013-12-04 to 2013-12-07
When Extends : 2013-12-01 to 2013-12-07
This is when you pre-pone the event , then you can use the below code
eventDragStart: function (event, jsEvent, ui, view) {
console.log('DRAG START ' + event.title);
console.log(this);
},
eventDragStop: function (event, jsEvent, ui, view) {
console.log('DRAG STOP ' + event.title);
console.log(this);
},
eventDrop: function (event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view) {
console.log('DROP ' + event.title);
console.log(dayDelta + ' days'); //this will give the number of days you dragged before or after
console.log(minuteDelta + ' minutes');
console.log('allday: ' + allDay);
},
As per you comment above that if you want to restrict the user from dragging a event or resizing a event , then you can use eventDurationEditable , this is true by default
eventDurationEditable:false,