Resource render hook control doesn't respond - javascript

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.

Related

Custom buttons in full calender

I am trying to add custom buttons to the full calendar as per the UI requirement. I want to add and subtract one year on right and left custom buttons click. But the problem is when I call this. calendar('prevYear') on click functions, it throws an error this. calendar is not a function as I am accessing the calendar property inside the calendar init phase. How can implement this click function?
I am using alpine.js to initialize the full calendar and define its option. Is there any way to only change the icon of left and right but the function is automatically added by the full calender ?
<div
x-data="{
calendar: null,
events: [
],
init() {
this.calendar = new FullCalendar.Calendar(this.$refs.calendar, {
initialDate: '2022-12-19',
initialView: 'dayGridMonth',
selectable: true,
unselectAuto: false,
editable: true,
customButtons: {
prevYear: {
text: '<<',
click: function() {
this.calendar('prevYear')
}
},
nextYear: {
text: '>>',
click: function() {
this.calendar('nextYear')
}
}
},
headerToolbar: {
left: 'prevYear',
center: 'title',
right: 'nextYear'
},
views: {
dayGridMonth: {
titleFormat: { year: 'numeric' }
}
},
})
this.calendar.render()
},
}"
>
<div x-ref="calendar"></div>
</div>

I am using Full calendar resource timeline week view, version 5. The dates are scrolled horizontally. I want to scroll the dates vertically

Is there any way to achieve vertical scrolling of dates.Can it be done with the help of css change ?
This is my code for the calendar. Is there any other JS calendar that has verrtical scroll of dates in week view ?
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
selectable: true,
resourceAreaWidth:'10%',
locale: 'ja',
slotDuration:'00:30:00',
aspectRatio: 2.8,
slotMinTime:"08:30:00",
slotMaxTime:"20:30:00",
slotLabelInterval:"00:30:00",
//eventContent: 'some text', timeGridWeek listWeek
headerToolbar: {
left: '',
center: 'title',
right: 'resourceTimelineDay resourceTimelineFiveDays'
},
footerToolbar: {
center: 'prev next'
},
initialView: 'resourceTimelineDay',
views: {
resourceTimelineFiveDays: {
type: 'resourceTimeline',
duration: { days: 5 },
buttonText: '週'
},
resourceTimelineDay: {
type: 'resourceTimeline',
duration: { days: 1 },
buttonText: '今日'
}
},

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!.

fullcalendar eventmouseover with no reaction

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.

Alignment issue with full calendar popover

Am re sizing the height of the full calendar to fit in my screen. And am also limiting the events displayed in month view. So, now when I click +'x'more button, event container popup is coming at the bottom of the screen.
If am not altering the height, event container popup is aligned properly.
Please let me know how to fix popup alignment issue when calendar height is re sized.
Below is my code and attached the screenshot of calendar view
$('#calendar').fullCalendar({
now: new Date(),
editable: false,
aspectRatio: 1.8,
height: 200,
selectable: true,
scrollTime: '00:00',
header: {
left: 'prevYear,prev,next,nextYear today',
center: 'title',
right: 'timelineDay,timelineThreeDays,agendaWeek,month'
},
dayClick: function(date, jsEvent, view) {
var view = $('#calendar').fullCalendar('getView');
if (view.name == 'month') {
$('#calendar').fullCalendar('gotoDate', date._d.toISOString().slice(0, 10));
$('#calendar').fullCalendar('changeView', "timelineDay");
}
},
defaultView: 'timelineDay',
views: {
timelineThreeDays: {
type: 'timeline',
duration: {
days: 3
}
}
},
eventOverlap: false,
resourceAreaWidth: '25%',
resourceLabelText: 'Reservations',
resourceGroupField: 'building',
resources: resourcesList,
events: eventList,
eventLimit: true,
eventRender: function(event, element) {
element.find('.fc-title').append(' ' + event.statusCode);
},
});
screenshot

Categories