We Keep Coding

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

Limit the number of events created per day in fullcalendar

I am working with fullcalendar. I want to limit the number of events created per day to 4 in week's view.
I have seen this link but it is not of much help
stackoverflow question
eventLimit options only limits the events displayed but I want to stop creating events once 6 events have been created per day in week's view.

Try this.
select: function( start, end, jsEvent, view) {
var eventCounter = 0;
$('#calendar').fullCalendar('clientEvents', function(event) {
if (start.format('YYYY-MM-DD') == event.start.format('YYYY-MM-DD')) {
eventCounter++;
}
});
if (eventCounter < 6) {
// Code to create event
}
}
This works for me locally.

Okay after digging deep and learning more about fullcalender, here is how i did it. it was very easy i must say. `
var event_count=0;// to count the number of events starting from zero
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2016-01-12',
editable: true,
selectable: true,
minTime: '09:00:00',
maxTime: '18:00:00',
columnFormat: 'dddd',
eventLimit: true,
select: function(start, end) {
var eventData = {
start: start,
end: end
};
event_count+=1;//if the control is inside this function increment eventcount
if(event_count<4){
//if the counter is less than four then do this
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
$('#calendar').fullCalendar('unselect');
}
},
eventClick: function(event){
$('#calendar').fullCalendar('removeEvents',event._id);
event_count-=event_count;//decrement event_count when event is removed
},
loading: function(bool) {
$('#loading').toggle(bool);
}
});
$('#view_calendar').on('shown.bs.modal', function () {
$("#calendar").fullCalendar('render');
});
})
`

Creating events on multiple calendars with FullCalendar.js

I am using the FullCalendar javascript library on my web site to display a calendar for each employee side-by-side. The calendar displays the Day view so it's easy to see everyones schedule for the day.
I have all of the calendars displaying properly side-by-side (each in their own div).
My problem is, when creating a new event by clicking on the calendar, the event always gets created on the last calendar on the page instead of the actual calendar you click on. I have a feeling it has to do with closure in the select callback function.
/*
* Setup calendars for each sales person
*/
var d = $.fullCalendar.parseDate($("#requested_date").val());
//employee id numbers (each employee has own calendar)
var employees = new Array(445,123,999,444);
for(i=0;i<employees.length;i++)
{
var employeeId = employees[i];
//clear any prevoius calendar info
$('#calendar_' + employeeId).html("");
calendar[employeeId] = $('#calendar_' + employeeId).fullCalendar({
header: {
left: '',
center: '',
right: ''
},
year: d.getFullYear(),
month: d.getMonth(),
date: d.getDate(),
defaultView: 'agendaDay',
minTime: 7,
maxTime: 19,
height: 650,
editable: true,
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
calendar[employeeId].fullCalendar('renderEvent',
{
title: "This Estimate",
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
calendar[employeeId].fullCalendar('unselect');
},
events: {
url: 'calendar/'+employees[employeeId],
type: 'POST',
data: {
'personId': employees[employeeId],
'ci_csrf_token': wp_csr_value
},
error: function() {
alert('there was an error while fetching events!');
}
}
});
}
Thanks

when you select a calendar employeesId is equal to 444 so it render event on the last calendar try this:
select: function(start, end, allDay , jsEvent ,view) {
$(view.element).parent().parent().fullCalendar('renderEvent',
{
title: "This Estimate",
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
$(view.element).parent().parent().fullCalendar('unselect');
}

Fullcalendar: How can get selected start and selected end datetime on fullcalendar through calendar object?

I have gone through other post of fullcalendar but i couldn't fine what i need.
In "Select" callback event under fullcalendar, i could get start,end datetime values which are selected by user. I want this values through calendar object as i need to use this in other function.
http://arshaw.com/fullcalendar/docs/selection/select_callback/
Can any one please share me , how to get start/end value through calendar object ?

$(document).ready(function () {
// Calendar
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month'
},
selectable: true,
selectHelper: true,
select: function (start, end, allDay) {
var title = prompt('Event Title:'+start+' '+end);
if (title) {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
//$('.fc-day-content').html('<div style="position: relative; height: 0px;">xxx</div>');
}
calendar.fullCalendar('unselect');
},
editable: true,
});
// Calendar end
});
SEE "start" and "end" in prompt

connect to database data in fullcalendar

I've see the calendar code on arshaw/fullcalendar. And I've changed a little code, but I still don't know how to connect javascript into database..
Here's the original code
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',center: 'title',right: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
var title = prompt('Event Title:');
if (title) {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
},
editable: true,
});
});
And this I changed a bit
$(document).ready(function()
{
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
newwindow=window.open('2.php','name','height=400,width=300');
if (window.focus) {newwindow.focus()}
if (title) {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
},
editable: true,
});
});
Where can I put the connection script ?
Need advise..
Thanks,

You cannot establish a connection directly from javascript to use in full calendar
You have to do this
Create a Servlet/Action Class/ C# Class (whatever we based Controller class);
Connect to database from the Controller
Write the response data as a JSON String
IN the full calendar, add this attribute
events: "servletURL",
When the calendar loads, the events attribute will call the servletURL, using ajax and retrieve the response text to display it in the Calendar