I am using the FullCalendar object and defining its options in NgOnInit.
ngOnInit() {
forwardRef(() => Calendar);
this.calendarOptions = {
plugins: [dayGridPlugin, interactionPlugin],
editable: true,
droppable: true,
drop: function(e) {
let calendarApi = this.fullcalendar.getApi();
let eventList = calendarApi.getEvents();
console.log(eventList);
},
customButtons: {
myCustomButton: {
text: 'custom!',
click: function () {
alert('clicked the custom button!');
}
}
},
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth'
},
dateClick: this.handleDateClick.bind(this),
eventClick: this.handleEventClick.bind(this),
eventDragStop: this.handleEventDragStop.bind(this),
locale:'tr',
locales:[trLocale],
events:this.menuEvents
};
}
The getApi() function in options returns undefined. A method that normally works in the functions I define. This doesn't just apply to getApi() . A function like MyFunction() that I have defined also returns undefined. How can I run my custom functions for the drop event in Options?
Thank you for your help
Related
I have a problem with my Angular app where I have implemented the fullcalendar. When I click on a date it selects the wrong one. It only happens on the left side and top of the date square. I attach screenshots with my pointer, the click I do it where you see the pointer.
My full calendar code:
`calendarVisible = true;
calendarOptions: CalendarOptions = {
headerToolbar: {
left: '',
center: 'title',
// right: 'refreshButton prev,next today'
right: 'refreshButton prev,next today dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
initialView: 'dayGridMonth',
contentHeight: 900,
//initialEvents: INITIAL_EVENTS, // alternatively, use the `events` setting to fetch from a feed
weekends: true,
editable: this.global.isFeatureActive(Features.updateActivity),
eventDisplay: 'block',
selectable: true,
selectMirror: true,
dayMaxEvents: false,
dayMaxEventRows: 3,
locale: itLocale,
themeSystem: 'bootstrap5',
customButtons: {
refreshButton: {
//text: 'Aggiorna',
icon: 'arrow-clockwise',
click: () => {
this.refreshEvents();
}
}
},
eventDrop: this.handleDropEvent.bind(this),
eventContent: this.customEventContentTest.bind(this),
events: (info, successCallback, failureCallback) => {
this.actService.GetCustomByRange(info.start, info.end).subscribe({
next: (res) => {
this.global.setLoad(true);
this.aeService.activitiesSub.next(res);
this.aeService.applyFilter();
//this.aeService.activitiesToEvents(res);
successCallback(this.aeService.eventsSub.getValue());
},
error: (err) => {
failureCallback(err)
},
complete: () => {
this.global.setLoad(false);
}
});
},
select: this.handleDateSelect.bind(this),
eventClick: this.handleEventClick.bind(this),
eventMouseEnter: this.handleEventMouseOver.bind(this),
eventsSet: this.handleEvents.bind(this),
eventDidMount: (info) => {
//console.log("eventDidMount",info.el);
this.customEventContent(info);
},
eventAdd: (arg) => { },
// {description: "Lecture", department: "BioChemistry"}
/* you can update a remote database when these fire:
eventAdd:
eventChange:
eventRemove:
*/
};`
I'm trying to make it possible to drag events to an external div and back into the calendar again. However, whenever I drop an event I get TypeError: jsEvent is undefined.
I'm not entirely sure why it is doing this, this should be a valid parameter that is passed to the function of eventDragStop.
I'm using the latest FullCalendar 4.
Here is my code
// Load the CSS stuff
import {Tooltip} from "bootstrap";
require('#fortawesome/fontawesome-free/css/fontawesome.min.css');
require('#fortawesome/fontawesome-free/css/brands.min.css');
require('#fortawesome/fontawesome-free/css/solid.min.css');
require('../css/app.scss');
// Load the JS stuff
let $ = require('jquery');
require('bootstrap');
require('./libs/navbar.js');
require('jquery-ui/ui/widgets/draggable');
import apiclient from "./libs/apiclient";
import { Calendar } from '#fullcalendar/core';
import dayGridPlugin from '#fullcalendar/daygrid';
import timeGridPlugin from '#fullcalendar/timegrid';
import interactionPlugin from '#fullcalendar/interaction';
import bootstrapPlugin from '#fullcalendar/bootstrap';
// $(document).ready(function () {
//
// });
document.addEventListener('DOMContentLoaded', () => {
/* initialize the external events
-----------------------------------------------------------------*/
$('#external-events .fc-event').each(function() {
// store data so the calendar knows to render an event upon drop
$(this).data('event', {
title: $.trim($(this).text()), // use the element's text as the event title
stick: true // maintain when user navigates (see docs on the renderEvent method)
});
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
let calendarEl = document.getElementById('calendar-holder');
let calendar = new Calendar(calendarEl, {
views: {
jira: {
type: 'dayGridWeek',
duration: {months: 3},
buttonText: 'Jira'
}
},
defaultView: 'jira',
themeSystem: 'bootstrap',
editable: true,
droppable: true,
firstDay: 1,
contentHeight: 'auto',
weekNumbersWithinDays: true,
weekNumbers: true,
eventSources: [
{
url: "/fc-load-events",
method: "POST",
extraParams: {
filters: JSON.stringify({})
},
failure: () => {
// alert("There was an error while fetching FullCalendar!");
},
},
],
header: {
left: 'prev,next today',
center: 'title',
right: 'jira,dayGridMonth,timeGridWeek',
},
plugins: [ bootstrapPlugin, interactionPlugin, dayGridPlugin, timeGridPlugin ], // https://fullcalendar.io/docs/plugin-index
timeZone: 'UTC',
eventRender: function(info) {
var tooltip = new Tooltip(info.el, {
title: info.event.title+'<br>'+info.event.extendedProps.assignee,
placement: 'top',
trigger: 'hover',
container: 'body',
html: true
});
},
dragRevertDuration: 0,
drop: function() {
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
},
eventDragStop: function( event, jsEvent, view ) {
if(isEventOverDiv(jsEvent.clientX, jsEvent.clientY)) {
$('#calendar-holder').calendar('removeEvents', event._id);
var el = $( "<div class='fc-event'>" ).appendTo( '#external-events-listing' ).text( event.title );
el.draggable({
zIndex: 999,
revert: true,
revertDuration: 0
});
el.data('event', { title: event.title, id :event.id, stick: true });
}
}
});
calendar.render();
let isEventOverDiv = function(x, y) {
var external_events = $( '#external-events' );
var offset = external_events.offset();
offset.right = external_events.width() + offset.left;
offset.bottom = external_events.height() + offset.top;
// Compare
if (x >= offset.left
&& y >= offset.top
&& x <= offset.right
&& y <= offset .bottom) { return true; }
return false;
}
});
I figured out that the jsEvent is now located in event.jsEvent. This is where I can get the position from now.
I am using fullcalendar with json feed, the code is as follows
$('#calendar').fullCalendar({
theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
events: {
url: '/EventInfo/GetEventsByEmployee',
cache: false,
lazyFetching:true,
type: 'POST',
data: {
empId: $('#eventownerId').val()
},
error: function () {
alert('there was an error while fetching events!');
},
},
dayClick: function (date, allDay, jsEvent, view) {
displayDayEvents(date, allDay, jsEvent, view);
},
eventRender: function (event, element) {
element.find('.fc-event-time').hide();
element.attr('title', event.tip);
}
});
Here I am passing selected value of drop down control through data field as "empId: $('#eventownerId').val()". It returns correct data at page load.
Now I want to reload the calendar data when user selects option from drop down list.
for this purpose I used following code
$('#eventownerId').change(function (e) {
$('#calendar').fullCalendar('removeEvents');
$('#calendar').fullCalendar('refetchEvents');
});
But refetch calls the json method with old data (i.e. initial value of drop down control), even selected value of drop down has been changed.
How I can pass current value of drop down control and reload the fullcalendar?
I managed the problem by calling destroy of fullcalendar, as follows
$('#dropdownlistId').change(function (e) {
$('#calendar').fullCalendar('destroy');
RenderCalendar($(this).val());
});
and RenderCalendar() is
function RenderCalendar(eId) {
$('#calendar').fullCalendar({
theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
events: {
url: '/EventInfo/GetEventsByEmployee',
cache: true,
type: 'POST',
data: {
empId: eId
},
error: function () {
alert('there was an error while fetching events!');
},
},
dayClick: function (date, allDay, jsEvent, view) {
displayDayEvents(date, allDay, jsEvent, view);
},
eventRender: function (event, element) {
element.find('.fc-event-time').hide();
element.attr('title', event.tip);
}
});
}
Using this I managed the problem but not sure this is correct way of doing it. i.e. destroying and recreating the calendar. I am still searching for correct way
Have you tried get the id in a var and then do it like this?
var id = $('#eventownerId').val(); //outside
$('#calendar').fullCalendar({
theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
events: {
url: '/EventInfo/GetEventsByEmployee',
cache: false,
lazyFetching:true,
type: 'POST',
data: {
empId: id // var in here
},
error: function () {
alert('there was an error while fetching events!');
},
},
dayClick: function (date, allDay, jsEvent, view) {
displayDayEvents(date, allDay, jsEvent, view);
},
eventRender: function (event, element) {
element.find('.fc-event-time').hide();
element.attr('title', event.tip);
}
});
Another thing check if the ID is actually getting the diferent id from dropdown. Can you show the GetEventsByEmployee method? Cheers
I am integrating fullCalendar in my meteor application. fullCalendar expects a specific data format. I can create that data from my Collection. However the data is no longer reactive.
What is a way I can make the data I translated from my Collection to an Array "reactive"?
Thanks.
Client html:
<template name="carpool_calendar">
<div id="calendar"></div>
</template>
Client JS:
Template.carpool_calendar.rendered = function () {
//initialize the calendar in this template
$('#calendar').fullCalendar({
events: function(start, end, callback) {
var events = [];
var calendarEvents = Carpool_Events.find();
calendarEvents.forEach(function (carpool_event) {
events.push({
title: carpool_event.owner,
start: carpool_event.eventDate
});
console.log("Event owner " + ": " + carpool_event.owner);
});
callback(events);
},
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
weekends: false, // will hide Saturdays and Sundays
editable: true
});
};
Updated Client JS (This is not quite right yet. Its recreating the calendar on every data change...the page gets longer and longer with new calendar instances):
Template.carpool_calendar.rendered = function () {
Meteor.autorun(function() {
//initialize the calendar in this template
$('#calendar').fullCalendar({
events: function(start, end, callback) {
var events = [];
var calendarEvents = Carpool_Events.find();
calendarEvents.forEach(function (carpool_event) {
events.push({
title: carpool_event.owner,
start: carpool_event.eventDate
});
console.log("Event owner " + ": " + carpool_event.owner);
});
callback(events);
},
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
weekends: false, // will hide Saturdays and Sundays
editable: true
});
})};
Client JS Fully working "reactive" fullcalendar:
Template.carpool_calendar.rendered = function () {
//initialize the calendar in this template
$('#calendar').fullCalendar({
events: function(start, end, callback) {
var events = [];
var calendarEvents = Carpool_Events.find();
calendarEvents.forEach(function (carpool_event) {
events.push({
title: carpool_event.owner,
start: carpool_event.eventDate
});
console.log("Event owner " + ": " + carpool_event.owner);
});
callback(events);
},
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
weekends: false, // will hide Saturdays and Sundays
editable: true
});
Meteor.autorun(function() {
var calendarEvents = Carpool_Events.find();
$('#calendar').fullCalendar('refetchEvents');
});
};
Like TimDog said, you can't give the UI element a reactive array, and let it take care of the rest. But another option is you could use Meteor.autorun so when your collection changes, it can trigger a JS function to make an updated array, thereby making it somewhat reactive.
I'm not sure how to use this calendar exactly, but adding this into your client side code might help.
Meteor.autorun(function() {
calendarEvents = Carpool_Events.find();
$('#calendar').fullCalendar({
events: function(start, end, callback) {
var events = [];
calendarEvents.forEach(function (carpool_event) {
events.push({
title: carpool_event.owner,
start: carpool_event.eventDate
});
});
callback(events);
}
});
});
This is part of a bigger question regarding how to properly create UI components for Meteor that ensure reactive data contexts. It's a very good question and one that's been asked before.
The short answer is that there is no standardized framework yet -- like a Meteor.UI smart package. In the interim, however, your best bet is to hack the fullCalendar widget using the {{#each}} helper source as your guide. You'll want to pay attention to how data elements are labeled with Spark:
'each': function (data, options) {
var parentData = this;
if (data && data.length > 0)
return _.map(data, function(x, i) {
// infer a branch key from the data
var branch = (x._id || (typeof x === 'string' ? x : null) ||
Spark.UNIQUE_LABEL);
return Spark.labelBranch(branch, function() {
return options.fn(x);
});
}).join('');
else
return Spark.labelBranch(
'else',
function () {
return options.inverse(parentData);
});
},
I have fullcalendar working fine loading data using json from a flatfile(s).
I would like to load each months data from that months file on clicking prev/next.
Using ajax? events: function( start, end, callback ) addEventSource - removeEventSource? other?
Allow that jQuery is still a work in progress for me.
UPDATE:
I have set:
viewDisplay: function(view) { var next = view.title; alert(next); },
which gives me Month Year on clicking next/prev
How to parse this to json-events.php
I tried [split next] events: "json-events.php?month=month",
nope...
This is not using php, but you can change the AJAX call in getCalData() to do it.
EventSource will be filled with the next data.
I hope this helps a little bit.
$(document).ready(function () {
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'resourceMonth'
},
defaultView: 'resourceWeek',
eventSources: [ getCalData() ],
header: {
left: 'prev,next today',
center: 'title',
right: ''
},
viewDisplay: function (view) {
$('#calendar').fullCalendar('removeEvents');
$('#calendar').fullCalendar('addEventSource', getCalData());
$('#calendar').fullCalendar('rerenderEvents');
}
});
});
function getCalData() {
var source = [{}];
$.ajax({
async: false,
url: '/mysite/GetWeekData',
data: { myParam: $('#calendar').fullCalendar('getView').visStart },
success: function (data) {
$(data).each(function () {
source.push({
title: $(this).attr('title'),
start: $(this).attr('start'),
});
});
},
error: function () {
alert('could not get the data');
},
});
return source;
}
fullcalendar by default send 2 additional parameters when getting events, params[:start], params[:end]
u can use them to return queried events between these 2 values
you can just add View Render property to configuration Object of fullcalendar
viewRender: function(view, element) {
//console.debug("View Changed: ",view.start, view.end);
// events = loadevents();
jQuery(nativeelement).fullCalendar('removeEvents');
jQuery(nativeelement).fullCalendar('addEventSource', events);
}
now you can load month by month.
This syntax for angular2