We Keep Coding

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.

How to scroll to current day after render calebdar?

I'm using fullcalendar.io.I want to scroll up to the current date after the render of the calendar on listMonth view.
calendar code:
if ($(window).width() < 768) {
columnFormat = 'ddd';
defaultView = 'listMonth';
left = 'prev,next';
right = 'month,listMonth';
} else {
columnFormat = 'dddd';
defaultView = 'month';
left = 'prev';
right = 'next';
}
$('#calendar').fullCalendar({
header: {
left: left,
center: 'title',
right: right
},
timeFormat: 'H:mm',
columnFormat: columnFormat,
defaultView: defaultView,
events: {
url: MyAjax.ajaxurl,
type: 'POST',
data: {
action: 'events_list',
security: MyAjax.security,
},
},
eventClick: function (event, jsEvent, view) {
if (event.url) {
window.open(event.url, "_blank");
return false;
}
},
});
Please help me to do it.
Example: https://jewlife.by/

Muhammad's answer is fine for most of FullCalendar's views, but alas the listMonth view does not support that approach for jumping to a particular day in the current month.
Instead, you need to programmatically scroll to the current day. Something like the following will work fine:
// Initialise the calendar
$("#calendar").fullCalendar({
eventAfterAllRender: function (view) {
if (view.name === "listMonth") {
var viewStartDate = $("#calendar").fullCalendar("getDate");
var target = $(".fc-listMonth-view .fc-list-heading[data-date=" + viewStartDate.format("YYYY-MM-DD") + "]");
if (target.length) {
$(".fc-listMonth-view .fc-scroller").scrollTop(target.position().top);
}
}
},
// Other initial settings here
});
Tested and working as of FullCalendar v3.9.0.

you should use goToDate() if you want to navigate to a date after the calendar has loaded, via the click of a button, it moves the calendar to an arbitrary date.
$('#calendar').fullCalendar( 'gotoDate', date )
Note: date can be a `Moment object or anything the Moment constructor accepts.
Or if you like the calendar to load on a specific date then you should use the defaultDate option while initializing the calendar.
You can learn more here
$(document).ready(function() {
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
defaultDate: '2017-11-12',
defaultView: 'listMonth',
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [{
title: 'Old Day Event',
start: '2014-05-01'
}, {
title: 'All Day Event',
start: '2017-11-01'
},
{
title: 'Long Event',
start: '2017-11-07',
end: '2017-11-10'
},
{
id: 999,
title: 'Repeating Event',
start: '2017-11-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2017-11-16T16:00:00'
},
{
title: 'Conference',
start: '2017-11-11',
end: '2017-11-13'
},
{
title: 'Meeting',
start: '2017-11-12T10:30:00',
end: '2017-11-12T12:30:00'
},
{
title: 'Lunch',
start: '2017-11-12T12:00:00'
},
{
title: 'Meeting',
start: '2017-11-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2017-11-12T17:30:00'
},
{
title: 'Dinner',
start: '2017-11-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2017-11-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2017-11-28'
}
]
});
var local = $.fullCalendar.moment('2014-05-01T12:00:00');
calendar.fullCalendar('gotoDate', local);
});
#goto {}
<script src="https://fullcalendar.io/js/fullcalendar-3.7.0/lib/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://fullcalendar.io/js/fullcalendar-3.7.0/fullcalendar.min.js"></script>
<link href="https://fullcalendar.io/js/fullcalendar-3.7.0/fullcalendar.min.css" rel="stylesheet" />
<link href="https://fullcalendar.io/js/fullcalendar-3.7.0/fullcalendar.print.min.css" rel="stylesheet" />
<p>calendar is navigated to previous date November in 2014 after loading on 2017 by default </p>
<div id='calendar'></div>

fullcalendar- only get the selected event by user

Is there any possibility of only getting the selected event by user click and not the events already populated in fullcalendar?
I looked into documentations but couldn't find much help there.
Though, I understand I can get all events by:
$("#calendar").fullCalendar( 'clientEvents' [, idOrFilter ] ) -> Array
But I don't want this. And I am of-course using select.
The other notable thing here is I want this value in another JS file. so,
eventClick: function (selectedEvent) {
//selectedEvent.id
//selectedEvent.
}
won't actually work for my case.
Here's how my config of fullCalendar looks like:
$("#calendar").fullCalendar({
weekends: false,
defaultView: 'agendaWeek',
slotDuration: '00:30', // hours/minutes
allDaySlot: false,
header: {
left: 'today prev,next',
center: 'title',
right: ''
},
height: "auto",
contentHeight: 600,
events: [
{
title : 'event1',
start : '2017-05-01T12:30:00'
},
{
title : 'event2',
start : '2017-05-09T12:30:00',
end : '2010-05-09T13:30:00'
},
{
title : 'event3',
start : '2010-01-09T12:30:00',
allDay : false // will make the time show
}
],
businessHours: [ // specify an array instead
{
dow: [ 1, 2, 3 ], // Monday, Tuesday, Wednesday
start: '08:00', // 8am
end: '18:00' // 6pm
},
{
dow: [ 4, 5 ], // Thursday, Friday
start: '10:00', // 10am
end: '16:00' // 4pm
}
],
dayRender: function( date, cell ) {
alert('Clicked on: ' + date);
alert('Coordinates: ' + cell);
// alert('Current view: ' + view.name);
},
selectable: true,
selectConstraint: "businessHours",
select: function() { ... },
})

Try to use eventClick:
eventClick: function (selectedEvent) {
//selectedEvent.id
//selectedEvent.title
}

Fullcalendar - How to add time of the day in week view

Default weekview is like this one, no time of the day on left side:
http://fullcalendar.io/views/basicWeek/
but I'd like to make the view this way, with time of the day on left side:
http://fullcalendar.io/js/fullcalendar-2.3.1/demos/agenda-views.html
click 'week' on upper button panel to see it.
How do I configure it to make it looks like this way?
Thanks!

You want to use the defaultView property. This sets, as specified in the docs, the initial view when the calendar loads. The specific view you want is agendaWeek (list of available views).
So when you initialize your calendar, you'll put defaultView: 'agendaWeek'.
Example:
$('#fullCal').fullCalendar({
events: [{
title: 'Random Event 1',
start: moment().add(-4, 'h'),
end: moment().add(-2, 'h'),
allDay: false
}, {
title: 'Random Event 2',
start: moment().add(1, 'h'),
end: moment().add(2, 'h'),
allDay: false
}, {
title: 'Random Event 3',
start: moment().add(6, 'h'),
end: moment().add(8, 'h'),
allDay: false
}],
header: {
left: '',
center: 'prev title next today',
right: ''
},
timezone: 'local',
defaultView: 'agendaWeek' /* this is the line you need */
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.js"></script>
<div id="fullCal"></div>