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
};
Related
I am using https://fullcalendar.io/ calendar i have used eventLimitText : "more" i want the date on click of eventLimitText
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
eventLimit: true,
timeFormat: 'H:mm',
dayClick: function(date, jsEvent, view) {
alert('Clicked on: ' + date.format());
}
})
I have solved this problem by reading this documentation
Here is the code
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
eventLimit: true,
timeFormat: 'H:mm',
eventLimitClick: function(cellInfo, jsEvent, view) {
var from_date_val = JSON.stringify(cellInfo.date);
var from_to_val = JSON.stringify(cellInfo.date);
},
});
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/
I am trying to make this script work in my events.js.coffee
$(document).ready ->
$("#calendar").fullCalendar(
events: '/events.json'
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
}
)
And, when i go to the rails page where that script is called i get an error that states:
SyntaxError: [stdin]:8:24: unmatched OUTDENT.
How should I fix that code?
Thanks for the replies,
I managed to fix it by modifying the code as follows:
$(document).ready ->
$("#calendar").fullCalendar(
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,agendaDay'
},
events: '/events.json'
)
Try this:
$(document).ready ->
$('#calendar').fullCalendar(
events:
{
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
header:
{
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
events: '/events.json'
)
CoffeeScript uses indentation to define the structure of your code so you must be very careful and consistent with your indentation: if you're using two spaces per level then always use two spaces per level everywhere. For example:
$(document).ready ->
$("#calendar").fullCalendar(
events: '/events.json'
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
}
)
Or if you want to leave out the optional parentheses and braces:
$(document).ready ->
$("#calendar").fullCalendar
events: '/events.json'
header:
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
Note the consistency in the indentation: each block is indented exactly two spaces more than its parent. You don't have to use two of course, you just need to be consistent or you'll end up with a big confusing mess on your hands.
I have below js.
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: false,
events: [
{
title: 'Absent',
start: new Date(y, m, 9),
color: '#008aaf '
}
]
});
The above js generates a calendar for me. The events parameter marks the event on the date specified in start field. Now i have to generate event dynamically based on my php date array which is as shown below:
Array
(
[0] => 28/07/2014
[1] => 30/07/2014
[2] => 01/08/2014
[3] => 29/07/2014
)
How can i generate events based on php date array?
What about something like this?
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: false,
events: [
<?php
foreach($dateArray as $date)
{
$dateParts = explode("/",$date);
$dates[] = "{
title: 'Absent',
start: new Date(".$dateParts[2].", ".$dateParts[1].", ".$dateParts[0]."),
color: '#008aaf '
}";
}
echo implode(",",$dates);
?>
]
});
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