We Keep Coding

How to change the backgound color of varible of .js file during output

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
});
});

fullcalendar data from json object

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");
}
})

How to create an event calendar in mvc

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
});
}

fullcalendar - How to load all events on calendar using ajax

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);
}
});
});

FullCalendar jQuery plug-in fires ajax events for every event (hover, mouseover, resize, ect...) when lazyFetching is set to false

I'm using FullCalendar to display events, which I'm getting through a javascript function that makes an AJAX call. This is done to send a limiter on how many events to pass back for a given day, with a ViewMore option included.
By turning off lazyFetching, the result seems to be that FullCalendar does a re-render for every event that's fired on the page. This results in it doing a new AJAX call each time.
How can I prevent FullCalendar from making these unnecessary AJAX calls?
below is the code for initializing my fullCalendar. Thanks!
$('#calendar').fullCalendar({
defaultView: 'basicWeek',
theme: true,
isRTL: isRightToLeft,
contentHeight: 800,
weekends: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
lazyFetching: false,
columnFormat: {
month: 'ddd',
week: 'ddd ' + shortMonthDayPattern,
day: 'dddd ' + shortMonthDayPattern
},
titleFormat: {
month: yearMonthPattern, // September 2009
week: "MMM d[ yyyy]{ '—'[ MMM] d yyyy}", // Sep 7 - 13 2009
day: longDatePattern // Tuesday, Sep 8, 2009
},
dayClick: function (date, allDay, jsEvent, view) {
if (view.name != 'basicDay') {
$('#calendar').fullCalendar('changeView', 'basicDay');
$('#calendar').fullCalendar('gotoDate', date);
}
},
eventClick: function (event, jsEvent, view) {
if (event.id === "viewMore") {
$('#calendar').fullCalendar('changeView', 'basicDay');
$('#calendar').fullCalendar('gotoDate', event.start);
}
else {
navigateBackboneCal(event.id);
}
},
editable: false,
loading: function (isLoading) {
if (isLoading) {
$('.fc-content').block({
message: null,
css: { top: '10' }
});
}
else {
$('.fc-content').unblock();
}
},
viewDisplay: function (view) {
},
events: function (startDt, endDt, callback) {
var maxEvents = 0;
var view = $('#calendar').fullCalendar('getView');
if (view.name === 'month')
maxEvents = 5;
else if (view.name === 'basicWeek')
maxEvents = 30;
var events = [];
$.ajax({
url: '/GetCalendarEvents',
type: 'POST',
data: { start: Math.round(startDt.getTime() / 1000), end: Math.round(endDt.getTime() / 1000), maxEvents: maxEvents },
error: function (error) {
alert('There was an error while fetching events!');
$('.fc-content').unblock();
},
success: function (result) {
if (result.viewMoreEvents)
events = $.merge(result.events, result.viewMoreEvents);
callback(events);
}
});
}
});