Fullcalendar not displaying events correctly

I tried to post a screengrab, but don't seem to be able to ...

Drive link to a screenshot:

https://drive.google.com/open?id=1QbOyEaTxZc-UoJ5WN6wHbsnqap53WE17

It might have to do with the time format. The times from the database is in 24H format while it seems that the one being presented is in 12H format.

Hmm. Thank you for the suggestion, but I don't think that's the issue - as it's displaying the time of "event 3" as 1.30pm (which is correct), but then rendering it at the time of the 2nd event!

I abandoned the project using v3 fullcalendar, and attempted an install of v4 using NPM.

It was tough at first, figuring out how to add the files on bootstrap.js and set them as globally available, but I've got there in the end!

Thanks for viewing / helping

How did you do this? I am struggling with the same issue when upgrading to v4

Hey. So. It was nowhere near as scary as I thought it would be!

Follow this guide: https://fullcalendar.io/docs/getting-started

Install fullcalendar using NPM, bearing in mind that you will need further plugins if you wish to use other fullcalendar functionality.

I installed core, timegrid, interaction and boostrap. So you need to do npm install --save @fullcalendar/core @fullcalendar/{whateverPluginYouNeed} @fullcalendar/{maybeAnotherOne}

Once that's installed, you need to include the files in the "try" block of your "bootstrap.js" file in Laravel. So I have:

require('@fullcalendar/core');
require('@fullcalendar/timegrid');
require('@fullcalendar/interaction');
require('@fullcalendar/bootstrap');

Then, at the bottom of the same file, you need to import the js modules and attach them to the "window" to use across your site. So I have:

import { Calendar } from '@fullcalendar/core';
import timeGridPlugin from '@fullcalendar/timegrid';
import interaction from '@fullcalendar/interaction';
import bootstrapPlugin from '@fullcalendar/bootstrap';

window.Calendar = { Calendar };
window.timeGridPlugin = timeGridPlugin;
window.interaction = interaction;
window.bootstrapPlugin = bootstrapPlugin;

Then, in the file in which I want my calendar, I have a div with an id of "calendar" and some javascript:

document.addEventListener('DOMContentLoaded', function() {

        var calendarEl = document.getElementById('calendar');

        var calendar = new Calendar.Calendar(calendarEl, {
            	defaultView: 'timeGridDay',
		stuff: 'thing'
	});
});
		

@thorbym

I am trying this but not having any luck. I don't see a "try" statement in my bootstrap.js file. Is that a try/catch? If so, what is the code you have for that?

I'm also getting a 404 in regards to the @fullcalendar statement. Any ideas?

Hi there @ajsmith_codes , apologies for the delay in my reply, I didn't get a notification email for this comment :(

Firstly, have you installed it so you can see the @fullcalendar folder within your node_modules folder? If not, be sure to follow this from the fullcalendar website:

"FullCalendar is available on NPM or Yarn. You’ll first need to install FullCalendar’s core package as well as any plugins. Example:

npm install --save @fullcalendar/core @fullcalendar/daygrid"

If it is installed, my bootstrap.js file is as follows:

window._ = require('lodash');

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
    require('bootstrap-colorpicker');
    require('datatables.net');
    require('datatables.net-bs4');
    require('jquery-timepicker/jquery.timepicker.js');
    require('@fullcalendar/core');
    require('@fullcalendar/timegrid');
    require('@fullcalendar/interaction');
    require('@fullcalendar/core/locales/en-gb');
    require('@fullcalendar/bootstrap');
} catch (e) {}

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

// import Echo from 'laravel-echo';

// window.Pusher = require('pusher-js');

// window.Echo = new Echo({
//     broadcaster: 'pusher',
//     key: process.env.MIX_PUSHER_APP_KEY,
//     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
//     encrypted: true
// });

/** Full calendar section
**/
import { Calendar } from '@fullcalendar/core';
import timeGridPlugin from '@fullcalendar/timegrid';
import interaction from '@fullcalendar/interaction';
import bootstrapPlugin from '@fullcalendar/bootstrap';

window.Calendar = { Calendar };
window.timeGridPlugin = timeGridPlugin;
window.interaction = interaction;
window.bootstrapPlugin = bootstrapPlugin;

@thorbym I also didn't receive an emai notification for this. Weird!

I have followed what you have, but still not working. What version of Laravel are you using? I am using v7.

I gave up on Fullcalendar and went with Dhtmlx Scheduler. Much easier to work with.