Develop Reference

Fullcalendar 3 - Get current instance on Select function

I use Fullcalendar 3, and I have several instances of Calendars.
I want to select the current instance on select function, for now I have :
$('.calendar').fullCalendar({
defaultDate: moment('2000-01-03'),
allDaySlot: false,
selectable: true,
editable: true,
select: function(start, end, allDay) {
console.log(this);
// this does nothing
// before I had $('#calendar').fullCalendar('....');
this.el.fullCalendar('renderEvent', {
start: start,
end: end,
allDay: allDay
},
false // make the event "stick"
);
this.el.fullCalendar('unselect');
},
Before I used $('#calendar').fullCalendar('....');, but now I have different instances.
How can I use a function like renderEvent inside the select function ? Using the current instance ?

Ok this way is working :
select: function(start, end, allDay) {
this.calendar.el.fullCalendar('renderEvent', {
start: start,
end: end,
allDay: allDay
},
false // make the event "stick"
);
this.calendar.el.fullCalendar('unselect');
},
And for example, on eventClick event, I had to use another one :
eventClick: function(calEvent, jsEvent, view) {
if(confirm("Voulez-vous supprimer cet horaire ?")) {
// delete in frontend
calEvent.source.calendar.el.fullCalendar('removeEvents', calEvent.id);
}
}

How to unselect one and multiple selected date in Fullcalendar?

I am using full calendar js in my code. I am able to select multiple dates in the calendar but I am not able to unselect the selected dates. Where do I need to changes in my code?
IN HTML FILE
<div class ="main-container fullcalendar-booking-course unselectCancel">
<div id="calendar"></div>
</div>
IN MY JS FILE
<script type="text/javascript">
$(document).ready(function() {
getFullCalendar();
</script>
<script type="text/javascript">
function getFullCalendar(){
$('#calendar').fullCalendar({
header: {
left: 'prev,next',
center: 'title',
right: 'month,agendaWeek'
},
views: {
month: {
titleFormat: 'YYYY, MM, DD'
}
},
validRange: function(nowDate) {
return {
start: nowDate,
end: nowDate.clone().add(1, 'months')
};
},
navLinks: true,
selectable: true,
selectHelper: true,
select: function(start, end) {
startDate = moment(new Date(start)).format("MM-DD-YYYY");
endDate = moment(new Date(end)).format("MM-DD-YYYY");
$("#calendar").fullCalendar('addEventSource', [{
start: start,
end: end,
rendering: 'background',
block: true,
}]);
$("#calendar").fullCalendar("unselect");
},
selectOverlap: function(event) {
return ! event.block;
},
editable: true,
eventLimit: true,
events: function(start, end, timezone, callback){
},
eventClick: function(event, jsEvent, view) {
},
loading: function(bool) {
$('#loading').toggle(bool);
},
eventRender: function(event, element){
},
eventAfterAllRender: function (view) {
var quantity = $('.fc-bgevent').length;
$("#quantity").val(quantity);
},
});
}
</script>
NOTE:
I am using fullcalendar js file and CSS file. I have initialized the function in the document ready function. I need to unselect the selected dates. I can select multiple dates but unable to unselect the dates.

How to add events in fullcalendar with scheduler.js?

I don't know how to add events in fullcalendar scheduler.js, can anyone help me?
I can add events with fullcalendar but without scheduler.js that works.
When I add this code to my script the event won't add
select: function(start, end)
{
this.title = prompt('Event Title:');
this.eventData;
if (this.title) {
this.eventData = {
title: this.title,
start: start,
end: end
};
$('#calendar').fullCalendar('renderEvent', this.eventData, true); // stick? = true
}
$('#calendar').fullCalendar('unselect');
},

You need to load resource and specify your resource ID in your event as well. So if you put these it will work out. Try this code.
select: function(start, end)
{
this.title = prompt('Event Title:');
this.eventData;
if (this.title) {
this.eventData = {
title: this.title,
start: start,
end: end,
resourceId:['ResourceID1'] // Example of resource ID
};
$('#calendar').fullCalendar('getResources')// This loads the resources your events are associated with(you have toload your resources as well )
$('#calendar').fullCalendar('renderEvent', this.eventData, true); // stick? = true
}
$('#calendar').fullCalendar('unselect');
},
Resource example is as follows:
$('#calendar').fullCalendar({
header: {left: 'prev,next today', center: 'title', right: ''},
selectable: true,
allDayDefault: false,
unselectAuto: false,
editable: false,
slotLabelFormat:"HH:mm",
resources: [[id:'ResourceID1', title:"Just a title"],[id:'ResourceID2', title:"Just a title part II"]]
})

Json data not displaying correctly

I have fullcalendar with some JSON data. It shows up as "12a Medical Day Jackson Post". Otherwise the display is fine. When I change the dates to be "start":"12/2/2015" to this 2015-2-12. The 12a appen disappears.
The Code for fullcalendar used is this
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek'
},
defaultDate: '2015-03-11',
defaultView: 'month',
selectable: false,
selectHelper: false,
select: function(start, end) {
var title = prompt('Event Title:');
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
}
$('#calendar').fullCalendar('unselect');
},
editable: true,
eventLimit: true, // allow "more" link when too many events
eventMouseover: function(event, jsEvent, view) {
if (view.name !== 'agendaDay') {
$(jsEvent.target).attr('title', event.title);
}
},
events:[
{
"title":"Medical Day Jackson Post",
"start":"12/2/2015",
"end":"12/3/2015",
"description":"Jackson"
},

By default it shows the time unless the event is an allDay event. If allDay isn't specified, it guesses and in your case, it guessed differently depending on the date format.
So, either make allDay explicit in you events, or stop the time from displaying on all events with timeFormat: "", as one of you fullCalendar options.

How to make fullcalendar do a selection twice?

I want to make two selections in the calendar. Right now I can only make one that goes to one of my inputs.
I am trying to select a date on the calendar, then that first selection goes to my first input tag.
Then after that I want to select a different date that goes to my second input tag.
So basically, I want to make two selections. Here is my code. Do I need to make a callback somewhere here? I put my code on jsfiddle.
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month'
},
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
var title = 'true';
if (title === 'true') {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
var eventStart = $.fullCalendar.formatDate(start, "MM/dd/yyyy");
var eventEnd = $.fullCalendar.formatDate(end, "MM/dd/yyyy");
$('input[name="startDate"]').val(eventStart);
}
calendar.fullCalendar('unselect');
},
eventClick: function(calEvent, jsEvent, view) {
$('#calendar').fullCalendar('removeEvents', calEvent._id);
$('input[name="startDate"]').removeAttr('value');
$('input[name="endDate"]').removeAttr('value');
},
editable: true
});

Unless I'm not understanding your question, how about doing this?
if($('input[name="startDate"]').val()=='') {
$('input[name="startDate"]').val(eventStart);
} else {
$('input[name="endDate"]').val(eventEnd);
}
JSFIDDLE