Add delete update change appointment

[MarkkParticipant]

I cannot add, delete or change a appointment, $(“#log”).html work, please, but I miss a thing but what ?

$(document).ready(function () {

// prepare the data
var source =
{
dataType: ‘json’,
dataFields: [
{ name: ‘id’, type: ‘string’ },
{ name: ‘status’, type: ‘string’ },
{ name: ‘Details’, type: ‘string’ },
{ name: ‘FirstName’, type: ‘string’ },
{ name: ‘TicketNumber’, type: ‘string’ },
{ name: ‘style’, type: ‘string’ },
{ name: ‘calendar’, type: ‘string’ },
{ name: ‘start’, type: ‘date’, format: “yyyy-MM-dd HH:mm” },
{ name: ‘end’, type: ‘date’, format: “yyyy-MM-dd HH:mm” }
],
id: ‘id’,
url: ‘data.php’,
cache: false,
addrow: function (rowid, rowdata, position, commit) {
// synchronize with the server – send insert command
var data = “insert=true&” + $.param(rowdata);
$.ajax({
dataType: ‘json’,
url: ‘data.php’,
data: data,
cache: false,
success: function (data, status, xhr) {
// insert command is executed.
commit(true);
},
error: function (jqXHR, textStatus, errorThrown) {
commit(false);
}
});
},
deleterow: function (rowid, commit) {
// synchronize with the server – send delete command
var data = “delete=true&” + $.param({ id: rowid });
$.ajax({
dataType: ‘json’,
url: ‘data.php’,
cache: false,
data: data,
success: function (data, status, xhr) {
alert(“Record successufully deleted”);
commit(true);
},
error: function (jqXHR, textStatus, errorThrown) {
commit(false);
}
});
},
updaterow: function (rowid, rowdata, commit) {
// synchronize with the server – send update command
var data = “update=true&” + $.param(rowdata);
$.ajax({
dataType: ‘json’,
url: ‘data.php’,
cache: false,
data: data,
success: function (data, status, xhr) {
alert(“Record successufully updated”);
// update command is executed.
commit(true);
},
error: function (jqXHR, textStatus, errorThrown) {
commit(false);
}
});
},
};
var adapter = new $.jqx.dataAdapter(source);
$(“#scheduler”).on(‘bindingComplete’, function (event) {
var args = event.args;
console.log(“bindingComplete is raised”);
});
var adapter = new $.jqx.dataAdapter(source);
$(“#scheduler”).jqxScheduler({
// date: new $.jqx.date(2016, 11, 23),

width: “100%”,
height: 800,
source: adapter,
rowsHeight: 40,
showLegend: true,
ready: function () {
$(“#scheduler”).jqxScheduler(‘ensureAppointmentVisible’, ‘id1’);
},
// called when the dialog is craeted.
editDialogCreate: function (dialog, fields, editAppointment) {
fields.timeZoneContainer.hide();
},

localization: {
// separator of parts of a date (e.g. ‘/’ in 11/05/1955)
‘/’: “/”,
// separator of parts of a time (e.g. ‘:’ in 05:44 PM)
‘:’: “:”,
// the first day of the week (0 = Sunday, 1 = Monday, etc)
firstDay: 1,
days: {
names: [“Dimanche”, “Lundi”, “Mardi”, “Mercredi”, “Jeudi”, “Vendredi”, “Samedi”],
namesAbbr: [“Dim”, “Lun”, “Mar”, “Mer”, “Jeu”, “Ven”, “Sam”],
namesShort: [“Di”, “Lu”, “Ma”, “Me”, “Je”, “Ve”, “Sa”]
},
months: {
names: [“Janvier”, “Février”, “Mars”, “Avril”, “Mai”, “Juin”, “Juillet”, “Aout”, “Septembre”, “Octobre”, “Novembre”, “Decembre”, “”],
// abbreviated month names
namesAbbr: [“Jan”, “Fev”, “Mar”, “Avr”, “Mai”, “Jun”, “Jul”, “Aou”, “Sep”, “Oct”, “Nov”, “Dec”, “”]
},
AM: [“AM”, “am”, “AM”],
PM: [“PM”, “pm”, “PM”],
eras: [
{ “name”: “A.D.”, “start”: null, “offset”: 0 }
],
twoDigitYearMax: 2029,
patterns: {
},
agendaViewString: “Agenda”,
agendaAllDayString: “Toute la journée”,
agendaDateColumn: “Date”,
agendaTimeColumn: “Heure”,
agendaAppointmentColumn: “Description”,
backString: “Arrière”,
forwardString: “Avancé”,
toolBarPreviousButtonString: “Avant”,
toolBarNextButtonString: “Prochain”,
emptyDataString: “Auncune données”,
loadString: “Loading…”,
clearString: “Clear”,
todayString: “Aujourd’hui”,
dayViewString: “Jour”,
weekViewString: “Semaine”,
monthViewString: “Mois”,
timelineDayViewString: “Timeline Day”,
timelineWeekViewString: “Timeline Week”,
timelineMonthViewString: “Timeline Month”,
loadingErrorMessage: “The data is still loading and you cannot set a property or call a method. You can do that once the data binding is completed. jqxScheduler raises the ‘bindingComplete’ event when the binding is completed.”,
editRecurringAppointmentDialogTitleString: “Modifier Rendez-Vous récurrent”,
editRecurringAppointmentDialogContentString: “Modifier seulement cette occurrence ou les séries?”,
editRecurringAppointmentDialogOccurrenceString: “Modifier Occurrence”,
editRecurringAppointmentDialogSeriesString: “Modifier les Séries”,
editDialogTitleString: “Edit Rendez-Vous”,
editDialogCreateTitleString: “Créer Rendez-Vous”,
contextMenuEditAppointmentString: “Modifier Rendez-Vous”,
contextMenuCreateAppointmentString: “Créer Rendez-Vous”,
editDialogSubjectString: “Suject”,
editDialogLocationString: “Adresse”,
editDialogFromString: “De”,
editDialogToString: “À”,
editDialogAllDayString: “Toute la journée”,
editDialogExceptionsString: “Exceptions”,
editDialogResetExceptionsString: “Reset en sauvegardant”,
editDialogDescriptionString: “Description”,
editDialogResourceIdString: “Technicien”,
editDialogStatusString: “Status”,
editDialogColorString: “Couleur”,
editDialogColorPlaceHolderString: “Choisir Couleur”,
editDialogTimeZoneString: “Time Zone”,
editDialogSelectTimeZoneString: “Choisir Time Zone”,
editDialogSaveString: “Sauvegarde”,
editDialogDeleteString: “Effacer”,
editDialogCancelString: “Cancel”,
editDialogRepeatString: “Repéter”,
editDialogRepeatEveryString: “Repéter chaque”,
editDialogRepeatEveryWeekString: “semaine(s)”,
editDialogRepeatEveryYearString: “année(s)”,
editDialogRepeatEveryDayString: “jour(s)”,
editDialogRepeatNeverString: “Jamais”,
editDialogRepeatDailyString: “Journalier”,
editDialogRepeatWeeklyString: “Hebdomadaire”,
editDialogRepeatMonthlyString: “Mensuel”,
editDialogRepeatYearlyString: “Annuel”,
editDialogRepeatEveryMonthString: “Mois(s)”,
editDialogRepeatEveryMonthDayString: “Jour”,
editDialogRepeatFirstString: “Premier”,
editDialogRepeatSecondString: “Deuxième”,
editDialogRepeatThirdString: “Troisième”,
editDialogRepeatFourthString: “Quatrième”,
editDialogRepeatLastString: “dernier”,
editDialogRepeatEndString: “Fin”,
editDialogRepeatAfterString: “Après”,
editDialogRepeatOnString: “On”,
editDialogRepeatOfString: “de”,
editDialogRepeatOccurrencesString: “occurrence(s)”,
editDialogRepeatSaveString: “Sauvegarde Occurrence”,
editDialogRepeatSaveSeriesString: “Sauvegarde Series”,
editDialogRepeatDeleteString: “Effacer Occurrence”,
editDialogRepeatDeleteSeriesString: “Effacer Séries”,
editDialogStatuses:
{
free: “En attente”,
tentative: “En cours”,
busy: “Reporté”,
outOfOffice: “Terminé”
}
},
resources:
{
colorScheme: “scheme05”,
dataField: “calendar”,
source: new $.jqx.dataAdapter(source)
},
appointmentDataFields:
{
from: “start”,
to: “end”,
id: “id”,
description: “Details”,
location: “FirstName”,
subject: “TicketNumber”,
style: “style”,
status: “status”,
resourceId: “calendar”

},
view: ‘agendaView’,
views: [
{
type: ‘agendaView’,
text: “Agenda”
},
{
type: ‘dayView’,
text: “Jour”
},
{
type: ‘weekView’,
text: “Semaine”
},
{
type: ‘monthView’,
text: “Mois”
}
],
$(“#scheduler”).on(‘appointmentDelete’, function (event) {
var args = event.args;
var appointment = args.appointment;
$(“#log”).html(“appointmentDelete is raised”);
});
$(“#scheduler”).on(‘appointmentAdd’, function (event) {
var args = event.args;
var appointment = args.appointment;
$(“#log”).html(“appointmentAdd is raised”);
});
$(“#scheduler”).on(‘appointmentDoubleClick’, function (event) {
var args = event.args;
var appointment = args.appointment;
// appointment fields
// originalData – the bound data.
// from – jqxDate object which returns when appointment starts.
// to – jqxDate objet which returns when appointment ends.
// status – String which returns the appointment’s status(“busy”, “tentative”, “outOfOffice”, “free”, “”).
// resourceId – String which returns the appointment’s resouzeId
// hidden – Boolean which returns whether the appointment is visible.
// allDay – Boolean which returns whether the appointment is allDay Appointment.
// resiable – Boolean which returns whether the appointment is resiable Appointment.
// draggable – Boolean which returns whether the appointment is resiable Appointment.
// id – String or Number which returns the appointment’s ID.
// subject – String which returns the appointment’s subject.
// location – String which returns the appointment’s location.
// description – String which returns the appointment’s description.
// tooltip – String which returns the appointment’s tooltip.
$(“#log”).html(“appointmentDoubleClick is raised”);
});
$(“#scheduler”).on(‘cellClick’, function (event) {
var args = event.args;
var cell = args.cell;

$(“#log”).html(“cellClick is raised”);
});
$(“#scheduler”).on(‘appointmentChange’, function (event) {
var args = event.args;
var appointment = args.appointment;
// appointment fields
// originalData – the bound data.
// from – jqxDate object which returns when appointment starts.
// to – jqxDate objet which returns when appointment ends.
// status – String which returns the appointment’s status(“busy”, “tentative”, “outOfOffice”, “free”, “”).
// resourceId – String which returns the appointment’s resouzeId
// hidden – Boolean which returns whether the appointment is visible.
// allDay – Boolean which returns whether the appointment is allDay Appointment.
// resiable – Boolean which returns whether the appointment is resiable Appointment.
// draggable – Boolean which returns whether the appointment is resiable Appointment.
// id – String or Number which returns the appointment’s ID.
// subject – String which returns the appointment’s subject.
// location – String which returns the appointment’s location.
// description – String which returns the appointment’s description.
// tooltip – String which returns the appointment’s tooltip.
$(“#log”).html(“appointmentChange is raised”);
});

});

});

