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

Full Calendar listDay error: spec.class is not a constructor

According to the fullCalendar documentation there are nine different views available. Five of these views have demos while the others do not. Becuase the monthly view is not responsive I am interested in having the view change into the dayList view when on mobile. The default view is currently month but when setting this to defaultView: listDay as a property of the plugin I get the following error:
spec.class is not a constructor
I am using version 2.7.2 with the correct style sheets from a CDN. I am most interested in having my calendar display similar to the calendar found at https://fullcalendar.io/docs/list_view/intro/
Here is what my code looks like to generate my calendar.
$('#calendar').fullCalendar({
defaultView: 'listDay',
eventColor: '#9ADCC6',
eventTextColor: '#000',
header: {
left: 'title',
center: '',
right: 'today prev, next',
},
displayEventEnd: true,
buttonIcons: {
prev: 'left-single-arrow',
},
eventClick: function(event, jsEvent, view){
$('.myModal3 .title').text(event.title);
$('.myModal3 .date').text(event.start.format('MMM Do YYYY # h:mm:ss a'));
$('.myModal3 .modal-body').text(event.desc);
$('.myModal3 .modal-body').append(" <a href='"+event.link+"' target='_blank'>Learn More</a>");
$('.myModal3').css('display','block');
$('.myModal3.fade').css('opacity', '1');
},
events: function(start, end, timezone, callback) {
$.ajax({
url: '/events-iu-rss/calendar.asp',
data: {
start: start.unix(),
end: end.unix()
},
success: function(doc) {
var events = [];
// e = key, a = value
$(doc).find('event').each(function(e, a) {
var time = $(a).find('start-date-time').text();
//Wed, 16 Sep 2015 10:00:00 EDT
var endTime = $(a).find('end-date-time').text();
var formatEndTime = moment(endTime).format();
var formatTime = moment(time).format();
//console.log(a);
//console.log(formatTime.substr(11));
//console.log(formatEndTime.substr(11));
html = $.parseHTML( $(a).find('description').text() );
//stripping out first 11 characters of formatTime and formatEndTime, comparing the two times, and setting allDay value based on result
if((formatTime.substr(11))==(formatEndTime.substr(11))){
events.push({
title: $(a).find('summary').text(),
link: $(a).find('event-url').text(),
start: formatTime,
end: formatEndTime,
allDay: true,
desc: $($.parseHTML( $(a).find('description').text() )).html()
});
}
else{
events.push({
title: $(a).find('summary').text(),
link: $(a).find('event-url').text(),
start: formatTime,
end: formatEndTime,
allDay: false,
desc: $($.parseHTML( $(a).find('description').text() )).html()
});
}
});
callback(events);
}
});
}
});

Fullcalendar and jsp

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?

Add event to every day if the day is empty

To better understand my question, take a look at the JSFiddle Example.
Basically there are tree kinds of unique items on the calendar that are all day events: Today, Completed, and Incomplete days. I need to figure a way to populate days that don't have anything on them (Today, or Incomplete), in this case they would be populated with "Completed". How can I figure out what these days are?
Also any way to limit the calendar to a set months range? For instance Quarter 1 would be Dec 1st to Mar 31st.
//Calendar
$(document).ready(function() {
// Figure out todays date and provide link to enter data
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
// Staff Data Calendar
$('#calendar-staff').fullCalendar({
header: {
left: '',
center: 'title',
},
businessHours: true, // display business hours
handleWindowResize: true, // responsive layout
editable: false,
events: [
// red areas where no events can be dropped
{
title: 'No Data',
start: '2015-02-03',
url: '#',
color: '#E64C65'
},
{
title: 'No Data',
start: '2015-02-17',
url: '#',
color: '#E64C65'
},
{
// Display Today
title: 'Enter Data for Today',
url: 'staffing_data_edit.html',
color: '#5E9EF3',
start: new Date(y, m, d)
}
]
});
});

You can use and apply a custom check on a event dayRender Click here for reference
Or you can use event eventAfterAllRender which call after the calendar is ready to draw. you can use a loop and check the empty days.
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2018-10-25',
navLinks: true, // can click day/week names to navigate views
selectable: false,
selectHelper: true,
select: function(start, end) {
},
dayRender: function(date, cell )
{
console.log(date);
console.log(cell);
},
eventRender: function(event, element, view) {
},
eventAfterAllRender: function(view)
{
if (view.name == "month") {
var allEvents = $('#calendar').fullCalendar('clientEvents');
for (var index in allEvents) {
var event = allEvents[index];
}
}
},
eventClick: function(event) {
return false;
},
loading: function(bool) {
//$('#loading').toggle(bool);
},
timezone: true,
editable: false,
eventLimit: true, // allow "more" link when too many events
eventLimitTex: 'More shifts',
events: eventsJson
});

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