fullcalendar eventmouseover with no reaction - javascript

In my FullCalendar I have configured 2 simple listeners: eventMouseover and eventClick.
eventClick works fine.
eventMouseover doesn't work. Any reaction. No alert is triggered and nothing appears on console log.
Fullcalendar 4.0.2;
JQuery 3.3.1;
Bootstrap 4.3.1;
I have tried with different web browsers with no result.
New test: i made an even simpler test. I used only the fullcalandar zip file provided (https://github.com/fullcalendar/fullcalendar/releases) for old version 3.10 and current version 4.0.2.
In one of the demo html files in the directory, i added my 2 listeners (eventClick and eventMouseover) like in the code above. Each listener make a simple console.log().
For version 3.10: the 2 listeners work fine.
For version 4.0.2: eventClick work fine and eventMouseover DOESN'T WORK.
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ['interaction', 'dayGrid', 'timeGrid', 'list'],
locale: 'fr',
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
defaultDate: '2019-04-12',
navLinks: true, // can click day/week names to navigate views
weekNumbers: true,
weekNumbersWithinDays: true,
weekNumberCalculation: 'ISO',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
id: 1,
title: 'All Day Event',
start: '2019-04-01'
},
{
id: 2,
title: 'Long Event',
start: '2019-04-07',
end: '2019-04-10',
textColor: 'orange'
},
{
id: 11,
title: 'Dinner 2',
start: '2019-04-12T22:00:00'
},
{
id: 16,
title: 'Grand ménage',
start: '2019-04-18',
end: '2019-04-20'
}
],
eventClick: function (event_data) {
console.log('Clic');
alert('Clic: ' + event_data.event.id);
},
eventMouseover: function (event_data) {
console.log('Mouse over.');
alert('Mouse over.');
}
});
calendar.render();
});

Solved: With Fullcalandar v4, there is no more eventMouseover. It's replaced by 2 new listeners: eventMouseEnter and eventMouseLeave that works fine.

Related

I am trying to make a Timesheet web app using fullCalender

When user selects event type and no. of hours from dropdown then it should be added to the calendar. I have updated the event listener still no data is showing. Sorry if it seems a trivial question. i am new to web applications and a bit time strained.
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek'
},
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
});
});
ok1.addEventListener('click',function() {
let date = moment($('#calendar').fullCalendar('getDate'));
let val = document.getElementById('inputGroupSelect02').value;
let desc=document.getElementById('nobh').toString();
$('#calendar').fullCalendar('renderEvent',
$('#calendar').fullCalendar({events: [{
start: date,
title: val,
description: desc
}]}),true);
},true);
Thanks #ADyson following worked:-
$('#calendar').fullCalendar('renderEvent', { start: date, title: val, description: desc }, true);

Resource render hook control doesn't respond

