Jquery FullCalendar not displaying events downloaded from the Web service - c#

When the page loads, I initialize the calendar and try to point eventSources "web service"
Web service is executed, I get the event, but in the calendar are not displayed.
What am I doing wrong?
Web service
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public List<StructEvent> GetEvent()
{
List<StructEvent> listEvent = DataEvent.GetListEvent();
return listEvent;
}
Initialization calendar
function CreatCalendar() {
$(document).ready(function () {
$('#calendar').fullCalendar({
firstDay: 1,
height: 300,
axisFormat: 'H(:mm)',
timeFormat: 'H(:mm)',
slotDuration: "00:15:00",
minTime: "08:00:00",
maxTime: "17:00:00",
allDaySlot: false,
allDayDefault: false,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaDay'
},
eventSources: [LoadEvent()]
});
});
}
//Loading events from the database
function LoadEvent() {
$.ajax(
{
type: 'POST',
contentType: 'application/json',
data: "{}",
dataType: 'json',
url: "WebServiceAppointment.asmx/GetEvent",
cache: false,
success: function (response) {
events: $.map(response.d, function (item, i) {
var event = new Object();
event.start = new Date(Number(item.StartDate.replace(/[^0-9]/g,'')));
event.end = new Date(Number(item.EndDate.replace(/[^0-9]/g,'')));
event.title = item.Title;
event.color = 'red';
event.textColor = 'black';
return event;
})
}
})
}

I solved my problem and I want to share with you the solution. The problem was that:
When the initialization of the calendar events should be added so
eventSources: [{events: LoadEvents()}]
Calendar loaded faster than carried Ajax request, and I disabled
the asynchronous async: false
Little changed loading event
working code!
function CreatCalendar() {
$(document).ready(function () {
$('#calendar').fullCalendar({
firstDay: 1,
height: 300,
axisFormat: 'H(:mm)',
timeFormat: 'H(:mm)',
slotDuration: "00:15:00",
minTime: "08:00:00",
maxTime: "17:00:00",
allDaySlot: false,
allDayDefault: false,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaDay'
},
eventSources: [{events: LoadEvents()}]
});
});
}
//Loading events from the database
function LoadEvents() {
var events = [];
$.ajax(
{
type: 'POST',
async: false,
cache: false,
contentType: 'application/json',
data: "{}",
dataType: 'json',
url: "WebServiceAppointment.asmx/GetEvent",
cache: false,
success: function (response) {
$.map(response.d, function (item, i) {
events.push({
start: new Date(Number(item.StartDate.replace(/[^0-9]/g,''))),
end: new Date(Number(item.EndDate.replace(/[^0-9]/g,''))),
title: item.Title,
color: "red",
textColor: "black"
});
})
}
})
return events;
}

Related

Autocomplete textbox from database in mvc not working

