So I have a fullCalendar (v.4.2.0) instance in my page (loaded/built on document.ready) and I want to access that fullCalendar instance in other functions to add events dynamically.
Using $('#calendar').fullCalendar('getView') it shows an error that the fullCalendar() method does not exist:
$(...).fullCalendar is not a function
How can I access that instance?
The code that I'm using to generate the calendar is the following:
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'timeGrid', 'dayGrid' ],
defaultView: 'timeGridWeek',
height: 700,
locale: 'pt',
allDaySlot: false,
handleWindowResize: true,
events: [
{
title: 'Teste1', // a property!
start: '2019-07-23 16:00',
end: '2019-07-23 17:00',
backgroundColor: '#fcba03',
borderColor: '#fcba03',
}
]
});
calendar.render();
Since you are using fullCalendar version 4, it is no longer written as a jQuery plugin, and so jQuery syntax to access the methods cannot be used. Instead, simply refer to your calendar variable (which probably needs to have a wide scope in your application - either global or easily accessible some other way). You'll notice that your existing code already does exactly that when it calls calendar.render();.
Additionally, in the specific case of the "getView" method, this has been replaced simply with a view property which refers to the current view.
For example (see the last line):
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'timeGrid', 'dayGrid' ],
defaultView: 'timeGridWeek',
height: 700,
locale: 'pt',
allDaySlot: false,
handleWindowResize: true,
events: [
{
title: 'Teste1', // a property!
start: '2019-07-23 16:00',
end: '2019-07-23 17:00',
backgroundColor: '#fcba03',
borderColor: '#fcba03',
}
]
});
calendar.render();
var vw = calendar.view; //get the current view
Reference documentation
Documentation of the view property
Version 3 to Version 4 upgrade guide
**Create a config variable like below in js**
uiConfig = {
calendar: {
height: 450,
editable: true,
eventClick: alertEventOnClick,
eventDrop: alertOnDrop,
eventResize: alertOnResize,
eventRender: eventRender
}
};
**defines the above methods in js file**
alertEventOnClick = function (date, jsEvent, view) {}
alertOnDrop = function (date, jsEvent, view) {}
alertOnResize = function (date, jsEvent, view) {}
eventRender = function (date, jsEvent, view) {}
**and in html add below lines of code**
<div ui-calendar="uiConfig.calendar" id="myCalendar" calendar-watch-event="extraEventSignature(event)"
calendar="myCalendar" data-ng-model="eventSources">
</div>
**The Following code is another way of accessing calendar**
$('#myCalendar').fullCalendar({
eventClick: function(event, element) {
event.title = "CLICKED!";
$('#calendar').fullCalendar('updateEvent', event);
}
});
**where Mycalender should be added in HTML like below**
<div ui-calendar="uiConfig.calendar" id="myCalendar"
calendar="myCalendar" data-ng-model="eventSources">
</div>
Related
I am trying to use this example -- https://fullcalendar.io/docs/other-calendar-dragging -- to create a page that shows 2 FullCalendar calendars and allows the user to drag events from one calendar to the other. I am able to render both calendars, and pull events for each via ajax from a php page. However, the events only display on the first calendar. If I comment out this line:
events: 'ajax/calendar.php?action=get_monthly_patrol_calendar'
from calendar1, then the events will display on calendar2 only. I'd really appreciate help to enable events to display on BOTH calendars.
FYI, here is my code:
HTML:
<div id="kt_calendar"></div>
<div id="kt_calendar2" ></div>
JS:
var todayDate = moment().startOf('day');
var show_now_indicator=true;
var YM = todayDate.format('YYYY-MM');
var YEAR = todayDate.format('YYYY');
var MONTH = todayDate.format('MM');
var YESTERDAY = todayDate.clone().subtract(1, 'day').format('YYYY-MM-DD');
var TODAY = todayDate.format('YYYY-MM-DD');
var TOMORROW = todayDate.clone().add(1, 'day').format('YYYY-MM-DD');
var NEXT_MONTH = todayDate.clone().add(1, 'month').format('YYYY-MM-DD');
var cal = document.getElementById('kt_calendar');
var calendar = new FullCalendar.Calendar(cal, {
plugins: [ 'bootstrap', 'interaction', 'dayGrid', 'dayGridPlugin', 'timeGrid', 'list' ],
themeSystem: 'bootstrap',
events: 'ajax/calendar.php?action=get_monthly_patrol_calendar',
showNonCurrentDates:false,
isRTL: KTUtil.isRTL(),
contentHeight: 'auto',
//aspectRatio: 3, // see: https://fullcalendar.io/docs/aspectRatio
nowIndicator: show_now_indicator,
now: TODAY,
defaultDate: TODAY,
initialDate: TODAY,
defaultView: 'dayGridMonth',
eventOrder: 'order_by',
eventLimit: false, // true to allow "more" link when too many events
navLinks: true,
eventResizableFromStart: false, //Whether the user can resize an event from its starting edge.
eventDurationEditable: false, //Allow events’ durations to be editable through resizing.
eventResourceEditable: reschedule,//Determines whether the user can drag events between resources.
droppable:reschedule,//Determines if external draggable elements or events from other calendars can be dropped onto the calendar.
eventStartEditable: reschedule,//Allow events’ start times to be editable through dragging.
editable: reschedule, //Determines whether the events on the calendar can be modified.
eventDrop: function(info) {
reschedule_event(info);
},
eventClick: function(info) {
do_event_click(info);
},
eventRender: function(info) {
var element = $(info.el);
},
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,dayGridWeek,dayGridDay'
},
views: {
dayGridMonth: { buttonText: 'monthly' },
dayGridWeek: { buttonText: 'weekly' },
dayGridDay: { buttonText: 'daily' }
},
});
calendar.render();
var cal2 = document.getElementById('kt_calendar2');
var calendar2 = new FullCalendar.Calendar(cal2, {
plugins: [ 'bootstrap', 'interaction', 'dayGrid', 'dayGridPlugin', 'timeGrid', 'list' ],
themeSystem: 'bootstrap',
events: 'ajax/calendar.php?action=get_monthly_patrol_calendar',
showNonCurrentDates:false,
isRTL: KTUtil.isRTL(),
contentHeight: 'auto',
//aspectRatio: 3, // see: https://fullcalendar.io/docs/aspectRatio
nowIndicator: show_now_indicator,
now: NEXT_MONTH,
defaultDate: NEXT_MONTH,
initialDate: NEXT_MONTH,
defaultView: 'dayGridMonth',
eventOrder: 'order_by',
eventLimit: false, // true to allow "more" link when too many events
navLinks: true,
eventResizableFromStart: false, //Whether the user can resize an event from its starting edge.
eventDurationEditable: false, //Allow events’ durations to be editable through resizing.
eventResourceEditable: reschedule,//Determines whether the user can drag events between resources.
droppable:reschedule,//Determines if external draggable elements or events from other calendars can be dropped onto the calendar.
eventStartEditable: reschedule,//Allow events’ start times to be editable through dragging.
editable: reschedule, //Determines whether the events on the calendar can be modified.
eventDrop: function(info) {
reschedule_event(info);
},
eventClick: function(info) {
do_event_click(info);
},
eventRender: function(info) {
var element = $(info.el);
},
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,dayGridWeek,dayGridDay'
},
views: {
dayGridMonth: { buttonText: 'monthly' },
dayGridWeek: { buttonText: 'weekly' },
dayGridDay: { buttonText: 'daily' }
},
});
calendar2.render();
Figured it out! The second call was failing bec it was running before the first call completed. I added a delay before loading the 2nd calendar, and now both months load fine:
setTimeout(function() { loadCal2(); }, 3000);
My title is displayed 2 times on fullcalendar, I don't know why, the script looks fine and all are working. I'm leaving my script here.
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
locale: 'es',
plugins: ['interaction', 'dayGrid', 'timegrid', 'list'],
header: {
center: 'title',
right: 'prev,next today,dayGridMonth,listMonth'
},
defaultDate: new Date(),
navLinks: true, // can click day/week names to navigate views
selectable: true,
selectMirror: true,
select: function() {
$('#newevent').modal({
keyboard: false
});
calendar.unselect()
},
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
]
});
calendar.render();
});
</script>
Am curious about the version used, still your code looks like old version and you got answer in the comment. But I like to share about the latest version.
Link
Upgrade to latest v5
header -> headerToolbar (just rename)
The properties can be start/center/end or left/center/right
I am using fullcalendar and my goal is to have a simple pop up on the event click but for some reason I cannot get it to pull in the description in the alert.
Am I missing some JS to include or something? I tried to use the examples from their site but it was not working. I am sure it is something stupid I am missing.
<script src='../assets/calendar/packages/core/main.js'></script>
<script src='../assets/calendar/packages/interaction/main.js'></script>
<script src='../assets/calendar/packages/daygrid/main.js'></script>
<script src='../assets/calendar/packages/timegrid/main.js'></script>
<script src='../assets/calendar/packages/list/main.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var d = new Date();
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
height: 'parent',
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
defaultView: 'dayGridMonth',
defaultDate: d,
eventClick: function(info) {
alert('Event: ' + info.description);
},
navLinks: true, // can click day/week names to navigate views
editable: false,
eventLimit: true, // allow "more" link when too many events
events:
[
{
title: 'All Day Event<br>second line',
description: 'description for Long Event',
start: '2020-05-01'
},
{
title: 'Session',
start: '2020-05-12T10:30:00',
description: 'description for Long Event',
end: '2020-05-12T12:30:00'
},
{
title: 'Practical',
start: '2020-05-27T10:30:00',
description: 'description for Long Event',
end: '2020-05-27T12:30:00'
}
]
});
calendar.render();
});
</script>
You need to write
alert('Event: ' + info.event.extendedProps.description);
because
1) the info object isn't the event, the event is a sub-property of that info object - this is described at https://fullcalendar.io/docs/eventClick
and
2) description is a non-standard field as far as fullCalendar is concerned, and all non-standard fields are placed inside the extendedProps sub-property of the event object which fullCalendar generates based on the data you provide it - this is described at https://fullcalendar.io/docs/event-parsing
I am a newbie to web and js programming so my issue might be simple.
I have found a piece code which allows me to create a calendar with all the rendez-vous in it.
The rendez-vous data are formatted into Json data and read through a JS script.
Here is the code :
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var data=
[
{
"title": "Rdv M.Ba",
"start": "2020-02-04T10:00:00"
},
{
"title": "Rdv M. Dia",
"start": "2020-02-07T16:00:00",
"end": "2020-02-07T16:15:00"
}
];
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
defaultDate: '2020-02-12',
editable: true,
navLinks: true, // can click day/week names to navigate views
eventLimit: true, // allow "more" link when too many events
events: data
});
calendar.render();
});
</script>
This way it is working but as soon as I replace the variable "data" in the script with that var rdv = require('./rdv.json'); (as you may have guessed rdv.json contains the exact same infos as the Json in var data with the same format) it does not display anything.
So could you tell me what is wrong here?
Thanks for your help
as pointed out in the comments require('./rdv.json') isn't standard javascript as found in the browser by default. You may be confused with nodejs or some other javascript framework.
A way to solve your question is adapted from here and is as follows:
function loadJSON(callback) {
var xobj = new XMLHttpRequest();
xobj.overrideMimeType("application/json");
xobj.open('GET', './rdv.json', true);
xobj.onreadystatechange = function() {
if (xobj.readyState == 4 && xobj.status == "200") {
callback(xobj.responseText);
}
};
xobj.send(null);
}
Here we have created a function that can load the rdv.json file as real json. Since it is a callback function, you should be able use the data as follows:
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
loadJSON(function(response) {
data = JSON.parse(response);
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
defaultDate: '2020-02-12',
editable: true,
navLinks: true, // can click day/week names to navigate views
eventLimit: true, // allow "more" link when too many events
events: data
});
calendar.render();
});
});
Hope this answer helps you!
I am updating my Fullcalendar install to V4. I am feeding mine via JSON and I have HTML (some FontAwsome Icons) in my event title. Here is my old V3 code to render my elements:
$(function() {
$('#calendars').fullCalendar({
events: '/activities/calendar.json',
contentHeight: 750,
displayEventTime: false,
header: {
left: '',
center: 'title',
right: 'today prev,next'
},
businessHours: {
dow: [1, 2, 3, 4, 5]
},
handleWindowResize: true,
eventLimit: 2,
eventLimitClick: 'popover',
eventRender: function(event, element) {
element.find('.fc-title').html(event.title);
}
});
});
The eventRender: is what fails. The new docs don't clearly explain how I my convert this to the new version. With this code in place my calendar simply fails to load with json parse error in the console. If I remove it it works but my HTML is rendered as plain text. I am sure I am missing something obvious and easy here. My JS skill set is not that great.
As of FullCalendar v5 you can use eventContent.
document.addEventListener('DOMContentLoaded', function() {
let calendarEl = document.getElementById('calendar');
let calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
events: [
{
"id": 1,
"title": "First Line<br>Second Line",
"start": "2022-06-04",
"end": null,
"allDay": true,
"editable": true,
"className": "badge-soft-warning",
}
],
eventContent: function( info ) {
return {html: info.event.title};
}
});
calendar.render();
})
After some stubmling around I found this:
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('timeline');
var calendar = new FullCalendar.Calendar(calendarEl, {
events: '/activities/timeline.json',
plugins: [ 'resourceTimeline', 'interaction' ],
header: {
left: 'prev,today,next',
center: 'title',
right: 'resourceTimelineWeek,resourceTimelineMonth,resourceTimelineYear, '
},
eventRender: function(info) {
info.el.querySelectorAll('.fc-title')[0].innerHTML = info.el.querySelectorAll('.fc-title')[0].innerText;
}
});
calendar.render();
});
I am open to alternate cleaner answers.