I want to load all events in full calendar using Ajax when the page loads.I am getting response from Ajax.But the event is not added in Full calendar.
here is my jquery code
$('#calendar').fullCalendar({
theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2014-06-12',
editable: true,
events: function(start,end,callback){
var mydata = {
action: "fw_ajax_callback",
subaction: "get_myappointments",
};
$.ajax({
url :ajax_url,
type: 'POST',
data: mydata,
dataType: 'json',
success:function(appointments){
var events = [];
if(!!appointments){
$.map( appointments, function( r ) {
events.push({
title: r.title,
start: r.start,
end: r.start
});
});
}
callback(events);
}
})
}
});
From my console I found an error stating callback is not a function.Please help me i am a newbie.
I think you are making what is supposed to be easy look very complex: I have added a JSFiddle Link to show you how it work.
$('#calendar').fullCalendar({
//theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: moment().format("YYYY-MM-DD"),
editable: true,
events: {
url: 'http://www.json-generator.com/api/json/get/ccUKVDYErS?indent=2',
error: function() {
$('#script-warning').show();
},
success: function(){
alert("successful: You can now do your stuff here. You dont need ajax. Full Calendar will do the ajax call OK? ");
}
},
loading: function(bool) {
$('#loading').toggle(bool);
}
});
});
Related
I am working on my project to calculate the vistors time, and i want to highlight the visitors who visit after 6:OO pm with red color and rest of them with green color in short i am trying a conditional formatting on timestamp. The variable start: moment(data.Logdate) is responsible to get the date time from database.
The code snippet is as under:
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
buttonText: {
today: 'today',
month: 'month',
week: 'week',
day: 'day'
},
events: function(start, end, timezone, callback, Status) {
$.ajax({
// url: '/Home/Index',
type: "GET",
dataType: "JSON",
success: function(result) {
var events = [];
$.each(result, function(i, data) {
events.push({
title: data.Status,
start: moment(data.Logdate),
//backgroundColor: "#dcdcdc",
// color:"#000000",
//if(moment(data.Logdate).format('HH:MM')>'18:00')backgroundColor:"#dcdcdc", else backgroundColor:"#dcdcdc"
});
});
callback(events);
}
});
},
eventRender: function(event, element) {
element.qtip({
content: event.description
});
},
editable: false
});
});
I load json from a php file but the json contains other data. The events are placed in the 'fullcalendar' object but i do not know how i can select the data.
I load current the data with this code, can someone point me in the right direction?
Greathings Christophe VD
$('#Agenda').fullCalendar({
lang: 'nl',
height: "parent",
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
events: {
url: json_url,
type: 'POST',
data: {
actie: "GetList"
},
success: function(data) {
return data.fullCalendar;
},
error: function(data) {
alert('Systeemfout.');
}
},
eventClick: function(calEvent, jsEvent, view) {
var huur_id = calEvent.id;
weergave(huur_id);
},
dayClick: function(date, jsEvent, view) {
var label = date.format("d-MM-YYYY");
}
})
I want to do Event/Scheduler calendar in asp.net MVC. So far I've written this code for the database table in , but something doesn't work.
The controller code :
public ActionResult Index()
{
return View();
}
public JsonResult GetEvents()
{
var events = db.MedicationTrackers.ToList();
return new JsonResult { Data = events, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}
and the View-Index code
#model IEnumerable<LICENTA.Database.MedicationTracker>
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
#section Scripts {
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<scripts src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></scripts>
<script>
$(document).ready(function () {
var events = [];
$.ajax({
type: "GET",
url: "/MedicationTrackers/GetEvents",
success: function (data) {
$.each(data, function(i,v){ //i=index v=value
events.push({
title: v.IdMember,
description: v.IdMedication,
start: moment(v.Start),
end: v.Stop != null? moment(v.End):null,
status: v.Status
})
})
GenerateCalendar(events);
},
error: function (error) {
alert("Error occured!!")
}
})
})
function GenerateCalendar(events) {
$('calender').fullCalendar('destroy'); //clear first
$('calender').fullCalendar({
contentheight: 400,
defaultdate: new date(),
timeformat: 'h(:mn)a',
header: {
left: 'prev,next today',
center: 'title',
right: 'month, basicweek, basicday, agenda'
},
eventlimit: true,
eventcolor: '#378006',
events: events
}}
</script>
When I run the project the ajax error appear. I tried to test just the calendar to see if it works but it does not appear on the page.
A calender is not an html element. You need to add a div to your view with an id:
<div id="calendar"><div>
And update your javascript:
function GenerateCalendar(events) {
$('#calendar').fullCalendar('destroy'); //clear first
$('#calendar').fullCalendar({
contentheight: 400,
defaultdate: new date(),
timeformat: 'h(:mn)a',
header: {
left: 'prev,next today',
center: 'title',
right: 'month, basicweek, basicday, agenda'
},
eventlimit: true,
eventcolor: '#378006',
events: events
});
}
Good evening everyone!
I need to show the FullCalendar events of my agenda.
I have a list of events in my database and my method returns database data via json (DAO jsp). I'm using dataSet and End date because Java does not support the use of the attributes of reserved words.
my json returns this:
[{"id": 3,"title": "Alexandre Garcia","dataStart": "05/09/2016 20:00","dataEnd": "05/09/2016 21:00"}]
my javascript:
<script type="text/javascript">
$(document).ready(function () {
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'agendaWeek',
timezone: "local",
ignoreTimezone: false,
editable: false,
selectable: true,
minTime: "07:00:00",
maxTime: "17:00:00",
slotDuration: "00:60:00",
allDay: false,
events: function (start, end, timezone, callback) {
$.ajax({
url: 'app.json',
type: "GET",
datatype: 'json',
success: function (doc) {
var events = [];
if (doc != undefined && doc.length > 0) {
doc.forEach(function (entry) {
events.push({
title: entry.title,
start: entry.dataStart,
end: entry.dataEnd
});
});
}
callback(events);
}, error: function (err) {
alert('Error in fetching data');
}
});
},
eventClick: function (calEvent, jsEvent, view) {
alert(calEvent.title);
}
});
});
</script>
but my calendar is always empty, could help me?
I used this full calendar which takes events from ajax call
i want it to get new ajax values on button click event, how could this work?
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2014-09-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
events:{
url: 'emp-attendance-ajax.php?id=' + id
},
});
if you need to update one event ( better because faster ) :
.fullCalendar( 'updateEvent' , event )
else I think it's
.fullCalendar( 'refetchEvents' )
It's resolved i used this
events: {
url: 'emp-attendance-ajax.php',
type: 'POST',
data: function() { // a function that returns an object
return {
id: id
};
}
},
instead of this one
events:{
url: 'employees-attendance/emp-attendance-ajax.php?id=' + i++
},
and it's worked