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
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'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);
}
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>