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.
Related
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;
}
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);
});
I have a table in my website and when i hover over a link i create a tooltip, the issue is that when i move my mouse over the links quickly multiple tooltips will be displayed as seen in the screenshot below,
I need to have only one tooltip on screen at a time and remove it if the user is no longer hovering. I create the tooltips in side the success function of an ajax call so i will only display the tooltip if the controller returns a status of true. The code for this can also be found below. Any suggestions on how i can ensure only one tooltip is displayed at a time. Thank you for any help you can give.
function tooltip(){
$('#tblOrder').on('mouseenter', '#alarmsTooltip', function(event) {
var id = $(this).attr('value');
var statusResponse;
var selector = $(this);
$.ajax({
url: '<%=Url.Action("Alarms") %>',
type: 'POST',
data: {id: id},
dataType: "json",
success: function (Response) {
if(Response.status == true)
{
var alarmTrans = '<%=GetTranslation(TranslationType.Label, "Alarms.tooltip", "Alarms") %>';
var warningTrans = '<%=GetTranslation(TranslationType.Label, "Warnings.tooltip", "Warnings") %>';
var html = "<table border='1' style= 'border: 1px solid black; border-collapse: collapse;'> <tr><th>" + alarmTrans + "<img src='" + '<%=Url.Content("~/App_Themes/Shared/Icons/bullet_red.png")%>' + "' style='float: right' >" + "</th><th> " + warningTrans + "<img src='" + '<%=Url.Content("~/App_Themes/Shared/Icons/bullet_orange.png")%>' + "' style='float: right'>" + "</th></tr>";
$(selector).qtip({
content: {
text: html + Response.Response,
title: {
text: '<%=GetTranslation(TranslationType.Label, "Alarms and Warnings.tooltip", "Alarms and Warnings") %>'
}
},
position: {
target: 'mouse',
adjust: {x:5,y:5}
},
show: {
ready: true,
effect: function () {
$(this).slideDown();
}
},
style: {
//classes: 'qtip-dark'
classes: 'qtip-green'
},
hide: {
effect: function () {
$(this).slideUp();
}
},
api: {
beforeShow: function() {
$('.qtip:visible').not(this.elements.tooltip).qtip('hide').qtip('disable');
},
beforeHide: function() {
$('.qtip:visible').not(this.elements.tooltip).qtip('enable');
}
}
}, event);
}
}
});
});
};
Again thank you for any help.
Right now your function is called on the event mouseenter.
Create another event mouseleave with a function that aborts the ajax call with storedAjax.abort(). However for this to work you need to store the ajax call in a global variable first.
Store the AJAX call in a global variable
requestAjax = $.ajax({ ... });
On the top of the function tooltip() just do
if(requestAjax) requestAjax.abort();
and then hide all the tooltips and and then proceed with the rest of the code.
and Add
$("#tblOrder").mouseleave(function(){
$(this).qtip("hide");;
});
I am using jquery ui Dialog box to create multiple notes in my Web Application. So there is a add-note button which clicks to open a note (dialog box at center).
User can open multiple notes (dialogs) together and fill content save, delete, etc on each.
Problem arises when multiple notes are opened and I start deleting some randomly. So on deletion the positioning of the opened dialog gets affected. The opened dialogs after deletion of any start moving upwards on the screen.
I have been trying to solve this from quite some time. Plz help.
My JS:
function createNote(note, noteContent, newNote){
var noteDiv = $('<div> <textarea class="note-textarea" style="width:100%;background-color:#D3D3D3;"></textarea> </div>');
noteDiv.clone(true).attr("id", noteId)
.dialog({
modal : false,
draggable : false,
resizable : false,
open: function(){
$("#"+ noteId).find('textarea').val(noteContent);
$("#"+ noteId).find('textarea').css({
'height': $("#" + noteId).parent().height()
});
}, create: function(){
// Create Title Textfield inside note top bar
$("<input type = 'text' placeholder='Title' class='note-title'></input>").appendTo($("#"+ noteId).prev(".ui-dialog-titlebar").find('span'));
$("#"+ noteId).prev(".ui-dialog-titlebar").find('input').val(noteTitle);
if(!jQuery.isEmptyObject(note)){
createLastModifiedSpan($("#"+ noteId), lastModified);
}
},
buttons : [ {
text : "Save",
disabled: true,
click : function() {
......AJAX CALL to SAVE
}],
beforeClose: function(event, ui) {
if(confirm('Are you sure you want to delete this note?')){
$.ajax({
type: 'POST',
url: "/common/deleteNote.action",
data:
{
'note.id.operatorId':$('#operatorId').val(),
'note.id.noteId':noteId
},
success: function(data, textStatus, jqXHR){
if(data.result == 'success'){
alert('Deleted Successfully');
numberOfNotesCreated--;
}else
alert('Error in Deleting. Contact Admin');
},
error: function(data){
alert("Error in DB!");
}
});
}else
return false;
},
resize: function(event, ui) {alert('dskjfsf')},
position:[10,100]
});
$("#"+ noteId).dialog('open');
$("#" + noteId).parent().draggable()
.resizable();/*.position({
my: "center",
at: "center",
of: window
});*/
//Fire event on Either textarea or note title
$("#"+ noteId).find('.note-textarea')
.add($("#"+ noteId).prev('.ui-dialog-titlebar').find('.note-title')).keydown(function(event) {
if($(this).val() != '') {
toggleSaveButton($( "#" + noteId ), "enable");
}
});
if(newNote){
elementCount++;
numberOfNotesCreated++;
}
prevNoteId = noteId;
}
EDIT: If I add notes in sequence say 1, 2, 3, 4 and start deleting from the recently added like 4, 3, 2.. the positiong does not give a problem, however when I start deleting randomly 2, 1.. then the other notes postioning gets disturbed.
Found this on the jquery form which solved my problem :
https://forum.jquery.com/topic/bug-when-closing-one-dialog-within-multiple-stacked-dialogs
Put this in close function of the dialog:
var widget = $(this).dialog("widget"), height = widget.height();
widget
.nextAll(".ui-dialog").not(widget.get(0))
.each(function() { var t = $(this); t.css("top", (parseInt(t.css("top")) + height) + "px"); });
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()