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");
}
})
Related
$(document).ready(function() {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var booking = #json($events);
$('#calendar').fullCalendar({
header: {
left: 'prev, next today',
center: 'title',
right: 'month, agendaWeek, agendaDay',
},
});
});
Whenever I implement the code above, the full calendar doesn't show but when I comment out var booking = #json($events);, the full calendar appears.
I tried the code below and it still didn't work:
$(document).ready(function () {
var events = JSON.parse('#json($events)');
console.log(events)
$('#calendar').fullCalendar({
header: {
left: 'prev,next,today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
}
})
});
Any help is greatly appreciated.
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 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 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);
}
});
});