Need a help with fullcalendar.js. I found a error "Undefined is not a function" when I see on web inspector. But I think the code is fine.
You can check this fiddle https://jsfiddle.net/3kq85hx0/ for detail.
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'resourceDay,resourceWeek,resourceNextWeeks,resourceMonth'
},
defaultView: 'resourceWeek',
firstDay: 1,
editable: true,
selectable: true,
minTime: 8,
snapMinutes:10,
weekNumbers: false,
weekNumberTitle: 'Viikko ',
refetchResources: true,
maxTime:16,
selectHelper: true,
resources: 'json-resources.php',
events: [
{
title: 'Meeting from this day to this +4',
start: new Date(y, m, d, 10, 30),
end: new Date(y, m, d+4, 11, 00),
resource: 'resource1'
},
{
title: 'Meeting last week',
start: new Date(y, m, d-7, 10, 30),
end: new Date(y, m, d-7, 12, 15),
resource: 'resource1'
},
{
title: 'meeting tomorrow',
start: new Date(y, m, d+1, 10, 30),
end: new Date(y, m, d+1, 12, 00),
resource: 'resource1'
}
],
select: function(start, end, allDay, jsEvent, view, resource) {
var title = prompt('event title:');
if (title) {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay,
resource: resource.id
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
},
resourceRender: function(resource, element, view) {
// this is triggered when the resource is rendered, just like eventRender
},
eventDrop: function( event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view ) {
alert('event moved to '+event.start+' to '+event.resource);
},
eventResize: function( event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view ) {
alert('event was resized, new endtime: '+event.end);
},
eventClick: function ( event, jsEvent, view ) {
alert('event '+event.title+' was left clicked');
}
});
});
Thanks.
The "undefined is not a function" is coming from within the custom fullcalendar script. Specifically on line 6373:eventElement.draggable({.
This is because draggable was not defined. draggable is part of jqueryui, so I removed your jquery ui script and added one from google's cdn.
The fiddle works correctly now.
Also, as discussed in the comments, you are on an old version of fullcalendar. And this particular custom build has a bunch of issues.
First, I don't know how long term your plans are but Adam Shaw is currently working on an official timeline update to fullcalendar. You might want to watch for this.
Until then, there is this fork that is mostly up to date. You can read about it here. I don't know if it meets your needs but you might want to take a look.
Related
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 like the fullcalendar JQuery-Plugin. My calendar doesn't work. At the moment i am looking for a solution to add an event but i can't... Why ?
This is my code:
$(document).ready(function() {
$('#calendar').fullCalendar({
defaultDate: '2017-05-11',
editable: true,
selectable: true,
selectHelper: true,
eventLimit: true, // allow "more" link when too many events
select: function(start, end, allDay) {
var title = prompt("Event here: ", "New Event:");
if (title != null) {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
$calendar.fullCalendar("unselect");
},
events: [
{
title: 'All Day Event',
start: '2017-05-01'
}
]
});
});
You need to define variable calendar like below
var calendar = $('#calendar').fullCalendar({
Then it will work.
Updated Error Imagei am trying to pass database data from controller to calendar.js 's java script defines. But i am getting that errors while i am trying to do that. Can anybody help me about get rid of the syntax errors.
$(window).load(function() {
var date = new Date(),
d = date.getDate(),
m = date.getMonth(),
y = date.getFullYear(),
started,
categoryClass;
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
$('#fc_create').click();
started = start;
ended = end;
$(".antosubmit").on("click", function() {
var title = $("#title").val();
if (end) {
ended = end;
}
categoryClass = $("#event_type").val();
if (title) {
calendar.fullCalendar('renderEvent', {
title: title,
start: started,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
$('#title').val('');
calendar.fullCalendar('unselect');
$('.antoclose').click();
return false;
});
},
eventClick: function(calEvent, jsEvent, view) {
$('#fc_edit').click();
$('#title2').val(calEvent.title);
categoryClass = $("#event_type").val();
$(".antosubmit2").on("click", function() {
calEvent.title = $("#title2").val();
calendar.fullCalendar('updateEvent', calEvent);
$('.antoclose2').click();
});
calendar.fullCalendar('unselect');
},
editable: true,
var events = [];
#foreach(var place in Model) {
< text >
var takvim = {
title: '#place.Ekip_id',
start: new Date(y, m, 28),
end: new Date(y, m, 29),
};
events.push(takvim);
< /text>
};
});
});
I'm using fullcalendar in an app with phonegap.
I have two external buttons which change the view (month or week), and the default view is Month.
nova.touch.bindClick("#btn_week", function() {
$('#calendar').fullCalendar('changeView', 'basicWeek');
$('#calendar').fullCalendar( 'render' );
});
nova.touch.bindClick("#btn_month", function() {
//$('#calendar_week').hide();
$('#calendar').fullCalendar('changeView', 'month');
$('#calendar').fullCalendar('render');
});
I have the events and event click:
$('#calendar').fullCalendar({
theme: false,
defaultView: 'month',
columnFormat: 'ddd',
firstDay: 1,
editable: true,
height: $('#calendar_content').height(),
header: {
right: 'today',
left: 'title'
//center: 'month,basicWeek'
},
events: [
{
title: 'N',
start: new Date(y, m, d-8)
},
{
title: 'L',
start: new Date(y, m, d+1)
},
{
title: 'L2',
start: new Date(y, m, d-15)
}
],
eventClick: function(calEvent, jsEvent, view) {
alert('Event: ' + calEvent.title);
alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
alert('View: ' + view.name);
$('#calendar').fullCalendar('updateEvent', calEvent);
}
For the first time the event click works well. I click in the event and I see the alert. But when I change the view with the external buttons, If I touch/click in the event, the alert doesn't show.
The fullcalendar version is: fullcalendar-2.3.2
Phonegap does not works well with events in fullcalendar. I found a solution.
I have created a function that creates the calendar with differents parameters (date, type of view) and put in this function the touch events (if put outside of this function, the events do not work), and when I change the date in the calendar or the view with an external button, I destroy the calendar and create again with the new date and view.
This is the code for the function to create calendar:
openCalendar: function(view, date_open, data){
var me = this;
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar({
theme: false,
defaultView: view,
columnFormat: 'ddd',
defaultDate: date_open,
firstDay: 1,
editable: true,
height: $('#calendar_content').height(),
header: {
right: 'today',
left: 'title'
//center: 'month,basicWeek'
},
events: [
{
title: 'E',
start: new Date(y, m, 1)
},
{
title: 'N',
start: new Date(y, m, d-5)
},
{
title: 'L',
start: new Date(y, m, d-3, 16, 0),
allDay: false
},
{
title: 'R',
start: new Date(y, m, d+4, 16, 0),
allDay: false
},
{
title: 'NS',
start: new Date(y, m, d-7)
},
{
title: 'N',
start: new Date(y, m, d-8),
imagen: 'yes'
},
{
title: 'L',
start: new Date(y, m, d+1)
},
{
title: 'L2',
start: new Date(y, m, d-15)
}
]
});
nova.touch.bindClick(".fc-event-container",function(){
me.firstDialog(); //open dialog
});
$('.fc-day').on( 'touchstart', function ( startEvent ) {
me.firstDialog();
});
},
In the initial call I do it like this:
var date = new Date();
me.openCalendar('month', date);
If I change something:
nova.touch.bindClick("#btn_week", function() {
var current_date = $('#calendar').fullCalendar('getDate');
$('#calendar').fullCalendar('destroy');
me.openCalendar('basicWeek', current_date);
});
nova.touch.bindClick("#btn_month", function() {
var current_date = $('#calendar').fullCalendar('getDate');
$('#calendar').fullCalendar('destroy');
me.openCalendar('month', current_date);
});
And when I touch in an event, the dialog or alert is opened correctly.
I'm not familiar with phonegap but I can guess what's going on here.
nova.touch.bindClick("#btn_week"... is binding to an element and becoming useless when the calendar is rerendered since the element no longer exists.
Solution 1
Use a delegated event listener. I do not know if this exists within phonegap.
Solution 2
Rebind it every render within eventAfterAllRender. Something along the lines of
eventAfterAllRender: function(){
nova.touch.bindClick("#btn_week", function() {
$('#calendar').fullCalendar('changeView', 'basicWeek');
$('#calendar').fullCalendar( 'render' );
});
nova.touch.bindClick("#btn_month", function() {
//$('#calendar_week').hide();
$('#calendar').fullCalendar('changeView', 'month');
$('#calendar').fullCalendar('render');
});
},
I have fullcalendar with some JSON data. It shows up as "12a Medical Day Jackson Post". Otherwise the display is fine. When I change the dates to be "start":"12/2/2015" to this 2015-2-12. The 12a appen disappears.
The Code for fullcalendar used is this
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek'
},
defaultDate: '2015-03-11',
defaultView: 'month',
selectable: false,
selectHelper: false,
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); // stick? = true
}
$('#calendar').fullCalendar('unselect');
},
editable: true,
eventLimit: true, // allow "more" link when too many events
eventMouseover: function(event, jsEvent, view) {
if (view.name !== 'agendaDay') {
$(jsEvent.target).attr('title', event.title);
}
},
events:[
{
"title":"Medical Day Jackson Post",
"start":"12/2/2015",
"end":"12/3/2015",
"description":"Jackson"
},
By default it shows the time unless the event is an allDay event. If allDay isn't specified, it guesses and in your case, it guessed differently depending on the date format.
So, either make allDay explicit in you events, or stop the time from displaying on all events with timeFormat: "", as one of you fullCalendar options.