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
Related
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 am using FullCalender to display calendar and enable users to create events in the calendar, with dynamic duration that can be selected from a dropdown.
When a user only CLICKs on the calendar, I get the desired result that is only the desired duration is selected. which is CORRECT.
But the issue is when a user CLICKs and continues to DRAG to select a time range. I don't want the user to be able to select more than specified duration i.e. say 5mins. Only CLICKing selects 5mins and that is perfectly working fine. Only issue is while DRAGing with CLICKing.
I have tried various options available in the FullCalendar docs, but nothing helped.
Any help is appreciated. Thanks in Advance.
Current integration is in the below link to the Fiddle
https://jsfiddle.net/4h28Lt81/
Jquery is as below:
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'agendaDay',
slotDuration: '00:05:00',
slotEventOverlap: false,
defaultDate: '2016-06-12',
selectable: true,
selectHelper: true,
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);
}
$('#calendar').fullCalendar('unselect');
},
editable: true,
eventLimit: true, // allow "more" link when too many events
loading: function(bool) {
$('#loading').toggle(bool);
},
eventRender: function(event, el) {
// render the timezone offset below the event title
if (event.start.hasZone()) {
el.find('.fc-title').after(
$('<div class="tzo"/>').text(event.start.format('Z'))
);
}
},
eventClick: function(calEvent, jsEvent, view) {}
});
I feel like being able to click and drag how much time you desire for an event is not an issue. That is unless I am missing something in your question. Is it assumed the user only needs to block off 5 minute segments?
If you really want to prevent it from dragging, you can disable it through jQueryUI
myObject.draggable( 'disable' )
Hope this helps!
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);
}
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>