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');
});
},
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'm populating an object array from an ajax call using jQuery, in order to display event data from our system into the calendar. For some reason, it won't recognize it as events, and they aren't being displayed on the calendar. See code below.
I've checked it over 100 times, and I'm sure the data is coming in the correct format. The events variable is also not empty at runtime.
var events = [];
$.ajax({
type: 'GET',
url: "ajax/shared.ashx",
dataType: 'json',
data: 'm=get-staff-schedule',
success: function (json) {
console.log(json);
$.each(json.response.data, function (i, app) {
events.push({
id: app.id,
title: app.ADMIN_NAME,
daysOfWeek: app.day - 1,
startTime: app.time_in,
endTime: app.time_out
});
});
renderCalendar(events);
}
});
function renderCalendar(events) {
var calendarEl = document.getElementById('calendar');
var d = new Date();
var date = d.getFullYear() + '-' + padDigits(d.getMonth() + 1, 2) + '-' + padDigits(d.getDate(), 2)
debugger
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ['interaction', 'dayGrid', 'timeGrid', 'bootstrap'],
themeSystem: 'bootstrap',
defaultView: 'timeGridWeek',
defaultDate: date,
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
events: events
});
calendar.render();
}
Here is the image of the rendered, blank, calendar. Also, here are FullCalendar's docs for reference: https://fullcalendar.io/docs/event-parsing
replace
events.push({
id: app.id,
title: app.ADMIN_NAME,
daysOfWeek: app.day - 1,
startTime: app.time_in,
endTime: app.time_out
});
by
events.push({
id: app.id,
title: app.ADMIN_NAME,
daysOfWeek: app.day - 1,
start: app.time_in,
end: app.time_out
});
I figured it out! Only took me like 2 hours!
Basically, this object requires all strings. So, the daysOfWeek value needed to be converted from an integer to a string. Here is what I did:
events.push({
id: app.id,
title: app.ADMIN_NAME,
daysOfWeek: (app.day - 1) + '',
startTime: app.time_in,
endTime: app.time_out
});
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>
};
});
});
How do I add an event into another event?
example
$('#calendar').fullCalendar({
events: [
{
start: new Date(),
end: new Date(),
events: [ {}, {} ] // ???
}
]
});
see screenshot
This is not possible without heavy custom modifications. Very much beyond the scope of an SO question.
The closest you can get easily is to use background events as "parent" events and regular events as child events. Something like the following:
var sourceEvents = [
{
id: 1,
start: moment(),
end: moment().add(6,'h'),
childEvents: [{
start: moment().add(1,'h'),
end: moment().add(2,'h'),
}, {
start: moment().add(3,'h'),
end: moment().add(5,'h'),
}],
}
];
$("#calendar").fullCalendar({
defaultView: "agendaWeek",
events: function( start, end, timezone, callback ) {
var events = [];
sourceEvents.forEach(function(event){
event.rendering = "background";
events.push(event);
event.childEvents.forEach(function(childEvent){
// you could do some checks to make sure they are in bounds
// you could also do some color coding here
childEvent.parentId = event.id;
events.push(childEvent);
});
});
callback(events);
},
});
JSFiddle
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.