SO AFTER THREE DAYS OF STRUGGLE, I GOT IT TO WORK! I added events from database to add to the jquery fullcalender. this is what solved my problem! Here is my code
My html and javascript code
<!-- Main content -->
<section class="content">
<div class="row">
<div class="col-md-3">
<div class="box box-solid">
<div class="box-header with-border">
<h4 class="box-title">Draggable Events</h4>
</div>
<div class="box-body">
<!-- the events -->
<div id="external-events">
<div runat="server" id="check">
</div>
<div class="checkbox">
<label for="drop-remove">
<input type="checkbox" id="drop-remove">
remove after drop
</label>
</div>
</div>
</div>
<!-- /.box-body -->
</div>
<!-- /. box -->
<div class="box box-solid">
<div class="box-header with-border">
<h3 class="box-title">Create Event</h3>
</div>
<div class="box-body">
<div class="btn-group" style="width: 100%; margin-bottom: 10px;">
<!--<button type="button" id="color-chooser-btn" class="btn btn-info btn-block dropdown-toggle" data-toggle="dropdown">Color <span class="caret"></span></button>-->
<ul class="fc-color-picker" id="color-chooser">
<li><a class="text-aqua" href="#"><i class="fa fa-square"></i></a></li>
<li><a class="text-blue" href="#"><i class="fa fa-square"></i></a></li>
<li><a class="text-light-blue" href="#"><i class="fa fa-square"></i></a></li>
<li><a class="text-teal" href="#"><i class="fa fa-square"></i></a></li>
<li><a class="text-yellow" href="#"><i class="fa fa-square"></i></a></li>
<li><a class="text-orange" href="#"><i class="fa fa-square"></i></a></li>
<li><a class="text-green" href="#"><i class="fa fa-square"></i></a></li>
<li><a class="text-lime" href="#"><i class="fa fa-square"></i></a></li>
<li><a class="text-red" href="#"><i class="fa fa-square"></i></a></li>
<li><a class="text-purple" href="#"><i class="fa fa-square"></i></a></li>
<li><a class="text-fuchsia" href="#"><i class="fa fa-square"></i></a></li>
<li><a class="text-muted" href="#"><i class="fa fa-square"></i></a></li>
<li><a class="text-navy" href="#"><i class="fa fa-square"></i></a></li>
</ul>
</div>
<!-- /btn-group -->
<div class="input-group">
<input id="new-event" type="text" class="form-control" placeholder="Event Title">
<div class="input-group-btn">
<button id="add-new-event" type="button" class="btn btn-primary btn-flat">Add</button>
</div>
<!-- /btn-group -->
</div>
<!-- /input-group -->
</div>
</div>
<br />
<button onclick="saveEvent();">Save</button>
</div>
<!-- /.col -->
<div class="col-md-9">
<div class="box box-primary">
<div class="box-body no-padding">
<!-- THE CALENDAR -->
<div id="calendar"></div>
</div>
<!-- /.box-body -->
</div>
<!-- /. box -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</section>
<!-- /.content -->
</ContentTemplate>
</asp:UpdatePanel>
<!-- jQuery 2.2.0 -->
<!-- Page specific script -->
<script>
var data2="";
var startDateFinal="";
var endDateFinal="";
var eventNameFinal="";
$(function () {
/* initialize the external events
-----------------------------------------------------------------*/
function ini_events(ele) {
ele.each(function () {
// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
// it doesn't need to have a start or end
var eventObject = {
title: $.trim($(this).text())
};
// store the Event Object in the DOM element so we can get to it later
$(this).data('eventObject', eventObject);
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 1070,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
}
ini_events($('#external-events div.external-event'));
/* initialize the calendar
-----------------------------------------------------------------*/
//Date for the calendar events (dummy data)
var date = new Date();
var d = date.getDate(),
m = date.getMonth(),
y = date.getFullYear();
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
<%--events: {
$.ajax({
type: "POST",
url: '<%= ResolveUrl("EmpHolidays.aspx/TestOnWebService") %>',
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (doc) {
alert("Success");
var events = [];
alert(doc.d);
var obj = $.parseJSON(doc.d);
for(var i=0;i<obj.length;i++){
title: 'All Day Event',
start: new Date(y, m, 1),
backgroundColor: "#f56954", //red
borderColor: "#f56954" //red
console.log(obj[i]['id']);
console.log(obj[i]['title']);
console.log(obj[i]['start']);
console.log(obj[i]['end']);
}
//$(obj.event).each(function () {
// events.push({
// id: $(this).attr('id'),
// title: $(this).attr('title'),
// start: $(this).attr('start'),
// end: $(this).attr('end'),
// backgroundColor: "#0073b7",
// borderColor: "#0073b7"
// });
// });
//callback(events);
callback && callback(events);
},
error: function(xhr, status, error) {
alert(xhr.responseText);
}
});
events: [
{
title: 'All Day Event',
start: new Date(y, m, 1),
backgroundColor: "#f56954", //red
borderColor: "#f56954" //red
},
{
title: 'Long Event',
start: new Date(y, m, d - 5),
end: new Date(y, m, d - 2),
backgroundColor: "#f39c12", //yellow
borderColor: "#f39c12" //yellow
},
{
title: 'Meeting',
start: new Date(y, m, d, 10, 30),
allDay: false,
backgroundColor: "#0073b7", //Blue
borderColor: "#0073b7" //Blue
},
{
title: 'Lunch',
start: new Date(y, m, d, 12, 0),
end: new Date(y, m, d, 14, 0),
allDay: false,
backgroundColor: "#00c0ef", //Info (aqua)
borderColor: "#00c0ef" //Info (aqua)
},
{
title: 'Birthday Party',
start: new Date(y, m, d + 1, 19, 0),
end: new Date(y, m, d + 1, 22, 30),
allDay: false,
backgroundColor: "#00a65a", //Success (green)
borderColor: "#00a65a" //Success (green)
},
{
title: 'Click for Google',
start: new Date(y, m, 28),
end: new Date(y, m, 29),
url: 'http://google.com/',
backgroundColor: "#3c8dbc", //Primary (light-blue)
borderColor: "#3c8dbc" //Primary (light-blue)
}
]
$.ajax({
type: "GET",
url: '<%= ResolveUrl("EmpHolidays.aspx/TestOnWebService") %>',
data: {
name: $(this).attr('name'),
startDate: $(this).attr('startDate'),
endDate: $(this).attr('endDate'),
},
success: function(events)
{
$('#calendar').fullCalendar('removeEvents');
$('#calendar').fullCalendar('addEventSource', events);
$('#calendar').fullCalendar('rerenderEvents' );
}
});
},--%>
// events: function () {
// var data = getData();
// console.log(data);
// //var events = [];
// // $.each(data, function (key, val) {
// // events.push({
// // title: val.title,
// // start: val.start,
// // end: val.end
// // });
// // });
// //callback(events);
//},
buttonText: {
today: 'today',
month: 'month',
week: 'week',
day: 'day'
},
eventDrop: function (event, dayDelta, minuteDelta, allDay, revertFunc) {
debugger;
if (event.forceAllDay && !allDay) {
revertFunc();
} else {
if (!confirm('Move event?')) {
revertFunc();
} else {
console.log(event.id);
}
}
},
eventDrop: function (event, delta, revertFunc) {
//inner column movement drop so get start and call the ajax function......
//debugger;
console.log(event.start.format());
console.log(event.id);
var defaultDuration = moment.duration($('#calendar').fullCalendar('option', 'defaultTimedEventDuration'));
var end = event.end || event.start.clone().add(defaultDuration);
var n = 1;
var dateMnsFive2 = moment(end).subtract(n , 'day');
var date2 = dateMnsFive2.format("YYYY-MM-DD");
console.log('end is ' + date2);
//alert(event.title + " was dropped on " + event.start.format());
//***********************************
startDateFinal = event.start.format();
endDateFinal = date2;
eventNameFinal = event.title;
//**********************************
},
editable: true,
droppable: true, // this allows things to be dropped onto the calendar !!!
drop: function (date, event, allDay) { // this function is called when something is dropped
console.clear();
console.log("dropped");
console.log(date.format());
var defaultDuration = moment.duration($('#calendar').fullCalendar('option', 'defaultTimedEventDuration'));
var end = date.clone().add(defaultDuration); // on drop we only have date given to us
console.log('end is ' + end.format());
// retrieve the dropped element's stored Event Object
var originalEventObject = $(this).data('eventObject');
console.log(originalEventObject["title"]);
//***********************************
startDateFinal = date.format();
endDateFinal = end.format();
eventNameFinal = originalEventObject["title"];
//**********************************
// 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;
copiedEventObject.backgroundColor = $(this).css("background-color");
copiedEventObject.borderColor = $(this).css("border-color");
// 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();
}
},
eventResize: function(event,dayDelta,minuteDelta,revertFunc) {
var n = 1;
var dateMnsFive = moment(event.end.format()).subtract(n , 'day');
var date = dateMnsFive.format("YYYY-MM-DD");
alert(event.title + " end is now " + date);
//*************************************
eventNameFinal = event.title;
endDateFinal = date;
//*************************************
},
events: function (start, end, callback) {
$.ajax({
type: "POST", //WebMethods will not allow GET
url: '<%= ResolveUrl("EmpHolidays.aspx/TestOnWebService") %>', //url of a webmethod - example below
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (doc) {
var events = []; //javascript event object created here
var obj = $.parseJSON(doc.d); //.net returns json wrapped in "d"
for(var i=0;i<obj.length;i++){
console.log(obj[i]['id']);
console.log(obj[i]['title']);
console.log(obj[i]['start']);
console.log(obj[i]['end']);
addCalanderEvent(obj[i]['id'],obj[i]['start'],obj[i]['end'],obj[i]['title']);
}
//callback(events);
}
});
}
<%--events: {
type: "POST",
url: '<%= ResolveUrl("EmpHolidays.aspx/TestOnWebService") %>',
contentType: "application/json; charset=utf-8",
dataType: "json",
data: {
title: $(this).attr('title'), //your calevent object has identical parameters 'title', 'start', ect, so this will work
start: $(this).attr('start'), // will be parsed into DateTime object
end: $(this).attr('end'),
id: $(this).attr('id')
},
error: function() {
alert('there was an error while fetching events!');
},
color: 'yellow', // a non-ajax option
textColor: 'black' // a non-ajax option
}--%>
});
/* ADDING EVENTS */
var currColor = "#3c8dbc"; //Red by default
//Color chooser button
var colorChooser = $("#color-chooser-btn");
$("#color-chooser > li > a").click(function (e) {
e.preventDefault();
//Save color
currColor = $(this).css("color");
//Add color effect to button
$('#add-new-event').css({"background-color": currColor, "border-color": currColor});
});
$("#add-new-event").click(function (e) {
e.preventDefault();
//Get value and make sure it is not null
var val = $("#new-event").val();
if (val.length == 0) {
return;
}
//Create events
var event = $("<div />");
event.css({"background-color": currColor, "border-color": currColor, "color": "#fff"}).addClass("external-event");
event.html(val);
$('#external-events').prepend(event);
//Add draggable funtionality
ini_events(event);
//Remove event from text input
$("#new-event").val("");
});
});
function saveEvent(){
console.clear();
console.log(startDateFinal +" - "+ endDateFinal+" - "+eventNameFinal);
$.ajax({
type: "POST",
url: '<%= ResolveUrl("EmpHolidays.aspx/saveEvent") %>',
data: "{'startYear':'" + startDateFinal + "', 'endYear':'" + endDateFinal + "', 'eventName':'" + eventNameFinal + "'}",
contentType: "application/json; charset=utf-8",
dataType: 'json',
success: function (response) {
if (response.d) {
debugger;
}
else {
debugger;
}
},
failure: function (response) {
debugger;
}
});
}
function getData() {
var data3;
$.ajax({
type: "POST",
url: '<%= ResolveUrl("EmpHolidays.aspx/TestOnWebService") %>',
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
async:false,
success: function (doc) {
data3 = $.parseJSON(doc.d);
data3 = JSON.stringify(data3)
},
error: function(xhr, status, error) {
alert(xhr.responseText);
}
});
return data3;
}
function addCalanderEvent(id, start, end, title)
{
console.log(id + start + end + title);
var eventObject = {
title: title,
start: start,
end: end,
id: id,
allDay: true
};
$('#calendar').fullCalendar('renderEvent', eventObject, true);
return eventObject;
}
</script>
<script src="../plugins/jQuery/jQuery-2.2.0.min.js"></script>
<!-- Bootstrap 3.3.5 -->
<script src="../bootstrap/js/bootstrap.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<!-- Slimscroll -->
<script src="../plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="../plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="../dist/js/app.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="../dist/js/demo.js"></script>
<!-- fullCalendar 2.2.5 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="../plugins/fullcalendar/fullcalendar.min.js"></script>
Here is the code behind function which returns json data from db
[WebMethod]
public static String TestOnWebService()
{
int i = 1;
string myJsonString = "";
List<object> myList = new List<object>();
dt = db.getPublicHolidays();
foreach (DataRow dr in dt.Rows)
{
var id = i;
var title = dr["name"].ToString();
var start = dr["startDate"].ToString();
var end = dr["endDate"].ToString();
//Convert Implicity typed var to Date Time
DateTime RealStartDate = Convert.ToDateTime(start);
DateTime RealEndDate = Convert.ToDateTime(end);
//Convert Date Time to ISO
String SendStartDate = RealStartDate.ToString("s");
String SendEndDate = RealEndDate.ToString("s");
//string start2 = ((RealStartDate.Ticks - 621355968000000000) / 10000000).ToString();
//string end2 = ((RealEndDate.Ticks - 621355968000000000) / 10000000).ToString();
Events t_table = new Events(id, title, SendStartDate, SendEndDate);
myList.Add(t_table);
i++;
}
myJsonString = (new JavaScriptSerializer()).Serialize(myList);
return myJsonString;
}
}
AND MY EVENTS CLASS
public class Events
{
public int id { get; set; }
public String title { get; set; }
public String start { get; set; }
public String end { get; set; }
public Events(int id2, String I, String t, String ds)
{
this.id = id2;
this.title = I;
this.start = t;
this.end = ds;
}
}
HERE IS THE OUTPUT :D :D
