Develop Reference

How to make blocked dates not selectable in FullCalendar

I'm using FullCalendar to add events. Now I'm getting a problem trying to disable certain dates.
For example if I have the following dates: 2017-11-12 , 2017-11-15, 2017-11-18, how can I make these dates not selectable (blocked)?
Here is my code:
$(document).ready(function() {
var date = new Date();
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
events: [
{
id: 999,
title: 'event',
start: new Date(2017, 11, 12)
},
],
});
});

Change fullCalendar option (i.e. selectable) after click a button

I have a small problem with fullCalender.js. I am trying to change an option of the calendar after click a button, but it´s not working.
That is my js:
var calendar = $('#calendar');
calendar.fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
defaultView: 'month',
selectable: true
});
$('#but').on(click, function(e) {
calendar.fullCalendar('selectable', false);
});
And my html
<div id='calendar'></div>
<button id='but'>
Not selectable
</button>
Here the JSFiddle:
http://jsfiddle.net/CYnJY/874/
What am I doing wrong?
Thank you very much!

Change this $('#but').on(click, function(e) { to $('#but').on('click', function(e) {
Also use calendar.fullCalendar( 'destroy' ) to destroy calendar and create a new calendar.
$('#but').on('click', function(e) {
calendar.fullCalendar( 'destroy' )
calendar.fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
defaultView: 'month',
selectable: false
});
});
Check this http://jsfiddle.net/k4dhm3yL/

jquery full calendar use loop to set events dynamically

i'm trying to use the jQuery full calendar and i must set events dynamically. these are examples of events:
events: [
{
title: 'Long Event',
start: '2016-09-07',
end: '2016-09-10'
},
{
title: 'Conference',
start: '2016-09-11',
end: '2016-09-13'
},
{
title: 'Meeting',
start: '2016-09-12T10:30:00',
end: '2016-09-12T12:30:00'
},
{
title: 'Lunch',
start: '2016-09-12T12:00:00'
},
{
title: 'Meeting',
start: '2016-09-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2016-09-12T17:30:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2016-09-28'
}
]
I have arrays with titles, start dates and end dates of events and i must set them in a loop.
Can someone help me and show me how must do?
Thank's

In this way you can use loop to set events dynamically (In PHP):
events:[
<?php for ($i=0; $i <count($countOfArray); $i++) { ?>
{
title: '<?php echo $countOfArray[$i]['Long_event']; ?>',
start: '2016-09-07',
end: '2016-09-10'
},
<?php } ?>
]
You can also customize date as well:
start: '<?php echo $countOfArray[$i]['YourDate']; ?>',

$(document).ready(function(){
var events = [your-json-array-of-events];
var eventsArray = [];
console.log('e',events);
$.parseJSON(events).forEach(function(element, index){
eventsArray.push({
title:element.title,
description:element.description.substring(0,30),
start:new Date(element.start_date).toISOString(),
end:new Date(element.end_date).toISOString(),
})
})
$(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: Date.now(),
editable: false,
eventLimit: true, // allow "more" link when too many events
events: eventsArray,
});
});
});

You can go with your events array and pass it as an events property value of the object options that is provided to fullCalendar():
var events = [{title: 'Long Event',start: '2016-09-07',end: '2016-09-10'},{title: 'Conference',start: '2016-09-11',end: '2016-09-13'},{title: 'Meeting',start: '2016-09-12T10:30:00',end: '2016-09-12T12:30:00'},{title: 'Lunch',start: '2016-09-12T12:00:00'},{title: 'Meeting',start:'2016-09-12T14:30:00'},{title: 'Happy Hour',start: '2016-09-12T17:30:00'},{title: 'Click for Google',url: 'http://google.com/',start: '2016-09-28'}];
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
defaultDate: '2016-09-12',
navLinks: true,
editable: true,
eventLimit: true,
events: events
});
body {
margin: 40px 10px;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 0 auto;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.js"></script>
<div id="calendar"></div>

How to close previous popovers in fullCalendar?

I am using fullCalendar in my website together with Bootstrap so that everytime I click on a day in month view, there is a popover to add event, just like that in Google Calendar. Here is my code
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
height: height,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
dayClick: function( date, allDay, jsEvent, view ){
$(this).children().popover({
title: 'haha',
placement: 'right',
content: 'haha',html : true, container: 'body'
});
$(this).children().popover('show');
}
})
The code should be right before $(this).children().popover({ so that it closes all previously fired popover.
However, exactly, what code should I use to achieve this?
Thank you!

You can remove the popover or more specifically destroy the one created before by saving the reference (which would be a more specific and better approach).
var calendar = $('#calendar').fullCalendar({
height: '300px',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
dayClick: function (date, allDay, jsEvent, view) {
$(this).children().popover({
title: 'haha',
placement: 'right',
content: 'haha',
html: true,
container: 'body'
});
$('.popover.in').remove(); //<--- Remove the popover
$(this).children().popover('show');
}
});
Fiddle Method1
or
var $calPopOver; //create a variable to save refe
var calendar = $('#calendar').fullCalendar({
height: '300px',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
dayClick: function (date, allDay, jsEvent, view) {
$(this).children().popover({
title: 'haha',
placement: 'right',
content: 'haha',
html: true,
container: 'body'
});
if($calPopOver) //if there is something
$calPopOver.popover('destroy'); //then call popover destroy
$calPopOver = $(this).children().popover('show');
}
});
Fiddle Method2

FullCalendar usage with strings

I have just today started looking at FullCalendar,and in the future i would like to use a php scritp to load events from a db, parse the results to be apt for FullCalendar, and call the $('#calendar').fullCalendar(options);
The thing is that if I call the function as follows:
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true}
);
All works ok, but if I call it like this:
var stringCal="{
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true}";
$('#calendar').fullCalendar(
stringCal
);
It does not work, any ideas?
Thanks in beforehand, by the way im using FullCalendar 1.5.1

If you have the object like a string then you can use the JSON.parse() function.
var stringCal = "{
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
}";
then
$('#calendar').fullCalendar(JSON.parse(stringCal));

Your second attempt is an object literal but you have quotes around it. This turns it into a string. Remove the quotes like this:
var stringCal={
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true
};