I struggle to activate a resource label render hook. It works perfectly in the provided example and I've tried to mimic this. However, had no success. No errors, nothing crushed. It's just not active. Here's my JS calendar setup file:
document.addEventListener('DOMContentLoaded', function() {
//Initialize calendar
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source', //hide lices=nc=se warning
plugins: [ 'resourceTimeline', 'bootstrap', 'interaction' ], //connect plugins to page
defaultView: 'resourceTimelineMonth', //define timeline view
editable: true, //enable draggable events
droppable: true, //it allows things to be dropped onto the container
resourceGroupField: 'group', //grouping
resourceOrder: 'Projects, Personnel', //order of resources
resourceAreaWidth: '13%', //resource column width
resourceLabelText: 'Projects/Personnel', //resource label
resourcesInitiallyExpanded: true,
resourceLabelDidMount: function(arg) {
arg.el.addEventListener('click', function() {
console.log(arg)
})
},
//resources feeding
resources: {
url: 'scheduler/resources',
method: 'GET'
},
//events feeding
events: {
url: 'scheduler/events',
method: 'GET'
},
defaultTimedEventDuration: '24:00', //deafult event duration
weekNumberCalculation: 'ISO', //first day of week Monday
//header layout
header: {
left: 'prev,next today ',
center: 'title',
right: 'resourceTimelineMonth, resourceTimelineYear,'
},
//footer
footer: true,
footer: {
},
height: 'auto', //calendar window size (including header and footer)
//text on standard buttons
buttonText: {
today: 'Today',
month: 'Month',
year: 'Year'
},
});
calendar.render();
});
The calendar is rendered using the Express framework. Perhaps there's a simple line that I've just missed. Very much appreciate any help.
Here's my v.5 scheduler setup file:
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'resourceTimelineMonth',
slotMinWidth: 35,
nowIndicator: true,
editable: true,
droppable: true,
resourceGroupField: 'group',
resourceOrder: 'Projects, Personnel',
resourceAreaWidth: '13%',
resourcesInitiallyExpanded: true,
resourceAreaHeaderContent: 'Projects/Personnel',
resourceLabelDidMount: function(arg) {
arg.el.addEventListener('click', function() {
console.log(arg)
})
},
resources: {
url: 'scheduler/resources',
method: 'GET'
},
events: {
url: 'scheduler/events',
method: 'GET'
},
defaultTimedEventDuration: '24:00',
weekNumberCalculation: 'ISO',
headerToolbar: {
start: 'prev,next today',
center: 'title',
end: 'resourceTimelineMonth resourceTimelineYear'
},
height: 'auto',
buttonText: {
today: 'Today',
month: 'Month',
year: 'Year'
},
});
calendar.render();
Two screenshots:
fullcalendar example In "resource-add-remove" example from fullcalendar site a cursor changes into hand pointer when hovering over a resource label and reacts on click.
codepen example In the codepen example the cursor remains inactive and does not respond.

How to make events from one source render in background

