I am using full calendar in that I need to handle both click and dblclick event on eventclick.
For that I did the following code.
Taking data from server and from json data :
function FormJosn(Data) {
var Json = [];
for (var i = 0; i < Data.length; i++) {
Json.push({
"id": Data[i].Appointment_ID,
"title": Data[i].F_Name + ' ' + Data[i].L_Name,
'start': Data[i].start,
'end': Data[i].End,
'allDay': false
});
}
Calander(Json);
}
and render full calender,
function Calander(Data) {
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
editable: true,
droppable: true,
drop: function (date, allDay) { // this function is called when something is dropped
// retrieve the dropped element's stored Event Object
var originalEventObject = $(this).data('eventObject');
// we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = $.extend({}, originalEventObject);
// assign it the date that was reported
copiedEventObject.start = date;
copiedEventObject.allDay = allDay;
// render the event on the calendar
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
},
select: function (start, end, allDay) {
SetAppointmentBookingDateTime(start);
calendar.fullCalendar('unselect');
},
editable: false,
disableResizing:false,
events: Data,
eventRender: function (event, element)
{
element.bind('click', function (event, element) {
var doubleClickOpportunity = 200, // Adjust this to whatever feels right
$elem = $(event.target),
clicker = $elem.data('clicker'); // Holder for the doubleclick setTimeout
if (clicker) {
// If there's a setTimeout stored in clicker, then this is a double click
clearTimeout(clicker);
$elem.data('clicker', '');
$elem.trigger('doubleclick');
} else {
$elem.data('clicker', setTimeout(function () {
$elem.data('clicker', '');
$elem.trigger('singleclick');
}, doubleClickOpportunity));
}
});
element.bind('singleclick', function (event, element) {
// I'm a single click!
window.location = "http://" + window.location.host + "/Hospital/Treatment/AddTreatment/" + event.id;
});
element.bind('doubleclick', function () {
// I'm a double click!
$(".Modify-Appointment").modal("show");
});
}
});
}
I have bind click and dblclick eventRender which will working fine but I am not getting data of the event as it get it on eventClick function.
I need those data to proceed further.
In order to pass data to jQuery's callback, as per the bind documentation, you should use the following signature:
.bind( eventType [, eventData ], handler )
So you must pass an object to the callback, like this:
element.bind('singleclick', { event: event, element: element }, function () {
// I'm a single click!
window.location = "http://" + window.location.host + "/Hospital/Treatment/AddTreatment/" + event.id;
});
Also note that as of jQuery 1.7, .on() is the preferred method over .bind()
Related
Can anyone help me I'm a newbie.
I have set up external events that are droppable in my calender.
My calender holds my events when I'm clicking on next/previous. But when I reload my page the events are gone.
what It's wrong in my javascript?
<script>
$(document).ready(function () {
/* initialize the external events
-----------------------------------------------------------------*/
$('#external-events .fc-event').each(function () {
// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
// it doesn't need to have a start or end
var eventObject = {
title: $.trim($(this).text())
// use the element's text as the event title
};
// store the Event Object in the DOM element so we can get to it later
$(this).data('eventObject', eventObject);
// make the event draggable using jQuery UI
$(this).draggable(
{
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
/* initialize the calendar
-----------------------------------------------------------------*/
var eventObject = {
title: $.trim($(this).text())
// start: '2016-03-04'// use the element's text as the event title
};
$('#calendar').fullCalendar(
{
header:
{
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
droppable: true,
events: eventObject,
// this allows things to be dropped onto the calendar
drop: function (date, allDay) {
// retrieve the dropped element's stored Event Object
var eventObject = $(this).data('eventObject');
// we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = $.extend({}, eventObject);
// assign it the date that was reported
copiedEventObject.start = date;
copiedEventObject.allDay = allDay;
// render the event on the calendar
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
$('#calendar').fullCalendar('refetchEvents');
// $('#calendar').fullCalendar( 'refetchexternal-events' ) ;
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
}
});
});
</script>
The drag and drop works fine on other browsers just firefox that has an issue.
I have read enough to know that Firefox has a different mechanism for drag and drop but nothing I found has helped
Tried implementing jsEvent.preventDefault(); as the commentor suggest here
but that did not change the behavior and Im not sure how to implement the marked as answer portion which does event.originalEvent.dataTransfer.setData('text/plain', 'anything');
Here is my drag and drop code:
setup draggable tr
$('#workOrdersTable tbody tr').each(function() {
var tds = $(this).children('td');
if (tds.length > 0) {
var workOrder = $.grep(workOrders, function(e) {
return e.woNumber == tds[0].innerText;
})[0];
if (typeof workOrder !== "undefined" || workOrder !== null) { // store the Event Object in the DOM element so we can get to it later
$(this).data('workOrder', workOrder);
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
}
}
});
How can I get this working in Firefox?
FullCalendar setup implementing drop
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: false,
droppable: true,
//edit existing
eventClick: function(calEvent, jsEvent, view) {
populateEvent(calEvent, true);
},
//create new
drop: function(date, jsEvent, ui ) {
//alert('jsEvent '+jsEvent);
jsEvent.preventDefault();
var workOrder = $(this).data('workOrder');
workOrder.title = workOrder.woNumber + ' ' + workOrder.account
workOrder.description = workOrder.problemDescription;
workOrder.start = date;
workOrder.end = moment(date).add(1, 'hour'); //change default so the start and end dont match
populateEvent(workOrder, false);
},
The issue was with setting the data onto the draggable row
var workOrder = $.grep(workOrders, function(e) {
return e.woNumber == tds[0].innerText;
})[0];
needed to be
var woNumberTemp = tds[0].textContent || tds[0].innerText;
var workOrder = $.grep(workOrders, function(e) {
return e.woNumber == woNumberTemp;
})[0];
Appearently for chrome tds[0].innerText is fine but firefox needs tds[0].textContent
I have used full calendar external dragging events for a topic assigning interface.Used ajax for updating the topic details to mysql db but ajax is not working.I am not getting the values in my controller.Checked the other questions here but didn't find a solution.Can any one help?
<link href='assets/fullcalendar/fullcalendar.css' rel='stylesheet' />
<link href='assets/fullcalendar/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='assets/fullcalendar/lib/moment.min.js'></script>
<script src='assets/js/jquery.js'></script>
<script src='assets/fullcalendar/lib/jquery-ui.custom.min.js'></script>
<script src='assets/fullcalendar/fullcalendar.min.js'> </script>
<script>
$(document).ready(function() {
/* initialize the external events
-----------------------------------------------------------------*/
$('#external-events .fc-event').each(function() {
// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
// it doesn't need to have a start or end
var eventObject = {
title: $.trim($(this).text()) // use the element's text as the event title
};
// store the Event Object in the DOM element so we can get to it later
$(this).data('eventObject', eventObject);
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
/* initialize the calendar
-----------------------------------------------------------------*/
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
droppable: true,
drop: function(date,event) {
// retrieve the dropped element's stored Event Object
var originalEventObject = $(this).data('eventObject');
// we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = $.extend({}, originalEventObject);
// assign it the date that was reported
copiedEventObject.start = date;
// render the event on the calendar
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
$.ajax({
url: '/addSchedule',
dataType: 'json',
type: 'post',
data: {event: event},
success: function(response){
console.log('response');
}
});
}
});
});
</script>
I was experiencing the same issue as #AVM, by using the same procedure he is using.
this is the solution to this problem:
var event_title = event.title;
var event_date = event._start.format();
var event_backgroundColor = event.backgroundColor;
var event_borderColor = event.borderColor;
$.ajax({
url: '../php/add_event.php',
type: 'post',
data: {
title: event_title,
date: event_date,
backgroundColor: event_backgroundColor,
borderColor: event_borderColor
},
success: function(response){
alert(response);
},
error: function(){
alert("error");
}
});
Note the:
var event_date = event._start.format();
This solved my problem, I hope it will solve yours.
Thanks
Mat
I'm currently working on a school project that requires a scheduling calendar as it's core function. However, I downloaded a third party java script calendar from the net and edit the java script codes accordingly to my project requirements.
But as a noob in asp.net, I do not know how to save the javascript object into my SQL server. Is there a guide or a website where I can learn how to do it ? Below is a set of my java script, so how do I use JSON with this code?
$(document).ready(function () {
/* initialize the external events
-----------------------------------------------c ------------------*/
$('#external-events div.external-event2').each(function () {
// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
// it doesn't need to have a start or end
var eventObject = {
title: $.trim($(this).text()) // use the element's text as the event title
};
// store the Event Object in the DOM element so we can get to it later
$(this).data('eventObject', eventObject);
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
/* initialize the external events
-----------------------------------------------c ------------------*/
$('#external-events div.external-event').each(function () {
// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
// it doesn't need to have a start or end
var eventObject = {
title: $.trim($(this).text()) // use the element's text as the event title
};
// store the Event Object in the DOM element so we can get to it later
$(this).data('eventObject', eventObject);
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
/* initialize the calendar
-----------------------------------------------------------------*/
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
select: function (start, end, allDay) {
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');
},
eventClick: function (calEvent, jsEvent, view) {
var title = prompt('Rename Event Title:');
calEvent.title = title;
// copiedEventObject.title = title;
alert('Altered Event : ' + calEvent.title);
// change the border color just for fun
$(this).css('border-color', 'red');
},
editable: true,
droppable: true, // this allows things to be dropped onto the calendar !!!
drop: function (date, allDay) { // this function is called when something is dropped
// retrieve the dropped element's stored Event Object
var originalEventObject = $(this).data('eventObject');
// we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = $.extend({}, originalEventObject);
// assign it the date that was reported
copiedEventObject.start = date;
copiedEventObject.allDay = allDay;
// copiedEventObject.title = 'abc'; //<<<Change the title
// render the event on the calendar
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
}
});
});
Convert your object JSON a String with JSON.stringify(object), and save it in the database, then when you access the data and recover this String, you send the client and to parse a JSON object with JSON.parse (string)
I have a problem of dragging and dropping external elements to a calendar (Fullcalendar) on a windows machine. All works fine on a linux, mac machine. But does not save to the database on a windows machine. What may be the problem??
jQuery(document).ready(function() {
/* initialize the external events
-----------------------------------------------------------------
*/
jQuery('#external-events div.external-event').each(function() {
// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
// it doesn't need to have a start or end
var eventObject = {
title: jQuery.trim(jQuery(this).text()) // use the element's text as the event title
};
// store the Event Object in the DOM element so we can get to it later
jQuery(this).data('eventObject', eventObject);
// make the event draggable using jQuery UI
jQuery(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
// page is now ready, initialize the calendar...
jQuery('#calendar').fullCalendar({
loading: function(bool) {
if (bool) jQuery('#loading').show();
else jQuery('#loading').hide();
},
events: "/roster/manage/ajax?part=shiftcalendar&nodeID="+placeid,
// put your options and callbacks here
header: {
left: 'prev,next today',
center: 'title',
right: 'prev,next today',
},
cache: false,
editable: true,
droppable: true, // this allows things to be dropped onto the calendar !!!
drop: function(date, allDay) { // this function is called when something is dropped
// retrieve the dropped element's stored Event Object
var originalEventObject = jQuery(this).data('eventObject');
// we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = jQuery.extend({}, originalEventObject);
// assign it the date that was reported
copiedEventObject.start = date;
copiedEventObject.allDay = allDay;
// render the event on the calendar
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
jQuery('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
// Call this function to store the date and time of this shift into a table
saveShift(originalEventObject,copiedEventObject);
},
eventDrop: function(event,dayDelta,minuteDelta,allDay,revertFunc) {
if (!confirm("Are you sure you want to change dates?")) {
revertFunc();
}
else {
// Our edit function for this shift
updateShift(event);
}
},
eventClick: function(event,revertFunc) {
if(!confirm("Are you sure you want to delete this "+ event.title +" shift?")) {
revertFunc();
}
else {
// Delete shift
deleteShift(event);
}
}
/*eventMouseover: function(event, jsEvent, view) {
jQuery.getJSON('/roster/manage/ajax', {part: "shiftcalendarpeople", shiftID: event.id }, function(data) {
if(data != null) {
var layer = "<div id='events_"+event.id+"'>";
jQuery.each(data, function(k, v) {
layer += "<span>"+v.user+" as "+v.role+"</span>";
});
layer += "</div>";
jQuery(this).append(layer);
}
else {
var layer = "<div id='events_"+event.id+"'><span>No people rostered.</span></div>";
jQuery(this).append(layer);
}
});
},
eventMouseout: function(event, jsEvent, view) {
jQuery("#events_"+event.id+"").remove();
}*/
})
});
Usually when something works on every machine except windows (or vice-versa) it's because of path issues. I see that you use a unix path in a variable
events: "/roster/manage/ajax?part=shiftcalendar&nodeID="+placeid
Maybe try using the windows style path "\roster\manage\ajax?part=shiftcalendar&nodeID="+placeid
It's a rough guess. It's what jumps to my eyes at first glance.