I am trying to achieve autocomplete textbox functionality from database, it is not working. i have tried below code.
$(document).ready(function () {
$("#Manufacturer").autocomplete({
source: function (request, response) {
debugger
$.ajax({
url: '#Url.Action("GetRecord", "Company")',
type: "POST",
dataType: "json",
data: { prefix: request.term },
success: function (data) {
response($.map(data, function (item) {
return { label: item.Manufacturer, value: item.Manufacturer };
}))
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
})
},
});
});
Here is my ajax call method
[HttpPost]
public JsonResult GetRecord(string prefix)
{
BAL_Branches ObjBranch = new BAL_Branches();
DataSet ds = new DataSet();
DataTable dt = new DataTable();
List<ManufacturerCertificates> menufact = new List<ManufacturerCertificates>();
ds = ObjBranch.GetManufacturerCertsForAutocomplate(prefix, Convert.ToInt64(Session["BranchID"]));
dt = ds.Tables[0];
// mm.BranchesList[i].ManufactCertsList = Common.ConvertDataTable<ManufacturerCertificates>(dt);
foreach (DataRow dr in ds.Tables[0].Rows)
{
menufact.Add(new ManufacturerCertificates
{
Manufacturer = dr["Manufacturer"].ToString(),
ID =Convert.ToInt64( dr["ID"].ToString())
});
}
// menufact = dt.ToList<ManufacturerCertificates>();
return Json(menufact, JsonRequestBehavior.AllowGet);
}
The ajax method returns correct values but autocomplete textbox is not appear. any suggestions?
Thanks is advance.
I have resolve this my self as change $(document).ready() function to $(window).load()
$(window).load(function () {
$("#Manufacturer").autocomplete({
source: function (request, response) {
debugger
$.ajax({
url: '#Url.Action("GetRecord", "Company")',
type: "POST",
dataType: "json",
data: { prefix: request.term },
success: function (data) {
response($.map(data, function (item) {
return { label: item.Manufacturer, value: item.Manufacturer };
}))
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
})
},
});
});
and apply z-index
.ui-widget-content {
z-index: 99999 !important;
}
now it will work fine for me.

ajax posting formdata error status 200 OK

I am trying to upload file using Ajax.
The Error status is 200 ok .
Response text is my MasterPage HTML Code.
The Request never went to the Back-end as i am debugging with a breakpoint into the method.
so far i have tried this.
C# WebMethod
[HttpPost]
public void Upload()
{
for (int i = 0; i < Request.Files.Count; i++)
{
var file = Request.Files[i];
var fileName = Path.GetFileName(file.FileName);
var path = Path.Combine(Server.MapPath("~/Uploads/"), fileName);
file.SaveAs(path);
}
}`
Ajax Request
function uploadFiles() {
var formData = new FormData();
$.each(files, function (key, value) {
formData.append(key, value);
});
$.ajax({
async: false,
type: 'POST',
url: '/Home.aspx/Upload',
data: formData,
dataType: 'json',
contentType: false,
processData: false,
cache: false,
timeout :5000,
success: function (response) {
alert('succes!!');
},
error: function (error) {
alert("errror");
console.log(error);
}
});
}
});
in ajax call you have to delete dataType: json because files must be sent multipart/form-data
function uploadFiles() {
var formData = new FormData();
$.each(files, function (key, value) {
formData.append(key, value);
});
$.ajax({
async: false,
type: 'POST',
url: '/Home.aspx/Upload',
data: formData,
contentType: false,
processData: false,
cache: false,
timeout :5000,
success: function (response) {
alert('succes!!');
},
error: function (error) {
alert("errror");
console.log(error);
}
});
}
});
Please try this code
function getBase64(file) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
return reader.result;
};
reader.onerror = function (error) {
return '';
};
}
function uploadFiles() {
var files=[];
$.each(files, function (key, value) {
var x=getBase64(value)
if(!!x)
files.push(x);
});
$.ajax({
type: 'POST',
url: '/Home.aspx/Upload',
data: JSON.stringity({files:files}),
dataType: 'json',
contentType: false,
processData: false,
success: function (response) {
alert('succes!!');
},
error: function (error) {
alert("errror");
console.log(error);
}
});
}
});
[System.Web.Services.WebMethod]
public static void Upload(string[] files)
{
//Convert base64 to file format and save
}

Editoptions displaying but not taking in the value selected in dropdownlist

I have a jqgrid dropdownlist that is being populated with Json data from my database. It displays perfectly but when an option is clicked it does not take in the value selected and send it through. In other words it is just displaying in the drop down and nothing more. Here is my code for the colmodel field I am working with:
{
name: 'employee_speciality', index: 'employee_speciality', editable: true,
editrules: { required: true },
sortable: true,
align: 'center',
editable: true,
cellEdit: true,
edittype: 'select',
formatter:'select',
editoptions: {
dataUrl:"http://localhost:8080/service.svc/serviceBranch",
buildSelect: function (response) {
var data = typeof response === "string" ?
$.parseJSON(response) : response,
s = "<select>";
s += '<option selected="selected" style="display:none;">Choose here</option>';
$.each(data.serviceBranchResult, function () {
s += '<option value="' + this.service_name + '">' + this.service_name +
'</option>';
})
return s + "</select>";
}
}
}],
This is where I am retrieving the data, where employee_speciality is the only one with the dropdownlist:
function saveData() {
var rowid = $("#jqgrid").jqGrid('getGridParam', 'selrow');
var rowData = $("#jqgrid").getRowData(rowid);
var employee_name = rowData.employee_name;
var employee_surname = rowData.employee_surname;
var employee_username = rowData.employee_username;
var employee_email = rowData.employee_email;
var branch_id = rowData.branch_id;
var user_type = rowData.user_type;
var employee_state = rowData.employee_state;
var employee_speciality = rowData.employee_speciality;
alert(employee_speciality); //to check
var gridData = {
employee_name: employee_name,
employee_surname: employee_surname,
employee_username: employee_username,
employee_email: employee_email,
branch_id: branch_id,
user_type: user_type,
employee_state: employee_state,
employee_speciality: employee_speciality
};
gridData = JSON.stringify(gridData);
$.ajax({
type: "POST",
url: "Employees.aspx/save",
data: gridData,
contentType: "application/json; charset=utf-8",
dataType: 'json',
success: function (response, textStatus, xhr) {
alert(employee_speciality);
location.reload(true);
},
error: function (xhr, textStatus, errorThrown) {
alert(employee_speciality);
Abort();
alert("Please enter all fields");
}
})
Please can I get some insight as to why this is happening, any help is highly appreciated. Thanks in advance
I have found a solution to my problem. Taking out the formatter: 'select' worked for me. Thanks for your time #David

Without using the popup window how to edit a particular row in jQuery grid

I am writing code for doing inline editing in jqgrid. It's working fine in the pop-up mode. But I need the same in the inline mode. Please help me solve this problem. I have been trying to solve it for the past week.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="JQGridReq/jquery-1.9.0.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/redmond/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
<script src="JQGridReq/grid.locale-en.js" type="text/javascript"></script>
<script src="JQGridReq/jquery.jqGrid.js" type="text/javascript"></script>
<link href="JQGridReq/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script src="Scripts/json2.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="topList">
</div>
<table id="list">
</table> <%--for grid--%>
<div id="pager">
</div> <%--for paging--%>
</div>
</form>
<script type="text/javascript">
$(document).ready(function () {
function getCountry() {
var country;
$.ajax({
type: "POST",
contentType: "application/json",
data: "{}",
async: false,
url: "Default.aspx/getNational",
dataType: "json",
success: function (data) {
country = data.d;
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
debugger;
}
});
return country;
}
$.ajax({
type: "POST",
contentType: "application/json",
data: "{}",
url: "Default.aspx/getEmployee",
dataType: "json",
success: function (data) {
data = data.d;
$("#list").jqGrid({
datatype: "local",
colNames: ['', 'Employee Id', 'Name', 'Email', 'Phone', 'Password', 'Nationality', 'Date of Birth'],
colModel: [
{
name: 'act', index: 'act', width: 75, align: 'center', search: false, sortable: false, formatter: 'actions',
formatoptions: {
keys: true,
editformbutton: true,
editOptions: {
recreateForm: true,
reloadAfterSubmit: false,
width: 500,
closeAfterEdit: true,
ajaxEditOptions: { contentType: "application/json" },
serializeEditData: function (postData) {
var postdata = { 'data': postData };
alert(postData);
return JSON.stringify(postdata);
}
},
delOptions:
{
ajaxDelOptions: { contentType: "application/json" },
reloadAfterSubmit: false,
onclickSubmit: function (eparams) {
var retarr = {};
var sr = $("#list").getGridParam('selrow');
rowdata = $("#list").getRowData(sr);
retarr = { employeeId: rowdata.employeeId };
return retarr;
},
serializeDelData: function (postdata) {
var postData = { 'data': data };
return JSON.stringify(postData);
}
} // we want use [Enter] key to save the row and [Esc] to cancel editing.
}
},
{ name: 'employeeId', index: 'employeeId', width: 55, stype: 'text', sortable: true, editable: true, formoptions: { rowpos: 1, colpos: 1 }, editrules: { integer: true } },
{ name: 'name', index: 'name', width: 90, stype: 'text', sortable: true, editable: true, editrules: { required: true }, formoptions: { rowpos: 2, colpos: 1 } },
{ name: 'email', index: 'email', width: 90, stype: 'text', sortable: true, editable: true, editrules: { email: true, required: true }, formoptions: { rowpos: 2, colpos: 2 } },
{ name: 'phone', index: 'phone', width: 70, align: "right", stype: 'text', sortable: true, editable: true, formoptions: { rowpos: 0, colpos: 0 } },
{ name: 'pwd', index: 'pwd', width: 70, align: "right", stype: 'text', edittype: 'password', sortable: true, editable: true, formoptions: { rowpos: 3, colpos: 2 } },
{
name: 'nationalId', index: 'nationalId', width: 80, align: "right", formatter: 'select', stype: 'select',
editable: true, edittype: "select", editoptions: { value: getCountry() }, formoptions: { rowpos: 4, colpos: 1 }
},
{
name: 'dateOfBirth', index: 'dateOfBirth', width: 80, align: "right",
edittype: 'text', editable: true,
editoptions: {
dataInit: function (el) {
$(el).datepicker({
dateFormat: "dd/mm/yy",
changeMonth: true,
changeYear: true,
});
}
},
formoptions: { rowpos: 4, colpos: 2 }
}
],
//this line is used to pass the data into the database
//
data: JSON.parse(data),
rowno: 10,
loadonce: true,
/* multiselect:true,*/
rowlist: [5, 10, 20],
pager: '#pager',
viewrecords: true,
gridview: true,
sortorder: 'asc',
toppager: true,
cloneToTop: true,
altrows: true,
autowidth: false,
hoverrows: true,
height: 300,
/* toolbar: [true, "top"],*/
rownumbers: true,
caption: "Employee Data",
editurl: 'Default.aspx/EditUpdateDel'
/* ondblClickRow: function(rowid) {
$(this).jqGrid('editGridRow', rowid,
{recreateForm:true,closeAfterEdit:true,
closeOnEscape:true,reloadAfterSubmit:false, width: 500});
}*/
});
$('#list').jqGrid('navGrid', '#pager',
{
edit: true,
add: true,
del: true,
search: false,
searchtext: "Search",
addtext: "Add",
edittext: "Edit",
deltext: "Delete",
cloneToTop: true
}
, {
//add//
recreateForm: true,
//reloadAfterSubmit: false,
//beforeShowForm: function (form) {
// $('#tr_employeeId', form).hide();
//},
width: 500,
reloadAfterSubmit: false,
closeAfterAdd: false,
ajaxEditOptions: { contentType: "application/json" },
serializeEditData: function (postData) {
var postdata = { 'data': postData };
return JSON.stringify(postdata);
}
},
//edit//
//Here i ham writing a code for doing inline editing in jqgrid. It's working //fine in the pop-up mode.But i need the same in the inline mode.pls help me //solve this problem. I a trying to solve it for the past on week.
{
//recreateForm: true,
//beforeShowForm: function (form) {
// $('#tr_employeeId', form).hide();
//},
//width: 500,
//reloadAfterSubmit: false,
//closeAfterAdd: false,
//ajaxEditOptions: { contentType: "application/json" },
//serializeEditData: function (postData) {
// var postdata = { 'data': postData };
// return JSON.stringify(postdata);
//}
recreateForm: true,
reloadAfterSubmit: false,
width: 500,
closeAfterEdit: true,
ajaxEditOptions: { contentType: "application/json" },
serializeEditData: function (postData) {
var postdata = { 'data': postData };
return JSON.stringify(postdata);
}
},
{
//delte//
ajaxDelOptions: { contentType: "application/json" },
reloadAfterSubmit: false,
onclickSubmit: function (eparams) {
var retarr = {};
var sr = $("#list").getGridParam('selrow');
rowdata = $("#list").getRowData(sr);
retarr = { employeeId: rowdata.employeeId };
return retarr;
},
serializeDelData: function (data) {
var postData = { 'data': data };
return JSON.stringify(postData);
}
});
$("#list").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: true });
var grid = $("#list");
var topPagerDiv = $('#' + grid[0].id + '_toppager')[0];
$("#" + grid[0].id + "_toppager_center", topPagerDiv).remove(); /"#list_toppager_center"/
$(".ui-paging-info", topPagerDiv).remove();
var bottomPagerDiv = $("div#pager")[0];
$("#add_" + grid[0].id, bottomPagerDiv).remove();
$("#edit_" + grid[0].id, bottomPagerDiv).remove();
$("#del_" + grid[0].id, bottomPagerDiv).remove();
$("#refresh_" + grid[0].id, bottomPagerDiv).remove();
// "#add_list"
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
debugger;
}
});
});
</script>
</body>
</html>
There are a lot of places in the code which could be better to change, but your main problem is wrong usage of formatoptions for formatter: 'actions'.
You can read in the documentation of the option of formatter: 'actions'the following:
When the editformbutton parameter is set to true the form editing
dialogue appear instead of in-line edit. The option editOptions will
be used only for the form editing.
You try to use inline editing, so you have to remove editformbutton: true property from formatoptions first of all.
To serialize the data one should use serializeRowData callback of jqGrid instead of usage serializeEditData callback of the form editing
Some common remarks to your code.
I recommend you to move the <script> part where you create the grid from the <body> to the <head> part. Alternatively you can remove $(document).ready(function () {...}); handler. The usage of ready for body inside of the body is not good.
It seems that employeeId is the native id of the data which you load. You can add key: true to employeeId column or to use jsonReader: {id: "employeeId" } (or jsonReader: {id: 0 } depend on exact format of input data which you use).
You use data: JSON.parse(data.d), where data is the parameter of success callback. It means that you made unneeded JSON serialization in "Default.aspx/getEmployee". Instead of returning object you probably convert the object with data to string manually. DotNet framework *automatically convert the returned data to JSON. So you should remove manual conversion of returned data to string inside of "Default.aspx/getEmployee". After that you need replace data: JSON.parse(data.d) to data: data.d. Now you can remove manual $.ajax call to the usage of datatype: "json" and url: "Default.aspx/getEmployee" and to use just jsonReader: {root: "d.rows", page: "d.page", total: "d.total", records: "d.records"}. If you don't use server side paging then you should add loadonce: true option additionally
There are some other places to improve the code, but one can't solve all problems at once.

Loading events on start from database

I want to load all the events from the database in the calendar as the page loads but it's not working. Thedata is comming to the page from database but the object is not showing events.
My model is
public class Calendar
{
public int id { get; set; }
public string title { get; set; }
public DateTime starttime { get; set; }
public DateTime endtime { get; set; }
}
My controller methods are
[HttpPost]
public JsonResult dataReceiver(string title)
{
Calendar calendar = new Calendar();
calendar.title = title;
calendar.starttime = DateTime.UtcNow.ToLocalTime();
calendar.endtime = DateTime.UtcNow.ToLocalTime().AddDays(5);
db.Calendars.Add(calendar);
db.SaveChanges();
return Json(title, JsonRequestBehavior.AllowGet);
}
public ActionResult datasender()
{
var search = from m in db.Calendars select m;
//ViewBag.Message = search.ToList();
return Json(search.ToList(),JsonRequestBehavior.AllowGet);
}
and my view is
<html>
<head>
<title> Calendar</title>
<link href="~/Content/calendar/fullcalendar.css" rel="stylesheet" />
<link href="~/Content/calendar/fullcalendar.print.css" rel="stylesheet" media='print' />
<link href="~/Content/jquery-ui.min.css" rel="stylesheet" />
<style>
body {
margin: 40px 10px;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 0 auto;
}
.fc-ltr {
background: #ddba8f;
}
.fc-toolbar {
background: #c64343;
}
</style>
</head>
<body>
<div id='calendar' style="height:90%; width:90%; color:black; border:1px solid blue; margin-top:5%; position:relative">
</div>
</body>
</html>
#section scripts
{
<script src="~/Scripts/calendar/moment.min.js"></script>
<script src="~/Scripts/calendar/jquery.min.js"></script>
<script src="~/Scripts/calendar/fullcalendar.js"></script>
<script src="~/Scripts/calendar/jquery-ui.custom.min.js"></script>
<script>
$(document).ready(function () {
calendarcreate();
var obj;
});
function calendarcreate() {
$.ajax({
type: "Post",
url: "/Calendar/datasender",
dataType: "html",
data: {},
success: function (data) {
obj = JSON.parse(data);
alert("successfull data received " + JSON.stringify(obj));
var cal = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2015-02-12',
selectable: true,
selectHelper: true,
select: function (start, end) {
var title = prompt('Event Title:');
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
}
$('#calendar').fullCalendar('unselect');
$.ajax({
type: "Post",
url: "/Calendar/dataReceiver",
dataType: "json",
data: { "title": eventData.title },
success: function (data) {
alert("successfull data send " + data);
},
error: function (req, status, error) {
alert(error + req + status);
}
});
},
eventClick: function (calEvent, jsEvent, view) {
alert(calEvent.title + calEvent.start + calEvent.end +obj)
},
dragOpacity: .50,
dragRevertDuration: 1000,
eventColor: '#378006',
eventBackgroundColor: 'gray',
editable: true,
eventStartEditable: true,
eventDurationEditable: true,
dragScroll: true,
eventOverlap: false,
eventLimit: true, // allow "more" link when too many events
events:
[
{
title: 'All Day Event',
start: '2015-02-01'
},
{
id: 999,
title: 'Repeating Event',
start: '2015-02-09T16:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2015-02-28'
}
]
});
},
error: function (req, status, error) {
alert(error + req + status);
var div = $('#SearchItemDiv');
div.html("");
div.append('Error');
}
});
}
</script>
function calendarcreate() {
$.ajax({
type: "Post",
url: "/Calendar/datasender",
dataType: "html",
data: {},
success: function (data) {
$.each(data, function (i, item)
{
item.start = new Date(item.start);
item.end = new Date(item.end);
});
obj = JSON.parse(data);
alert("successfull data received " + JSON.stringify(obj));
var cal = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2015-02-12',
selectable: true,
selectHelper: true,
select: function (start, end) {
var title = prompt('Event Title:');
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
}
$('#calendar').fullCalendar('unselect');
$.ajax({
type: "Post",
url: "/Calendar/dataReceiver",
dataType: "json",
data: { "title": eventData.title },
success: function (data) {
alert("successfull data send " + data);
},
error: function (req, status, error) {
alert(error + req + status);
}
});
},
eventClick: function (calEvent, jsEvent, view) {
alert(calEvent.title + calEvent.start + calEvent.end +obj)
},
dragOpacity: .50,
dragRevertDuration: 1000,
eventColor: '#378006',
eventBackgroundColor: 'gray',
editable: true,
eventStartEditable: true,
eventDurationEditable: true,
dragScroll: true,
eventOverlap: false,
eventLimit: true, // allow "more" link when too many events
events:
[
{
title: 'All Day Event',
start: '2015-02-01'
},
{
id: 999,
title: 'Repeating Event',
start: '2015-02-09T16:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2015-02-28'
}
]
});
},
error: function (req, status, error) {
alert(error + req + status);
var div = $('#SearchItemDiv');
div.html("");
div.append('Error');
}
});
}
Just added following line in questions and calendar renders:
$.each(data, function (i, item)
{
item.start = new Date(item.start);
item.end = new Date(item.end);
});

Categories