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.
Related
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 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!
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);
}
fullCalendar is a jquery calendar plugin. I'm using it to present data from one google calendar.
I have two viewport width breakpoints for which I'd like the combination of default calendar view and calendar header options to be different.
At less than 700px viewport:
the default view should be agendaDay and there should be no header button options available to change the view, e.g., to agendaWeek or month.
At greather than 700px viewport:
The default view should be agendaWeek and there should be header buttons available for choosing different views (like agendaDay and month along with the default view of agendaWeek).
I have working code for the larger viewport combination of calendar view and header options (see below).
My question is what javascript will present a default view of agendaDay with no header options if the viewport width is below 700px, or a default view of agendaWeek with header options to change the view if the viewport width is 700px or more?
<script src="/libs/jquery/dist/jquery.min.js"></script>
<script src="/libs/moment/moment.js"></script>
<script src="/libs/fullcalendar/dist/fullcalendar.min.js"></script>
<script src="/libs/fullcalendar/dist/gcal.js"></script>
<script>
$('#calendar').fullCalendar({
googleCalendarApiKey: 'key',
events: {
googleCalendarId: 'id'
},
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaDay,agendaWeek,month'
},
eventBackgroundColor: 'transparent',
eventBorderColor: '#08c',
eventTextColor: 'black',
height: 'auto',
defaultView: 'agendaWeek',
allDaySlot: false,
});
</script>
Notes
Inside the code above, the right: "agendaDay,agendaWeek,month" key:value pair renders the header view option buttons that I would like to be removed for widths under the breakpoint of 700px.
This stack overflow post is somewhat related but only looks at changing the default view based on viewport width.
Fullcalendar can't have it's options changed after initialization. So you have two options:
Use CSS do hide the buttons conditionally.
Destroy and re-create the FC with the new options when the size changes past the 700px mark.
Also, source.
Destroy and Recreate example
var $fc = $("#calendar");
var options = { // Create an options object
googleCalendarApiKey: 'key',
events: {
googleCalendarId: 'id'
},
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaDay,agendaWeek,month'
},
eventBackgroundColor: 'transparent',
eventBorderColor: '#08c',
eventTextColor: 'black',
height: 'auto',
defaultView: 'agendaWeek',
allDaySlot: false,
}
$fc.fullCalendar(options);
function recreateFC(screenWidth) { // This will destroy and recreate the FC taking into account the screen size
if (screenWidth < 700) {
options.header = {
left: 'prev,next today',
center: 'title',
right: ''
};
options.defaultView = 'agendaDay';
} else {
options.header = {
left: 'prev,next today',
center: 'title',
right: 'agendaDay,agendaWeek,month'
};
options.defaultView = 'agendaWeek';
}
}
$(window).resize(function (e) { //set window resize listener
recreateFC($(window).width()); //or you can use $(document).width()
});
And here is a fully working example: http://jsfiddle.net/slicedtoad/kjponpf1/6/
2018 Update:
Since FullCalendar version 2.9.0, it is possible to dynamically set options after initalization. These option modifications will be applied to all views. It is not currently possible to set View-Specific Options in this manner.
https://fullcalendar.io/docs/dynamic-options
View-Specific Options information here:
https://fullcalendar.io/docs/view-specific-options
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>