I have added events to my calendar from two sources. One source is a json object and other is a google calendar. Now, I want to make events from google calendar render as background events (nothing should happen if user clicks on it) and for json events I need to perform some action when user clicks on it.
This is my code:
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
googleCalendarApiKey: 'AIzaSyACMTvM6xtGLSgkyLZqKw2t4chXf-tw8u8',
plugins: ['dayGrid', 'timeGrid', 'list', 'interaction', 'bootstrap', 'rrule', 'moment', 'googleCalendar'],
themeSystem: 'bootstrap',
timeZone: 'Asia/Colombo',
height: 'auto',
fixedWeekCount: false,
slotDuration: '00:15:00',
slotLabelInterval: '01:00:00',
navLinks: true,
nowIndicator: true,
selectable: true,
selectMirror: true,
slotLabelFormat: {
hour: 'numeric',
minute: '2-digit',
omitZeroMinute: false,
},
businessHours: {
// days of week. an array of zero-based day of week integers (0=Sunday)
daysOfWeek: [1, 2, 3, 4, 5, 6], // Monday - saturday
startTime: '09:00', // a start time
endTime: '16:00', // an end time
},
views: {
listDay: {
buttonText: 'Todays events'
},
listWeek: {
buttonText: 'This week events'
},
listMonth: {
buttonText: 'This month events'
}
},
footer: {
center: 'listDay listWeek listMonth'
},
header: {
left: 'prevYear,prev,next,nextYear today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
eventSources: [
// your event source
{
events: {!!$ce!!
},
color: 'blue',
editable: true
},
{
googleCalendarId: 'en.lk#holiday#group.v.calendar.google.com',
rendering: 'background',
color: 'yellow',
editable: false
}
],
select: function(info) {
alert('selected ' + info.startStr + ' to ' + info.endStr);
}
/* #can('isManager')
events: 'https://fullcalendar.io/demo-events.json'
#endcan */
});
calendar.render();
});
<div class="container-fluid mt--7">
<div class="row">
<div class="col-xl-12 mb-5 mb-xl-0">
<div class="card bg-white shadow">
<div class="card-body">
<div id="calendar" style="height: 800px;"></div>
</div>
</div>
</div>
</div>
</div>
But my google calendar events don't show as background events.
I try to add ids for each event sources like below and it makes my entire calendar disappear:
eventSources: [
// your event source
{
id='a',
events:{!! $ce !!},
color: 'blue',
editable:true
},
{
id='b',
googleCalendarId: 'en.lk#holiday#group.v.calendar.google.com',
rendering: 'background',
color: 'yellow',
editable:false
}
],
Now I need at least a way to identify events from each source separately.
I also tried
info.event.source
and
info.event.source.id
and even
info.event.color
to use as my identifier, but info.event.source shows as an object and info.source.id, info.source.color show as undefined properties
also this is how I pass JSON to my laravel view from controller'
<?php
namespace App\Http\Controllers;
use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\DB;
class HomeController extends Controller
{
/**
* Create a new controller instance.
*
* #return void
*/
public function __construct()
{
$this->middleware('auth');
}
/**
* Show the application dashboard.
*
* #return \Illuminate\View\View
*/
public function index()
{
$calender_events = DB::table('calender_events')->get();
$ce = $calender_events->toJson();
return view('dashboard', compact('ce'));
}
}
Please help.
I found answer my self,
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
googleCalendarApiKey: 'AIzaSyACMTvM6xtGLSgkyLZqKw2t4chXf-tw8u8',
plugins: [ 'dayGrid', 'timeGrid', 'list','interaction','bootstrap','rrule','moment','googleCalendar' ],
themeSystem: 'bootstrap',
timeZone: 'Asia/Colombo',
height: 'auto',
fixedWeekCount:false,
slotDuration: '00:15:00',
slotLabelInterval:'01:00:00',
navLinks:true,
nowIndicator: true,
selectable: true,
selectMirror:true,
slotLabelFormat:{
hour: 'numeric',
minute: '2-digit',
omitZeroMinute: false,
},
businessHours: {
// days of week. an array of zero-based day of week integers (0=Sunday)
daysOfWeek: [ 1, 2, 3, 4, 5, 6 ], // Monday - saturday
startTime: '09:00', // a start time
endTime: '16:00', // an end time
},
views: {
listDay: { buttonText: 'Todays events' },
listWeek: { buttonText: 'This week events' },
listMonth: { buttonText: 'This month events' }
},
footer:{
center: 'listDay listWeek listMonth'
},
header: {
left: 'prevYear,prev,next,nextYear today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
eventSources: [
// your event source
{
events:{!! $ce !!},
id:'personal',
},
{
googleCalendarId: 'en.lk#holiday#group.v.calendar.google.com',
id:'google',
}
],
eventClick: function(info) {
info.jsEvent.preventDefault(); // don't let the browser navigate
if(info.event.source.id=='google'){
alert('Event: google ');
}else{
alert('Event: personal ');
}
},
});
calendar.render();
});
</script>
I just missed a comma near
googleCalendarId: 'en.lk#my#group.v.calendar.google.com',
id:'google',
and
events:{!! $ce !!},
id:'personal',
and for background rendering , full-calendar event source object doesn't have option "rendering" (only single events can render in background)
anyway thanks for your help!.

Full calendar Jquery plugin, I want to show month instead of prev and next arrow

For example, I want to display a month instead of prev and next arrow. ?I have added the image below.
This is my code,
$('#calendar').fullCalendar({
header: {
left: 'prev',
center: '',
right: 'next'
},
contentHeight: 1050,
columnHeaderFormat: 'dddd',
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2018-09-01'
}
]
});
});
Please help me to fix this,
Thanks.

fullcalendar with clickable popup on eventclick

I am having a popup form. I have events in fullcalendar page.
I need to pop up this form on click of any event from full calendar.
Have tried full calendar with modal but based on my requirement, i require my pop up form only.I tried with window.open("url"), but it goes to next page.
Here's my code but it need to create a clickable popup.I have added my form through an image below, which shall popup on click of event. kindly acknowledge me asap..
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
utc: true,
header: {
left: 'prev,next today EventButton',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
droppable: true,
events: [
{
title: 'All Day Event',
start: '2016-07-01',
end: '2016-07-01'
},
{
title: 'Long Event',
start: '2016-07-07',
end: '2016-10-08'
}
],
eventClick: function(event, jsEvent, view) {
console.log(event.id);
window.open("<?php echo base_url() ?>common/calendar/form_calendar");
}
});
});

Categories