[Peter StoevKeymaster]

Hi Markk,

I think the AJAX calls to your server should be within the appointmentAdd, appointmentDelete, etc. event handlers. Do not know why the updaterow, etc. are implemented in your code. These are for the Grids.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[MarkkParticipant]

Thank you Peter
like that ?

$(“#scheduler”).on(‘appointmentDelete’, function (event, rowid, commit) {
var args = event.args;
var appointment = args.appointment;
var data = “delete=true&” + $.param({ id: rowid });
$.ajax({
dataType: ‘json’,
url: ‘data.php’,
cache: false,
data: data,
success: function (data, status, xhr) {
alert(“Record successufully deleted”);
commit(true);
},
error: function (jqXHR, textStatus, errorThrown) {
commit(false);
}
});

$(“#log”).html(“appointmentDelete is raised”);

});

[Peter StoevKeymaster]

No. There are no rowid, commit params, only event param with the appointment’s details passed as argument.

From the documentation:

This event is triggered when an appointment is deleted. event.args contains the event's arguments. This event has one argument: appointment - Object which has the appointmentDataFields. See appointmentDataFields property.

Code example

Bind to the appointmentDelete event by type: jqxScheduler.

$('#jqxScheduler').on('appointmentDelete', function (event) { var args = event.args; var appointment = args.appointment; });

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[MarkkParticipant]

i’have this, but doesn’t work, my argument is IDPT_Task but in data.php?delete=true&IDPT_Task=& =1484258406845 500 (Internal Server Error) do you have a idea ? IDPT_Task is empty and commit is not defined at Object.error

Thank you

$(“#scheduler”).on(‘appointmentDelete’, function (event, IDPT_Task) {
var args = event.args;
var appointment = args.appointment;
var data = “delete=true&” + $.param({ IDPT_Task: IDPT_Task});
$.ajax({
dataType: ‘json’,
url: ‘data.php’,
cache: false,
data: data,

success: function (data, status, xhr) {
alert(“Record successufully deleted”);
commit(true);
},
error: function (jqXHR, textStatus, errorThrown) {
alert(data);
commit(false);
}
});

$(“#log”).html(“appointmentDelete is raised”);

});

[Peter StoevKeymaster]

Hi Markk,

The event does not have argument called IDPT_Task so this is undefined. Events in Javascript have one argument called event.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts