I have a entity class as below:
public string Title { get; set; }
public string Description { get; set; }
public string StartDay { get; set; }
public string StartHour { get; set; }
public string EndDay { get; set; }
public string EndHour { get; set; }
public string Guid { get; set; }
and i send events of database as below in controller:
[HttpPost]
public JsonResult GetEvents()
{
var eventList = from q in _calendarRepository.Table
select new
{
id=q.Id,
title=q.Title,
description=q.Description,
startDate= q.StartDay,
startHour=q.StartHour,
endDate= q.EndDay,
endHour=q.EndHour,
guid=q.Guid
};
var rows = eventList.ToList();
return Json(rows, JsonRequestBehavior.AllowGet);
}
and in view i have fullcalendar implematation as below:
//create Guid
function guid() {
function s4() {
return Math.floor((1 + Math.random()) * 0x10000)
.toString(16)
.substring(1);
}
return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
s4() + '-' + s4() + s4() + s4();
}
//ajax request that gets Dates from "Calendar" controller and "Bind" Action
var items = [];
$(document).ready(
$.ajax({
url: "/Calender/GetEvents",
type: 'Post',
dataType: 'json',
contentType: 'application/json',
success: function (result) {
items = result;
console.log(items);
GetEvent();
},
})
);
//Calendar Main Script
function GetEvent() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
select: function (start, end) {
//$('#modal-responsive').modal('show');
document.getElementById("event-title").value = null;
var title = null;
$.ajax({
url: "/Calender/ToPersian",
type: 'Post',
data: {
start: start,
end: end,
},
success: function (result) {
var startDate = result.SDate.substring(0, 11);
var startHour = result.SDate.substring(11, 23);
var endDate = result.EDate.substring(0, 11);
var endHour = result.EDate.substring(11, 23);
document.getElementById("fromDate1").value = startDate;
document.getElementById("field-4").value = startHour;
document.getElementById("toDate1").value = endDate;
document.getElementById("field-6").value = endHour;
},
});
$(function () {
$("#modal-event").dialog({
resizable: true,
height: "auto",
width: 800,
modal: true,
show: {
effect: 'fade',
duration: 350
},
hide: {
effect: 'fade',
duration: 50
},
buttons: {
"save": function () {
var title = document.getElementById("event-title").value;
var description = document.getElementById("field-3").value;
var startHour = document.getElementById("field-4").value;
var endDay = document.getElementById("toDate1").value;
var endHour = document.getElementById("field-6").value;
//start = document.getElementById("fromDate1").value;
////////////////////////////////////////////////////////
$.ajax({
url: "/Calender/ToGregorian",
type: 'Post',
async: false,
data: {
start: document.getElementById("fromDate1").value + ' ' + document.getElementById("field-4").value,
end: document.getElementById("toDate1").value + ' ' + document.getElementById("field-6").value,
},
success: function (result) {
var mystart = result.SDate;
var myend = result.EDate;
start = mystart;
end = myend;
}
});
////////////////////////////////////////////////////////
if (title) {
var uid = guid();
$.ajax({
url: "/Calender/Save",
type: 'Post',
data: {
Title: title,
Description: description,
StartDay: start,
StartHour: startHour,
EndDay: end,
EndHour: endHour,
EventGuid:uid
}
});
calendar.fullCalendar('renderEvent',
{
id:uid,
title: title,
start: start,
end: end
},
true // make the event "stick"
);
$(this).dialog("close");
$('.fc-event-inner').attr({ 'data-start': start, 'data-end': end });
$('.fc-event-inner').uniqueId();
}
calendar.fullCalendar('unselect');
$(this).dialog("close");
},
"close": function () {
calendar.fullCalendar('unselect');
$(this).dialog("close");
}
}
});
});
},
editable: false,
events: items,
//////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////Update Event////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////
eventClick: function (event, jsEvent, view) {
var title = event.title;
var EventStart = event.start;
var EventEnd = event.end;
//var eventAllday = event.allDay;
document.getElementById("toDate1").value = EventEnd;
$.ajax({
url: "/Calender/ToPersian",
type: 'Post',
data: {
start: EventStart,
end: EventEnd,
},
success: function (result) {
var startDate = result.SDate.substring(0, 11);
var startHour = result.SDate.substring(11, 23);
var endDate = result.EDate.substring(0, 11);
var endHour = result.EDate.substring(11, 23);
document.getElementById("fromDate1").value = startDate;
document.getElementById("field-4").value = startHour;
document.getElementById("toDate1").value = endDate;
document.getElementById("field-6").value = endHour;
},
});
$(function () {
$("#modal-event").dialog({
resizable: true,
height: "auto",
width: 800,
modal: true,
show: {
effect: 'fade',
duration: 350
},
hide: {
effect: 'fade',
duration: 50
},
buttons: {
"save": function () {
var title = document.getElementById("event-title").value;
var ndescription = document.getElementById("field-3").value;
var nstartHour = document.getElementById("field-4").value;
var nendHour = document.getElementById("field-6").value;
////////////////////////////////////////////////////////
$.ajax({
url: "/Calender/ToGregorian",
type: 'Post',
async: false,
data: {
start: document.getElementById("fromDate1").value + ' ' + document.getElementById("field-4").value,
end: document.getElementById("toDate1").value + ' ' + document.getElementById("field-6").value,
},
success: function (result) {
var mystart = result.SDate;
var myend = result.EDate;
start = mystart;
end = myend;
}
});
////////////////////////////////////////////////////////
if (title) {
title = document.getElementById("event-title").value;
$.ajax({
url: "/Calender/UpdateEvent",
type: 'Post',
dataType: "Json",
data: {
eventid:event._id,
Title: title,
Description: ndescription,
StartDay: start,
StartHour: nstartHour,
EndDay: end,
EndHour: nendHour,
}
});
event.id
event.start = start;
event.end = end;
//event.allDay = event.allDay;
event.title = title;
calendar.fullCalendar('updateEvent', event);
$(this).dialog("close");
$('.fc-event-inner').attr({ 'data-start': start, 'data-end': end });
}
calendar.fullCalendar('unselect');
$(this).dialog("close");
},
"close": function () {
calendar.fullCalendar('unselect');
$(this).dialog("close");
}
}
});
});
},
editable: false
});
};
i get object in browser but i cant display events in fullcalendar view.can anybody help me?its emergency course.
Related
After 3hours of searching, I couldn't find the answer to my problem.
I've created a fullcalendar V3 an now i'm updating to V5. I thought it will be easy but, no, its not easy at all for my actual level. (i've started to code at 4 months, i'm a really rookie).
So, the code that works:
<head>
<script>
$(document).ready(function() {
var calendar = $('#calendar').fullCalendar({
locale: 'fr',
defaultView: 'listWeek',
editable: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listWeek'
},
events: 'load.php',
eventColor: 'red',
selectable: true,
selectHelper: true,
//try to make data request from input
//see documents in Montauban/Calendar and try to modify this lignes
select: function(start, end, allDay) {
var title = prompt("Entrez l'evenement");
if (title) {
var start = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");
$.ajax({
url: "insert.php",
type: "POST",
data: {
title: title,
start: start,
end: end
},
success: function() {
calendar.fullCalendar('refetchEvents');
alert("Evenement créé avec succès");
}
})
}
},
editable: true,
eventResize: function(event) {
var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
var title = event.title;
var id = event.id;
$.ajax({
url: "update.php",
type: "POST",
data: {
title: title,
start: start,
end: end,
id: id
},
success: function() {
calendar.fullCalendar('refetchEvents');
alert('Evenement mis a jour');
}
})
},
eventDrop: function(event) {
var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
var title = event.title;
var id = event.id;
$.ajax({
url: "update.php",
type: "POST",
data: {
title: title,
start: start,
end: end,
id: id
},
success: function() {
calendar.fullCalendar('refetchEvents');
alert("Evenement mis a jour");
}
});
},
eventClick: function(event) {
if (confirm("Êtes-sur sûr de vouloir supprimer?")) {
var id = event.id;
$.ajax({
url: "delete.php",
type: "POST",
data: {
id: id
},
success: function() {
calendar.fullCalendar('refetchEvents');
alert("Evenement supprimé");
}
})
}
},
});
});
</script>
</head>
And the code that do not work with the follows errors:
Uncaught TypeError: Cannot read property 'nodeName' of null
Uncaught TypeError: calendar.FullCalendar is not a function at Object.success ((index):106) at c (jquery.min.js:2)at Object.fireWith [as resolveWith] (jquery.min.js:2)at l (jquery.min.js:2)at XMLHttpRequest. (jquery.min.js:2)
<head>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
locale: 'fr',
editable: true,
themeSystem: 'bootstrap',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
events: 'load.php',
eventColor: 'red',
selectable: true,
editable: true,
eventResize: function(event) {
var start = FullCalendar.formatDate(event.start, {
month: "long",
year: "numeric",
day: 'numeric',
locale: 'fr',
});
var end = FullCalendar.formatDate(event.end, {
month: "long",
year: "numeric",
day: 'numeric',
locale: 'fr',
});
var title = event.title;
var id = event.id;
console.log('hey')
$.ajax({
url: "update.php",
type: "POST",
data: {
title: title,
start: start,
end: end,
id: id
},
success: function() {
calendar.FullCalendar('refetchEvents');
alert('Evenement mis a jour');
}
})
},
eventDrop: function(event) {
var start = FullCalendar.formatDate(event.start, {
month: "long",
year: "numeric",
day: 'numeric',
locale: 'fr',
});
var end = FullCalendar.formatDate(event.end, {
month: "long",
year: "numeric",
day: 'numeric',
locale: 'fr',
});
var title = event.title;
var id = event.id;
$.ajax({
url: "update.php",
type: "POST",
data: {
title: title,
start: start,
end: end,
id: id
},
success: function() {
calendar.FullCalendar('refetchEvents');
alert("Evenement mis a jour");
}
});
},
eventClick: function(event) {
if (confirm("Êtes-sur sûr de vouloir supprimer?")) {
var id = event.id;
$.ajax({
url: "delete.php",
type: "POST",
data: {
id: id
},
success: function() {
calendar.FullCalendar('refetchEvents');
alert("Evenement supprimé");
}
})
}
},
});
calendar.render();
});
</script>
</head>
In the first example (fulcalendar V3) everything works and the database its update when we "drop events, delete events". In the second example (fullcalendar V5), we can click and drop in the events, but the data base its not updated with the new info.
Can you please try to help me?
Sorry for my bad English. :)
I am using MVC. I got the events from database and using jQuery to bind the data.
My event date from database is appearing as '2021-01-14 00:00:00.000'
Below is my code:
function fnGetHolidays() {
$.ajax({
url: siteRoot + "/Master/GetHolidays",
data: {
},
success: function (data) {
fnBindHolidayCalendar(JSON.parse(data.Holidays));
},
error: function (e) {
console.log(e);
},
complete: function (e) {
}
})
}
function fnBindHolidayCalendar(holiday) {
var initialLocaleCode = 'en';
if (culture == "ar-SY") {
initialLocaleCode = 'ar-sa';
}
var calendarEl = document.getElementById('dvHolidayCalendar');
var calendar = new FullCalendar.Calendar(calendarEl,{
header:
{
left: 'prev,next today',
center: 'title',
right: ''
},
locale: initialLocaleCode,
displayEventTime: false,
eventRender: function (event, element) {
element.qtip(
{
content: event.description
});
},
select: function (arg) {
var title = prompt('Event Title:');
if (title) {
calendar.addEvent({
title: title,
start: arg.start,
end: arg.end,
allDay: arg.allDay
})
}
calendar.unselect()
},
eventClick: function (arg) {
fnEditHoliday(arg);
},
editable: false
});
var events = [];
$.each(holiday, function (i, data) {
var HolidayDate = data.HM_Date
events.push(
{
allDay: true,
id: data.HM_ID,
title: data.HM_Title,
description: data.HM_Title,
start: changeDateFormat(HolidayDate, 'dd/MM/yyyy', 'yyyy-MM-dd'),
end: changeDateFormat(HolidayDate, 'dd/MM/yyyy', 'yyyy-MM-dd'),
backgroundColor: "#006dff",
borderColor: "black"
});
});
calendar.addEventSource(events);
calendar.render();
}
I am having some trouble with a JQWidget-jqxGrid i'm developing. I will like to change the format information is being send to an API from a row edition. I need to change some Dates to a specific string notation. This is the code i am using right now:
updaterow: function (rowid, rowdata, commit)
{
//console.log(rowdata);
var output = rowdata;
for (property in output) {
if (output[property] instanceof Date && schema.properties[property].format === "time") {
output[property] = output[property].getHours() + ":" + output[property].getMinutes();
//console.log('hola');
}
if (output[property] instanceof Date && schema.properties[property].format === "date")
{
output[property] = output[property].getFullYear() + "-" + output[property].getMonth() + 1 + '-' + output[property].getDate();
}
}
/*console.log(event.args.row);*/
console.log(output);
console.log(rowdata);
var token = $('input[name="__RequestVerificationToken"]').val();
$.ajax({
url: "/api/" + entity + "/" + rowdata.uid,
cache: false,
method: "put",
data: JSON.stringify(rowdata),
processData: false,
headers: {
"RequestVerificationToken": token,
"Content-type": "Application/json"
},
success: function () {
console.log("Okey dokey!");
commit(true);
},
error: function () {
alert("El dato no se ha actualizado correctamente");
}
});
}
I tried many things before doing this. Originally, i was doing the update on a “oncelledit” event, the problem was the same (And this is like some kind of paranormal activity for me):
As you can see, i am doing the reformating of data in output variable, instead of rowdata. Even so, before output variable gets modified for the ajax request, if i uncomment “console.log(rowdata);”, data will already be changed even before the “for” scope where data is modified. How this is really possible? I have checked cache by using another browser, but no luck.
Although data is correctly posted to my API with this code, data format is changed on the grid displayed to the user, and data gets ouwfull. I will like to send the information in the appropriate format, but not to change format data shown in the grid.
This is how the data is shown before edition:
fecha de inicio | hora de inicio
1/10/2018 | 8:00 AM
And this is after edition:
fecha de inicio | hora de inicio
2001-01-1 |13:0
I post my full code just in case:
—JSGrid.js—
$.ajaxSetup({ cache: false });
var FKSources = [];
var FKAdapters = {};
var dataFieldsArr = [];
var columnsArr = [];
var FKPropertySelection;
var entity;
var schema;
function createGrid()
{
$.ajax({
url: "/api/" + entity + "/schema",
success: function (data) {
schema = data;
for (property in data.properties) {
if (data.properties[property]["type"].indexOf("lhcrud") > -1) {
FKSources.push({
datatype: "json",
datafields:
[
{ name: data.fkAttributes[property] },
{ name: 'id', type: 'int' }
],
id: 'id',
url: '/api/' + data.properties[property]["type"].substring(data.properties[property]["type"].indexOf("models.") + "models.".length)
});
FKAdapters[property] = new $.jqx.dataAdapter(FKSources[FKSources.length - 1]);
dataFieldsArr.push({
name: property + 'Id',
value: property + 'Id',
values:
{
source: FKAdapters[property].records,
value: 'id',
label: data.fkAttributes[property]
},
type: 'int'
});
dataFieldsArr.push({
name: property + 'Nombre',
type: 'string',
map: property + '>' + data.fkAttributes[property]
});
columnsArr.push(
{
text: data.properties[property]["title"],
columntype: 'dropdownlist',
datafield: property + 'Id',
width: 150,
filtertype: 'checkedlist',
displayfield: property + 'Nombre',
createeditor: function (row, value, editor) {
editor.jqxDropDownList({ source: FKAdapters[FKPropertySelection], displayMember: data.fkAttributes[FKPropertySelection], valueMember: 'id' });
}
}
);
}
else if (data.properties[property]["type"].indexOf("integer") > -1) {
dataFieldsArr.push({ name: property, type: 'int' });
columnsArr.push({ text: data.properties[property]["title"], datafield: property, width: 80, cellsalign: 'right' });
}
else if (data.properties[property]["type"].indexOf("boolean") > -1) {
dataFieldsArr.push({ name: property, type: 'bool' });
columnsArr.push({ text: data.properties[property]["title"], datafield: property, width: 65, columntype: 'checkbox' });
}
else if (data.properties[property]["format"].indexOf("date") > -1) {
dataFieldsArr.push({ name: property, type: 'date' });
columnsArr.push({
text: data.properties[property]["title"], datafield: property, width: 150, columntype: 'datetimeinput', cellsalign: 'right', cellsformat: 'd'
});
}
else if (data.properties[property]["format"].indexOf("time") > -1) {
dataFieldsArr.push({ name: property, type: 'date' });
columnsArr.push({
text: data.properties[property]["title"], datafield: property, width: 100, columntype: 'datetimeinput', cellsalign: 'right', cellsformat: 't', createeditor: function (row, column, editor) {
editor.jqxDateTimeInput({
showTimeButton: true,
showCalendarButton: false
});
}
});
}
else {
dataFieldsArr.push({ name: property, type: 'string' });
columnsArr.push({ text: data.properties[property]["title"], datafield: property, width: 150 });
}
}
columnsArr.push({
text: 'Delete', datafield: 'Delete', columntype: 'button', width: 90, cellsrenderer: function () {
return "Delete row";
}, buttonclick: function (row) {
var deleteConfirm = confirm("Sure?");
if (deleteConfirm) {
var id = $("#jqxgrid").jqxGrid('getrowid', row);
deleteEntity(entity, id, $('input[name="__RequestVerificationToken"]').val());
$('#jqxgrid').jqxGrid('deleterow', id);
}
}
});
var source =
{
datatype: "json",
datafields: dataFieldsArr,
id: 'id',
url: '/api/' + entity,
addrow: function (rowid, rowdata, position, commit) {
var token = $('input[name="__RequestVerificationToken"]').val();
//console.log(rowid);
//console.log(rowdata);
$.ajax({
url: "/api/" + entity,
method: "post",
data: JSON.stringify(rowdata),
processData: false,
headers: {
"RequestVerificationToken": token,
"Content-type": "Application/json"
},
success: function () {
commit(true);
//reload Data in order to manage correctly new data
$("#jqxgrid").jqxGrid(
{
source: dataAdapter,
sortable: true,
filterable: true,
editable: true,
showeverpresentrow: true,
everpresentrowposition: "top",
selectionmode: 'singlecell',
editmode: 'dblclick',
theme: 'light',
columns: columnsArr
});
},
error: function (xhr) {
console.log(xhr);
commit(false);
}
});
},
updaterow: function (rowid, rowdata, commit)
{
//console.log(rowdata);
var output = rowdata;
for (property in output) {
if (output[property] instanceof Date && schema.properties[property].format === "time") {
output[property] = output[property].getHours() + ":" + output[property].getMinutes();
//console.log('hola');
}
if (output[property] instanceof Date && schema.properties[property].format === "date")
{
output[property] = output[property].getFullYear() + "-" + output[property].getMonth() + 1 + '-' + output[property].getDate();
}
}
/*console.log(event.args.row);*/
console.log(output);
console.log(rowdata);
var token = $('input[name="__RequestVerificationToken"]').val();
$.ajax({
url: "/api/" + entity + "/" + rowdata.uid,
cache: false,
method: "put",
data: JSON.stringify(rowdata),
processData: false,
headers: {
"RequestVerificationToken": token,
"Content-type": "Application/json"
},
success: function () {
console.log("Okey dokey!");
commit(true);
},
error: function () {
alert("El dato no se ha actualizado correctamente");
}
});
}
};
var dataAdapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid(
{
source: dataAdapter,
width: '100%',
sortable: true,
filterable: true,
editable: true,
showeverpresentrow: true,
everpresentrowposition: "top",
selectionmode: 'singlecell',
editmode: 'dblclick',
theme: 'light',
columns: columnsArr
});
},
error: function () {
alert("Error Getting Data");
}
});
}
$("#jqxgrid").on('cellselect', function (event) {
FKPropertySelection = event.args.datafield.substring(0, event.args.datafield.indexOf('Id'));
});
—JSGrid.cshtml—
#{
ViewData["Title"] = "JSGrid";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>JSGrid for #ViewBag.entity</h2>
#Html.AntiForgeryToken()
<div id="jqxgrid">
</div>
#section scripts
{
<link rel="stylesheet" href="~/lib/jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="~/lib/jqwidgets/styles/jqx.light.css" type="text/css" />
<script type="text/javascript" src="~/lib/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="~/lib/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="~/lib/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="~/lib/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="~/lib/jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="~/lib/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="~/lib/jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="~/lib/jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="~/lib/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="~/lib/jqwidgets/jqxdatetimeinput.js"></script>
<script type="text/javascript" src="~/lib/jqwidgets/jqxcalendar.js"></script>
<script type="text/javascript" src="~/lib/jqwidgets/jqxtooltip.js"></script>
<script type="text/javascript" src="~/lib/jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="~/lib/jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="~/lib/jqwidgets/jqxgrid.filter.js"></script>
<script type="text/javascript" src="~/lib/jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="~/lib/jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="~/lib/jqwidgets/jqxgrid.grouping.js"></script>
<script type="text/javascript" src="~/lib/jqwidgets/jqxgrid.edit.js"></script>
<script type="text/javascript" src="~/js/JSGrid.js"></script>
<script>
entity = '#ViewBag.entity';
createGrid();
</script>
}
Thanks in advance!
All right! I found my solution here:
https://www.jqwidgets.com/community/topic/rowdata-changed-even-before-statement-to-do-so/#post-98256
and here:
https://www.jqwidgets.com/community/topic/difference-between-refreshdata-and-updatebounddata/
(¡Haya PAZ! - Les luthiers)
I partially solved my issue reloading binded data with 'updatebounddata' method from jqxgrid.
Just in case someone has the same problem, i will leave here my updateRow function updated. Look at the ajax block:
updaterow: function (rowid, rowdata, commit)
{
//console.log(rowdata);
var output = rowdata;
for (property in output) {
if (output[property] instanceof Date && schema.properties[property].format === "time") {
output[property] = output[property].getHours() + ":" + output[property].getMinutes();
//console.log('hola');
}
if (output[property] instanceof Date && schema.properties[property].format === "date")
{
output[property] = output[property].getFullYear() + "-" + (output[property].getMonth() + 1) + '-' + output[property].getDate();
}
}
//console.log(event.args.row);
//console.log(output);
//console.log(rowdata);
var token = $('input[name="__RequestVerificationToken"]').val();
$.ajax({
url: "/api/" + entity + "/" + rowdata.uid,
cache: false,
method: "put",
data: JSON.stringify(rowdata),
processData: false,
headers: {
"RequestVerificationToken": token,
"Content-type": "Application/json"
},
success: function () {
console.log("Okey dokey!");
commit(true);
$("#jqxgrid").jqxGrid('updatebounddata');
},
error: function () {
alert("El dato no se ha actualizado correctamente");
$("#jqxgrid").jqxGrid('updatebounddata');
}
});
}
Hope this will help someone in the future!
Following Data is being passed about events:
[{"title":"my First Entry","start":"2016-09-27T11:47:00","end":"2016-09-27T12:47:00","allday":false}]
It renders entry only in month view. eventRender is also not fired for day and week
Javascript
var calendar = $('#calendar').fullCalendar({
editable: false,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
events: "http://localhost:8000/fetch",
// events: [
// {
// title: 'Lunch with All',
// start: new Date(2016, 9, 27, 12, 0),
// end: new Date(2016, 9, 27, 13, 0),
// allDay: false
// },
// {
// title: 'Birthday Party',
// start: new Date(y, m, d + 1, 19, 0),
// end: new Date(y, m, d + 1, 22, 30),
// allDay: false
// },
// {
// title: 'Click for Google',
// start: new Date(y, m, 28),
// end: new Date(y, m, 29),
// url: 'http://google.com/'
// }
// ],
// Convert the allDay from string to boolean
eventRender: function (event, element, view) {
var start = event.start;
console.log("Rendered");
var end = moment(event.end);
event.end = end;
if (event.allDay === 'true') {
event.allDay = true;
} else {
event.allDay = false;
}
},
selectable: false,
selectHelper: false,
select: function (start, end, allDay) {
var title = prompt('Event Title:');
var url = prompt('Type Event url, if exits:');
if (title) {
var start = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
var end = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: 'http://localhost:8888/fullcalendar/add_events.php',
data: 'title=' + title + '&start=' + start + '&end=' + end + '&url=' + url,
type: "POST",
success: function (json) {
alert('Added Successfully');
}
});
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: false
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
},
editable: false,
eventDrop: function (event, delta) {
var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: 'http://localhost:8888/fullcalendar/update_events.php',
data: 'title=' + event.title + '&start=' + start + '&end=' + end + '&id=' + event.id,
type: "POST",
success: function (json) {
alert("Updated Successfully");
}
});
},
eventResize: function (event) {
var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: 'http://localhost:8888/fullcalendar/update_events.php',
data: 'title=' + event.title + '&start=' + start + '&end=' + end + '&id=' + event.id,
type: "POST",
success: function (json) {
alert("Updated Successfully");
}
});
}
});
It works fine for all views if date is set in this format new Date(2016, 9, 27, 12, 0)
I have a grid in kendo it is created dynamically, when creating generated once the titles of the columns well, but when I come back and recreational grid only puts me in the first column title
function GenerarTabla() {
var fieldsDinamicos;
var fieldDinamico;
myList = [];
fieldsdynamic = [];
$('#ColumnasaMostrar option').each(function () {
col = {};
col.text = $(this).attr("nombrecolumna");
col.operacion = $(this).val();
col.tipodato = $(this).attr("tipodato");
col.nombrefuncion = $(this).attr("nombrefuncion");
myList.push(col);
fieldsdynamic.push($(this).attr("nombrecolumna"));
});
var listaColumnas = fieldsdynamic.join(", ");
var datos;
url2 = urlServicio + '/DynamicService.svc/' + entidaddinamica + '?$select=' + listaColumnas;
//$.getJSON(url2, function (data) {
// datos = data;
//});
var model = {
fields: {
}
};
// model.fields["Id"] = { type: "number" };
var columnasDinamicas = [];
var columnasAgregadas = [];
var fieldsDinamicos = [];
$.each(myList, function (key, val) {
if (val.operacion != "undefined") {
columnasDinamicas.push({
field: val.text,
title: val.text,
footerTemplate: val.nombrefuncion + ": #: " + val.operacion + " #"
});
tipodato = consultarTipoDato(val.tipodato)
model.fields[val.text] = { type: tipodato };
columnasAgregadas.push({ field: val.text, aggregate: val.operacion });
} else {
columnasDinamicas.push({
field: val.text,
title: val.text
});
tipodato = consultarTipoDato(val.tipodato)
model.fields[val.text] = { type: tipodato };
}
})
$("#gridkendo").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: {
url: url2,
dataType: "json"
}
},
schema: {
data: function (data) {
return data.value;
},
total: function (data) {
return data['odata.count'];
},
model: model
},
aggregate: columnasAgregadas,
pageSize: 10
//serverPaging: true,
//serverFiltering: true,
//serverSorting: true
},
height: 430,
filterable: false,
sortable: false,
pageable: true,
columns: columnasDinamicas
});
}
first created
second created