I am attempting to use fullcalendar.io using underscore.js templates. I am only able to load the calendar on a page reload. When a user switches to another template after a click the calendar will not display. I have tried using the destroy, render with no success. I am stuck. Any tips would be appreciated.
$('#calendar').fullCalendar('destroy');
$('#calendar').fullCalendar('render');
$('#calendar').fullCalendar('rerenderEvents');
<!--- Template for Calendar --->
<script type="text/template" id="calendar-list-template">
<div id='calendar'><% console.log('cal div'); %></div>
<%
calVars = {};
var passedCalVars = [];
_.each(calendars, function(calendar) {
var obj = { title: calendar.get('title'), start: calendar.get('start') };
passedCalVars.push(obj)
});
$(function() {
console.log('fullcal');
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
aspectRatio: 1.55,
defaultDate: '2014-09-12',
editable: false,
eventLimit: true, // allow "more" link when too many events
events: passedCalVars
});
});
%>
</script>
Related
I try to use fullcalendar and show header nav buttons but not working
JS code
$(function(){
var calendarEl = $('#calendar');
var calendar = new FullCalendar.Calendar($(calendarEl)[0], {
initialView: 'dayGridMonth',
weekends: true,
navLinks: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'year,month,basicWeek,basicDay'
},
});
calendar.render();
});
Thank you for you help, it's for work...
fullcalendar header toolbar buttons not showing when application css and javascript tags are initialized on rails
Not working
https://fullcalendar.io/docs/v3/header
not working
FullCalendar header buttons missing
not working
You are using fullcalendar v5, and following old documentation, here is V5 DOCS
var calendar = new Calendar(calendarEl, {
headerToolbar: { center: 'dayGridMonth,timeGridWeek' }, // buttons for switching between views
});
I'm trying to add url to Fullcalendar in react ,I need when I click on one event that clic takes me to page details of that clicked event. the URL showns on the browser is correct but nothing appers because the browser is quickly refreshed. If anyone have any idea thanks for help.
//here some code
events.push(
{
title: '\n owner: '+reservation.user.fullname,
start: reservation.start_date,
end: reservation.end_date,
url: '/reservation/details/' + reservation.id + '/' + reservation.space.category.name,
},
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
events: evt,
timezone: 'UTC',
});
You should use the React version, don't mix it with jQuery
https://fullcalendar.io/docs/react
I've been working on a project for some time now with meteor and fullcalendar. I've managed to display the events on the calendar, but they dont show as soon as I add them to my collection, not even after I refresh the page, they only show if I click to change the date from the calendar, this is the image show the calendar with no events, but in the console we can see the array of events
and this is after I click the "next" button and "back" on the top left.
Can anybody help me?? below is my code... thanks
Template.home.rendered = function(){
calendar = $('#calendar').fullCalendar({
events: function(start, end, timezone, callback){
var events = [];
calEvents = Times.find();
calEvents.forEach(function(evt) {
events.push({
id: evt._id,
title: evt.title,
start: evt.start,
end: evt.end
});
});
callback(events);
},
editable:false,
duration: '00:30',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
}).data().fullCalendar;
};
I have it set up like so
$('#calendar_dash').fullCalendar({
theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaDay,agendaWeek,month'
},
height: 400,
defaultView: 'agendaDay',
defaultTimedEventDuration: '00:30:00',
forceEventDuration: true,
editable: false,
eventLimit: true, // allow "more" link when too many events
events: events,
eventClick: function (calEvent, jsEvent, view) {
if (jsEvent.url)
window.location = view.url;
}
});
But now lets say I want the height to be modifiable through the template I am calling using it in. How can I do this?
If I am simply using it in the html like this
<div id="calendar_dash"></div>
How can I pass a height from the template of say 600?
You could use a data attribute on the div to pass a configurable height:
<div id="calendar_dash" data-height="{{ calendar_height }}"></div>
... where calendar_height is an integer that you have passed to the template context.
Then in your JS:
var calendar_div = $('#calendar_dash');
calendar_div.fullCalendar({
// ...
height: calendar_div.data("height"),
//...
});
You may want to enhance this a bit to fall back to some default if the data attribute is not specified.
My view code where full calendar is displayed is below:
<div class="content">
<div id='input'>
<?php echo form_dropdown("package_id", $packagelist, "",'id="packageid"'); ?>
</div>
<div id='calendar'></div>
</div>
<style>
#calendar {
max-width: 900px;
margin: 0 auto;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#packageid').change(function() { //any select change on the dropdown with id country trigger this code
//$('#calendar').fullCalendar ('removeEvents');
var packageid = $('#packageid').val();
alert(packageid);
if(packageid !== null)
{ $('#calendar').fullCalendar({
//var $pid = packageid;
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
displayEventEnd: {
month: true,
basicWeek: true,
"default": true
},
defaultDate: '2014-11-12',
//editable: true,
eventLimit: false, // allow "more" link when too many events
events:
"<?php echo base_url('admin/schedule/scheduledetails/hel/');?>"+"/"+packageid,
});
}
});
});
</script>
When i click the dropdown selection for the first time , then the filtered events is displayed on calendar. But when i click another item on the dropdown menu then no change occurs on the calendar. Now if i refresh the page and select another item from dropdown, then the calendar with filtered events is displayed. Now again if i try to change the dropdown selection, no change occurs on the calendar. What am i doing wrong. I have called the javascript to display the calendar after the onchange function.
EDIT 2: Now I have edited my code to something like this:
<script type="text/javascript">
$(document).ready(function(e) {
$('#calendar').fullCalendar('removeEvents');
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
displayEventEnd: {
month: true,
basicWeek: true,
"default": true
},
defaultDate: '2015-11-12',
//editable: true,
eventLimit: false, // allow "more" link when too many events
events: "<?php echo base_url('admin/schedule/scheduledetails/json/')?>",
cache : false,
});
});
</script>
this script is for displaying the calendar initially with the overall events.
Now the following script is done for filtering the events:
<script>
$(document).ready(function() {
$('#packageid').change(function() { //any select change on the dropdown with id country trigger this code
$('#calendar').fullCalendar ('removeEvents');
var packageid = $('#packageid').val();
// alert(packageid);
$('#calendar').fullCalendar('removeEvents');
$('#calendar').fullCalendar('addEventSource', '<?php echo base_url();?>admin/schedule/scheduledetails/hel/'+packageid);
//$('#calendar').fullCalendar('removeEvents');
});
});
</script>
The problem that is occuring is that . The calendar is initially loaded with the whole data. And when i click the dropdown button for filtering , the filtering ocurs. If i click the prev or next button on full calendar , then also it works without event being duplicated.
Now if i select the next event from the database, again the filtering occurs perfectly. But when i click the previous or next button , the events of previous dropdown selection plus the present dropdown selection is displayed on the fullcalendar view. Why is it happening? I have used removeEvents . Why isnot it working?
Your calling fullCalendar to create the calendar new each time, you need to destroy it, or just change the source and refresh:
what i do here is add a new source; if you want to change/remove the old source you can do that, just save the event source in a variable to be used in the 'removeEventSource' call before the 'addEventSource' call.
<script type="text/javascript">
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
displayEventEnd: {
month: true,
basicWeek: true,
"default": true
},
defaultDate: '2014-11-12',
//editable: true,
eventLimit: false, // allow "more" link when too many events
events:
"<?php echo base_url('admin/schedule/scheduledetails/hel/');?>"+"/"+packageid,
});
$('#packageid').change(function() { //any select change on the dropdown with id country trigger this code
var packageid = $('#packageid').val();
alert(packageid);
if( packageid != null ) {
$('#calendar').fullCalendar('addEventSource', '/admin/schedule/scheduledetails/hel/'+packageid);
}
}
});
});
</script>
Here is what I did to implement filtering with FullCalendar. Event is triggered by use of a dropdown. Initial view shows all events. Using dropdown triggers the filters. Filters hold across month, week and day views.
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
defaultDate: (new Date()).toISOString().substring(0, 10),
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
events: 'include/myfeed.php'
});
});
function filterByDealer(dealer){
$('#calendar').fullCalendar('removeEvents');
$('#calendar').fullCalendar('addEventSource','include/myfeed.php?d='+dealer);
}