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);
});
Related
Is there a max amount of data that a bootstrap fullcalendar can hold. it seems to crash after 525 entries. It was working fine till it reached this limit.
It threw an error:
Error: {"Message":"There was an error processing the request.","StackTrace":"","ExceptionType":""}
I am binding my data dynamically.
<script type="text/javascript">
$(document).ready(function () {
var events = [];
$.ajax({
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8",
url: "Dashboard.aspx/GetEvents",
success: function (data) {
$.each(data.d, function (i, v) {
events.push({
title: v.Title,
start: moment(v.VCStartTime),
end: v.VCEndTime != null ? moment(v.VCEndTime) : null
});
})
GenerateCalendar(events);//binds data to calendar
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("Status: " + textStatus); alert("Error: " + XMLHttpRequest.responseText);
}
//error: function (error) {
// alert('failed');
//}
})
Asp.net code for fetching data
[WebMethod]
public static List<events> GetEvents()
{
DataSet ds = new APIProcedure().ByProcedure("calendar_sp", new string[] { "key" },
new string[] { "getvalueForCalendar" }, "USPADDSETTING");
return ds.Tables[0].AsEnumerable().Select(datarow =>
new events()
{
Id = Convert.ToInt32(datarow["Id"]),
Title = Convert.ToString(datarow["Title"]),
Date = Convert.ToDateTime(datarow["Date"]),
StartTime = Convert.ToDateTime(datarow["StartTime"]),
EndTime = Convert.ToDateTime(datarow["EndTime"]),
}
).ToList();
}
public class events
{
public int Id { get; set; }
public string Title { get; set; }
public DateTime Date { get; set; }
public DateTime StartTime { get; set; }
public DateTime EndTime { get; set; }
}
$(document).ready(function () {
$('#calendar').fullCalendar({
contentHeight: 400,
defaultDate: new Date(),
timeFormat: 'h(:mm)a',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
eventLimit: true,
eventColor: '#87c9f0',
events: function (start, end, timezone, callback) {//instead of getting all the data at once get data for visible part of calendar.
var Date1 = new Date(start);
let newdate = JSON.stringify(Date1);
newStartdate = newdate.slice(1, 11);
var Date2 = new Date(end);
let newdate2 = JSON.stringify(Date2);
newEnddate = newdate2.slice(1, 11);
$.ajax({
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: "{ 'StartDate': '" + newStartdate + "', 'EndDate': '" + newEnddate + "' }",//send data to code behind and get data according to start and end date
url: "Dashboard.aspx/GetEvents",
success: function (data) {
var events = [];
$.each(data.d, function (i, v) {
events.push({
title: v.Title,
start: moment(v.VCStartTime),
end: v.VCEndTime != null ? moment(v.VCEndTime) : null
});
})
callback(events);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("Status: " + textStatus); alert("Error: " + XMLHttpRequest.responseText);
}
})
}
I have a kendo grid that is edited inline. One of the fields should be edited selecting an element from a list, but the list must have a hierarchical structure (would be nice be able of filter that list). I was thinking in use a kendo treeview as editor for that field but I haven't found any way to accomplish this. I tried make a custom editor template (using columns.Bound(s => s.FieldId).EditorTemplateName("_TreeEditorTemplate")) that render the treeview, but the treeview is not an input and is not selectable. I also thinked in make an editor that use a kendo dropdownlist with the tree inside but this is no currently supported by kendo. Any ideas???
Have you looked at the sample on the Kendo site: https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Editing/use-treeview-as-grid-editor
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "//demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
UnitPrice: { type: "number", validation: { required: true, min: 1 } },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
},
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
edit: function (e) {
//checking if a cell from the Test column is opened for editing
var dummyInput = e.container.find("input[name='test']");
if (dummyInput.length > 0) {
var treeView = $(e.container).find(".treeViewEditor").data("kendoTreeView");
var originalItem = treeView.findByText(dummyInput.val());
if (originalItem != null) {
// Select the item based on the field value
treeView.select(originalItem);
}
}
},
navigatable: true,
pageable: true,
height: 550,
toolbar: ["create", "save", "cancel"],
columns: [
"ProductName",
{
field: "test", title: "Test", width: 120,
editor: function (container, options) {
var input = $("<input class='tveInput'/>");
input.attr("name", options.field);
var tvDiv = $("<div class='treeViewEditor'></div>");
$(tvDiv).kendoTreeView({
animation: false,
dataSource: [
{
text: "foo1"
},
{
text: "foo2",
items: [
{ text: "bar" },
{ text: "bar1" },
{ text: "bar2" }
]
}
]
});
var treeView = $(tvDiv).data("kendoTreeView");
$(tvDiv).find(".k-in").mousedown(function (e) {
var clickedNode = $(e.toElement).closest("[role=treeitem]");
var dataItem = treeView.dataItem(clickedNode);
var dummyInput = clickedNode.closest("[role=gridcell]").find("input[name='test']");
dummyInput.val(dataItem.text);
dummyInput.trigger("change");
});
tvDiv.appendTo(container);
input.appendTo(container);
}
},
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120 },
{ field: "UnitsInStock", title: "Units In Stock", width: 120 },
{ field: "Discontinued", width: 120 },
{ command: "destroy", title: " ", width: 150 }],
editable: true
});
});
</script>
</div>
<style>
.tveInput {
display: none;
}
</style>
I am using MVC4 ASP.NET and trying to create a Kendo Grid where I can edit data inline. I am connecting to a local database imported into Visual Studio using the Entity Framework. I followed the sample example on Kendos web page from here: http://demos.telerik.com/kendo-ui/grid/editing-inline Here is my View
Edit
When I click on the Update button after modifying an existing record in the Grid, it is not firing up in my Controller UpdateAsset method. I have also added an alert method in the Views update method and have not received the dialog box.
File code:
#{
ViewBag.Title = "Manage Assets";
}
<h2>ManageAssets</h2>
<div id="grid"></div>
<div>
<form style="background-color:#E6E6FA">
Switch:<input type="number" id="switch_txt" /><br />
Port:<input type="text" id="port_txt" /><br />
Name:<input type="text" id="name_txt" /><br />
Connection:<input type="text" id="connection_txt" /><br />
Interface:<input type="text" id="ifc_txt" /><br />
</form>
</div>
<div>
#*<input type="text" id="switchTxt" />*# #*This is Justins original code (JOC) *#
<button onclick="onSave()">Save</button><br />
</div>
<script>
var selectedRow = {};
var crudServiceBaseUrl = "/Asset";
$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/GetAssets",
dataType: "json",
contentType: "application/json"
},
update: {
url: crudServiceBaseUrl + "/UpdateAsset",
dataType: "json",
type: "POST",
contentType: "application/json"
},
destroy: {
url: crudServiceBaseUrl + "/Destroy",
dataType: "jsonp"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
pageSize: 20,
autoSync: true,
schema: {
model: {
id: "Gid",
fields: {
Switch: { type: "number", editable: true, nullable: true, validation: { required: true, min: 1 } },
Port: { type: "string", editable: true, nullable: true },
Name: { type: "string" },
Connection: { type: "string" },
Interface: { type: "string" },
ConnectionUser: { type: "string" },
ConnectionDate: { type: "string" }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
selectable: true,
change: function () {
selectedRow = {
mySwitch: this.dataItem(this.select()).Switch,
myPort: this.dataItem(this.select()).Port,
myName: this.dataItem(this.select()).Name,
myConnection: this.dataItem(this.select()).Connection,
myInterface: this.dataItem(this.select()).Interface
};
alert(selectedRow['mySwitch']);
},
columns: [
{ field: "Switch", title: "Switch", format: "{0:n}", width: "120px" },
{ field: "Port", title: "Port" },
{ field: "Name", title: "Name" },
{ field: "Connection", title: "Connection" },
{ field: "Interface", title: "Interface" },
//{ command: ["edit", "destroy"], title: " ", width: "250px" }],
{ command: [
{
name: "edit",
//click: function(e) {
// alert("you just clicked edit");
//}
},
{ name: "destroy"}
]}],
editable: "inline"
});
});
// when the Save button is pressed this function is called
// the function creates the values for the table columns
function onSave() {
var myJSONObject = {
//switchTxt is coming from the text field div
asset_sw: $("#switch_txt").val(),
asset_port: $("#port_txt").val(),
asset_name: $("#name_txt").val(),
asset_conn: $("#connection_txt").val(),
asset_ifc: $("#ifc_txt").val()
};
//alert(myJSONObject);
$.ajax({
url: crudServiceBaseUrl + "/CreateAsset",
dataType: "json",
type: "POST",
data: myJSONObject, // here we pass the json object that contains all of our data
success: function (result) {
if (result.success == true)
{
alert(result.success);
alert('success');
$('#grid').data('kendoGrid').dataSource.read();
$('#grid').data('kendoGrid').refresh();
}
else {
alert(result.success);
alert('fail success');
}
},
error: function (result) {
alert(result);
alert('fail')
}
});
}
</script>
Hi I am returning a data table from a stored procedure which is used to bind the grid. No Identity field is returned from that data table. in this scenario please help me out with firing 'update', 'destroy' and 'create'.
This is my controller method,
public JsonResult Employee_Read([DataSourceRequest]DataSourceRequest request)
{
DataTable dt = new DataTable();
using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["manualconn"].ConnectionString))
{
var command = new SqlCommand("usp_FetchUserDetails", con);
command.CommandType = CommandType.StoredProcedure;
con.Open();
SqlDataAdapter da = new SqlDataAdapter(command);
da.Fill(dt);
System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
Dictionary<string, object> row;
foreach (DataRow dr in dt.Rows)
{
row = new Dictionary<string, object>();
foreach (DataColumn col in dt.Columns)
{
row.Add(col.ColumnName, dr[col]);
}
rows.Add(row);
}
return Json(rows, JsonRequestBehavior.AllowGet);
}
// }
}
This is the part of my view:
<script type="text/javascript">
var grid = $("#grid").data("kendoGrid");
var Employee = kendo.data.Model.define({
id: "userDetailsId",
fields: {
"userDetailsId": { type: "number" },
"Name": { type: "string" },
"Department": { type: "string" },
"Role": { type: "string" },
"Email": { type: "string" },
}
});
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: '#Url.Action("Employee_Read", "UserSummary")',
dataType: "json",
cache: false,
type: 'GET',
//data: {
// test: $("#Names").val()
//}
},
destroy:
//function (e) {
{
url: '#Url.Action("Update_Details", "UserSummary")',
type: "POST",
// dataType: "json",
//data: {
// DAKy: $("#Names").val(),
// DIKy: $("#btntxt").val()
//}
},
create: {
url: '#Url.Action("Update_Details", "UserSummary")',
type: "POST",
// dataType: "json",
//cache: false,
//data: {
// AKy: $("#Names").val(),
// IKy: $("#btntxt").val()
//}
},
update:
{
url: '#Url.Action("Update_Details", "UserSummary")',
type : "POST"
//data: {
// AKy: $("#Names").val(),
// IKy: $("#btntxt").val()
// }
}
},
error: function (e) {
// handle error
alert("Status: " + e.status + "\n" + e.errorThrown);
},
pageSize: 5,
schema: {
model: {
id: "userDetailsId",
model: Employee
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
editable: "inline",
//toolbar: ["create", "save"],
autobind: true,
pageable: true,
columns: [
//{
// field: "userDetailsId",
// title: "userDetailsId",
// width: "50px",
//},
{
field: "Name",
title: "Name",
width: "75px",
template: "<input id='Name' type='text' value='#: Name #' readonly> </input>",
editable:false,
},
{
field: "Department",
title: "Department",
width: "50px",
editor: ddlFetchDepartments
},
{
field: "Role",
title: "Role",
width: "50px",
editor: ddlFetchRoles
},
{
field: "Email",
title: "Email",
width: "100px",
template: "<input type='text' id='Email' size='35' value='#:Email#' readonly> </input>",
editable:false,
},
{
command: ["edit", "destroy"], title: " ", width: "75px"
},
{ command: { text: "custom edit", click: showDetails },title: " ", width: "60px" }
],
});
function showDetails(e) {
e.preventDefault();
//debugger;
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
alert("View Details\n Name : " + dataItem.Name+"\nuserDetailsId : "+dataItem.userDetailsId);
#{
// ((MockProject.Controllers.UserSummaryController)this.ViewContext.Controller).Update_Details();
}
}
function ddlFetchDepartments(container, options) {
$('<input name="Departments" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
dataTextField: "deptName",
dataValueField: "deptId",
autoBind: false,
dataSource: new kendo.data.DataSource({
transport: {
read: {
url: '#Url.Action("FetchDepartments", "UserSummary")',
type: 'GET',
dataType: "json"
},
schema: {
model: {
id: "deptId",
value: "deptName"
}
}
}
})
});
}
function ddlFetchRoles(container, options) {
$('<input name="Roles" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
dataTextField: "roleName",
dataValueField: "roleId",
autoBind: false,
dataSource: new kendo.data.DataSource({
transport: {
read: {
url: '#Url.Action("FetchRoles", "UserSummary")',
type: 'GET',
dataType: "json"
},
schema: {
model: {
id: "roleId",
value: "roleName"
}
}
}
})
});
}
#*#{
((HomeController)this.ViewContext.Controller).Method1();
}*#
</script>
<br/>
<button type="button" id="btn_addUser" > Add User</button>
<input type="submit" style="visibility:hidden" name="btn_save" class="k-button k-button-icontext" id="btn_save" value="Save" onclick="saveDataToDb()" />
<script type="text/javascript">
function saveDataToDb() {
}
$('#btn_addUser').click(function () {
document.getElementById('btn_save').style.visibility = "visible";
$('#grid').data('kendoGrid').addRow();
});
function onEdit(e) {
//Custom logic to default value
var name = $("#AddSingleSuppliment").text();
// If addition
if (e.model.isNew()) {
//set field
e.model.set("Name", name); // Name: grid field to set
}
}
</script>
<script>
$(document).ready(function () {
$("#btn_addUser").kendoButton({
spriteCssClass: "k-icon iconplus"
});
});
</script>
<style scoped>
.k-button .k-image {
height: 16px;
}
.demo-section {
width: 500px;
}
.iconplus {
background-image: url("../content/icons/plus.png");
background-size: contain;
/*background-position: 0 -64px;
align-content: flex-start;
align-self: auto;*/
}
</style>
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;
}