I am using fullcalendar v4. I have a mini calendar that once an event is clicked, I want another larger calendar (calendar_full) to go to that date.
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
var calendar1 = document.getElementById('calendar_mini');
var calendar_mini = new FullCalendar.Calendar(calendar1, {
plugins: ['interaction', 'dayGrid'],
eventClick: function(info) {
//when clicking on events, go to date on main calendar
calendar.gotoDate(info.event.start)
}
...
});
document.addEventListener('DOMContentLoaded', function() {
var calendar_full = document.getElementById('calendar_full');
var calendar = new FullCalendar.Calendar(calendar_full, {
plugins: ['interaction', 'resourceDayGrid', 'resourceTimeGrid', 'timeGrid'],
header: {
right: 'prevYear,prev,next,nextYear,today',
left: 'title',
center: 'resourceTimeGridDay,resourceTimeGridWeek,resourceDayGridMonth'
},
selectMirror: true,
...
)};
In the calendar_mini code, the eventClick function of calendar.gotoDate(info.event.start) does NOT change the main calendar. I get error:
Uncaught ReferenceError: calendar is not defined
The problem is that the variable called "calendar" is not in scope when you use it in the callback, which is why it's undefined. Its scope is limited to the "DOMContentLoaded" callback in which you declared it.
Now, you don't need need two separate "DOMContentLoaded" callbacks here. One is generally sufficient for all the code that needs to be run when the page has loaded.
If you move everything inside a single callback, you won't have a problem:
document.addEventListener('DOMContentLoaded', function() {
var calendar1 = document.getElementById('calendar_mini');
var calendar_mini = new FullCalendar.Calendar(calendar1, {
plugins: ['interaction', 'dayGrid'],
eventClick: function(info) {
//when clicking on events, go to date on main calendar
calendar.gotoDate(info.event.start)
}
var calendar_full = document.getElementById('calendar_full');
var calendar = new FullCalendar.Calendar(calendar_full, {
plugins: ['interaction', 'resourceDayGrid', 'resourceTimeGrid', 'timeGrid'],
header: {
right: 'prevYear,prev,next,nextYear,today',
left: 'title',
center: 'resourceTimeGridDay,resourceTimeGridWeek,resourceDayGridMonth'
},
selectMirror: true,
...
)};
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 am using FullCalendar to display events from two sources. I have one source to display them as background events and the other set to display as block events.
This works fine, but then I am using the eventClick callback. When I check the info.event.display property of the event clicked on, it returns as auto. In this callback I need to check this property to determine whether to do something or not.
This also is a problem with the eventDidMount callback. I was using that but have disabled it for now.
IE: In this case I only want a modal to appear if the display type is block.
Code:
let calendarEl = document.getElementById('calendar')
let loader = document.querySelector('.calendar-wrapper .loader')
let tooltip
let calendar = new Calendar(calendarEl, {
plugins: [dayGridPlugin],
firstDay: 1,
contentHeight: "auto",
aspectRatio: 1.5,
eventSources: [
{
url: '/api/trips.json',
display: 'background'
},
{
url: '/parks/visits.json',
display: 'block'
}
],
startParam: 'start',
endParam: 'end',
showNonCurrentDates: true,
loading: function (isLoading) {
if (isLoading) {
loader.style.display = 'flex'
} else {
loader.style.display = 'none'
}
},
headerToolbar: {
start: 'title',
center: 'prevYear,nextYear',
end: 'today prev,next'
},
// eventDidMount: function(info) {
// console.log(info.event);
// tooltip = new tippy(info.el, {
// theme: 'light-border',
// trigger: 'mouseenter',
// allowHTML: true,
// content: info.event.extendedProps.tooltipcontent,
// interactive: false,
// interactiveBorder: 0,
// animation: 'shift-away',
// moveTransition: 'transform 0.2s ease-out',
// zIndex: 99999,
// inertia: true,
// placement: 'top',
// touch: 'hold'
// })
// },
eventClick: function(info) {
console.log(info)
info.jsEvent.preventDefault()
let modal = document.querySelector('#modal-container')
modal.innerHTML = info.event.extendedProps.modalcontent
// tooltip.hide()
MicroModal.show('modal-visit')
}
})
Any suggestions?
It's because "background" is a property of the event source, not the event. Whilst that rule may then be applied when rendering, to control how the event appears, the event itself doesn't automatically have the value "background" set as the value for its own "display" property (because an individual event can potentially override the event source value for any given property).
Fortunately the event will contain a reference to the event source and, although the path to the information is convoluted (but fortunately discoverable by logging the event object to the Console), you can get the "display" property of the event source from it:
eventClick: function(info) {
alert(info.event.source.internalEventSource.ui.display);
}
Live demo: https://codepen.io/ADyson82/pen/BaQVyRO
I'm trying to use the full calendar to set an event dynamically.By using function loadData().But I couldn't work successfully.
Could anybody please let me know how to solve this problem?
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var temp_array = loadData();
var calendar = new FullCalendar.Calendar(calendarEl, {
schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
editable: true,
eventLimit: true, // allow "more" link when too many events
header:{
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth'
},
plugins: [ 'interaction','dayGrid' ],
for (let i = 0 ; i <temp_array.length ; i++){
calendar.addEvent({
title: temp_array[i][0],
start:temp_array[i][1],
end :temp_array[i][2]
})
}
});
calendar.render();
});
function loadData(){
let temp_array=[];
temp_array[0]=["test1","2019-07-16","2019-07-21"];
temp_array[1] = ["test2","2019-07-15","2019-07-20"];
temp_array[2] =["test1","2019-07-16",""];
return temp_array;
}
I tried this it throws an
exception: Uncaught SyntaxError: Unexpected identifier
plugins: [ 'interaction','dayGrid' ],
for (let i = 0 ; i <temp_array.length ; i++){
calendar.addEvent({
title: temp_array[i][0],
start:temp_array[i][1],
end :temp_array[i][2]
})
}
You cannot put a for loop inside an object like that. You can pass events as an array to calendar's config: https://fullcalendar.io/docs/events-array
EDIT:
If you want dynamic events, you can also pass a function: https://fullcalendar.io/docs/event-source-object#options
I'm trying to develop an application where I need to use this calendar : http://fullcalendar.io/
The problem is that I can populate it manually, but I can't populate it from my Database.
This is the function that populates the calendar:
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
eventLimit: true,
events:[
{
title: "aaaa",
start: "2014-12-12"
},
{
title: "bbb",
start: "2014-12-13"
}
]
});
});
and this is the function that allows me to get my data from the Database:
function getEvents(db){
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM NOTES', [], function (tx, results) {
// var allEvents = [];
var allEvents=[];
for (var i = 0; i < results.rows.length; i++){
//var event = {};
allEvents.push({
title: results.rows.item(i).note,
start: results.rows.item(i).whenn
});
}
$.each(allEvents, function(idx, obj){
alert(obj.title);
});
}, null);
});
};
When i call the function getEvents(db) in events, it shows me the alerts but doesn't populate the calendar.
PS: I can't use php files.
You can use renderEvent
.fullCalendar( 'renderEvent', event [, stick ] )
which, as the name suggests, renders a new event on the calendar.
According to the docs, event must be an Event Object with a title and start at the very least. Normally, the event will disappear once the calendar refetches its event sources (example: when prev/next is clicked). However, specifying stick as true will cause the event to be permanently fixed to the calendar.
For you, I guess this would translate to something like:
$.each(allEvents, function(idx, obj){
$('#calendar').fullCalendar( 'renderEvent', obj);
});
I've not used fullCalendar, but if this doesn't work, make a fiddle of what you've got and I'll make you a working example.
noob coder here.
I'm having trouble linking fullcalendar to backbone.js. My problem arises when I use the 'previous' and 'next' buttons on fullcalendar to navigate.
Here is the bug: I make a new event. The event shows up on the calendar. I press 'next'. I press 'previous'. The new event has disappeared.
It looks like fullcalendar expects an 'events' option on loading to specify a function or JSON feed to load events from. According to the docs, "FullCalendar will visit the URL whenever it needs new event data. This happens when the user clicks prev/next or changes views."
I'm having a surprising amount of difficulty getting fullcalendar to ask Backbone for a JSON object of the events collection(that stores all the events).
I've tried using
events: function() {events.toJSON();}
and
events: function() {events.fetch();}
with no luck. Help is very much appreciated.
Here is my backbone code:
$(function(){
var Event = Backbone.Model.extend();
var Events = Backbone.Collection.extend({
model: Event,
url: 'events'
});
var EventsView = Backbone.View.extend({
initialize: function(){
_.bindAll(this);
this.collection.bind('reset', this.addAll);
this.collection.bind('add', this.addOne);
this.collection.bind('change', this.change);
this.collection.bind('destroy', this.destroy);
this.eventView = new EventView();
},
render: function() {
this.el.fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
selectable: true,
selectHelper: true,
editable: true,
ignoreTimezone: false,
select: this.select,
defaultView: 'agendaWeek',
// events: function() {events.toJSON();},
eventClick: this.eventClick,
eventDrop: this.eventDropOrResize,
eventResize: this.eventDropOrResize
});
},
addAll: function() {
this.el.fullCalendar('addEventSource', this.collection.toJSON());
},
addOne: function(event) {
this.el.fullCalendar('renderEvent', event.toJSON());
},
select: function(startDate, endDate) {
this.eventView.collection = this.collection;
this.eventView.model = new Event({start: startDate, end: endDate});
this.eventView.render();
},
eventClick: function(fcEvent) {
this.eventView.model = this.collection.get(fcEvent.id);
this.eventView.render();
},
change: function(event) {
// Look up the underlying event in the calendar and update its details from the model
var fcEvent = this.el.fullCalendar('clientEvents', event.get('id'))[0];
fcEvent.title = event.get('title');
fcEvent.color = event.get('color');
this.el.fullCalendar('updateEvent', fcEvent);
},
eventDropOrResize: function(fcEvent) {
// Lookup the model that has the ID of the event and update its attributes
this.collection.get(fcEvent.id).save({start: fcEvent.start, end: fcEvent.end});
},
destroy: function(event) {
this.el.fullCalendar('removeEvents', event.id);
}
});
var EventView = Backbone.View.extend({
el: $('#eventDialog'),
initialize: function() {
_.bindAll(this);
},
render: function() {
var buttons = {'Ok': this.save};
if (!this.model.isNew()) {
_.extend(buttons, {'Delete': this.destroy});
}
_.extend(buttons, {'Cancel': this.close});
this.el.dialog({
modal: true,
title: (this.model.isNew() ? 'New' : 'Edit') + ' Event',
buttons: buttons,
open: this.open
});
return this;
},
open: function() {
this.$('#title').val(this.model.get('title'));
this.$('#color').val(this.model.get('color'));
},
save: function() {
this.model.set({'title': this.$('#title').val(), 'color': this.$('#color').val()});
if (this.model.isNew()) {
this.collection.create(this.model, {success: this.close});
} else {
this.model.save({}, {success: this.close});
}
},
close: function() {
this.el.dialog('close');
},
destroy: function() {
this.model.destroy({success: this.close});
}
});
var events = new Events();
new EventsView({el: $("#calendar"), collection: events}).render();
events.fetch();
});
After looking at this problem forever I realized that I was adding the appointment(model) to the collection and calling renderEvent() without the [,stick] flag equal to true. This made my appointments disappear when pressing the next/back button.
http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/
From the documentation: "http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/"
"Normally, the event will disappear once the calendar refetches its event sources (example: when prev/next is clicked). However, specifying stick as true will cause the event to be permanently fixed to the calendar."