Using fullCalendar with Wave
Hello DevDojo Guru's.
I've moved quite a bit in the current project and I must admit I am falling in love with Wave.
I've come to a little obstacle where I need to add a custom controller/s showing an events calendar, and I am trying to add the fullCalendar. It would have all been perfect, however this tiny tool is using bootstrap, and I am a bit stuck when trying to import both libraries to support Tailwind CSS and Bootstrap.
Have you got any similar case or used fullCalendar yourselves to share some hints as my search for adding a custom Tailwind theme has led nowhere?
Wave is also good
@lamarvandusen
No one argues that Wave is not good, the question here is if the use of fullCalendar with Wave has been done earlier and if so, how can I achieve that as I have specifics of a project that has been requiring the use of this library :)
Hi there!
I've not personally used full calendar with Wave, but I think that this should be doable, what you could do is only include the Bootstrap CSS on the specific page that you are going to be embedding the full calendar on.
Here is a good tutorial that shows how to use both Bootstrap and Tailwind CSS in the same Laravel project:
Tailwind and Bootstrap in a Laravel
Or are you using the FullCalendar CDN rather than installing everything via npm
? I think that in this case a quick solution would be to create a separate route for the fullCalendar that has its own view, and then use iFrame to embed that page anywhere on your site. That way the FullCalendar CDN classes should not interfere with the existing Wave styling.
Let me know how it goes!
Best,
Bobby
Hello Bobby.
Thank you for the kind suggestions. I am just in a need to have a menu link in Wave, leading to Events view and of course some calendar functionality that has been done already.
I don't need anything specific, but my initial issue was that while including bootstrap, somehow the calendar was not having its styles. I will give it another try as I doubt the Tailwind and Bootstrap classes overlap and report back.
Whichever way it works, is fine for me, I just need the user to be able to view their own calendar and add some personal events :)
Hello again, Bobby.
Not sure why it did not work earlier, but it seems like using the latest fullcalendar 5.11 allowed me directly to insert the needed code into a new template and have all the functionality needed.
Now I need to just find a "blank" template to use with my custom view where I can insert the calendar inside of my @content.
Do you have any idea where I can borrow a clean template or where can I find the views for all admin pages (Posts, Roles, Pages, Categories etc.)? Once I find their location, I will be able to strip what is not needed and keep it as an empty sample for all my custom project admin pages :)
Never mind, I got the answer by grabbing the output source of the HTML, cleaning it up a bit and adding the proper blade syntax:
Not sure why when I try to add CODE it overlaps the submit button, so I am posting the startup admin view blade here:
@extends('voyager::master')
@section('css')
@endsection
@section('header')
@endsection
@section('content')
Block Title Add New Event
<div class="panel">
<div class="panel-body" align="left">
<div>WAVE IS SOO COOL :)</div>
</div>
</div>
</div>
@endsection
There are other sections that can be checked in: project\vendor\tcg\voyager\resources\views\master.blade.php
Thanks again Bobby
















Neat! Happy to hear that you've got it all sorted out! Good luck with your project and feel free to share it once it is ready!
















With pleasure, Bobby, but there are quite a road yet to walk before it hits the water :)
















Worth mentioning that trying to implement full Calendar 3.x (in my case 3.90) caused an issue and I had to switch to 5.11 so that the appearance is shown. Having said that, beware that functions of 3/4.x has been rewritten so some functionality will have to be adjusted to the project needs and new function names. Hopefully that helps others trying to walk in my shoes :)
















Well, if you like to use the 5th version in your app, all you need to do is to include the bootstrap lob and full calendar 5.11 will work automatically :)
In terms of the menu link, just use the menu builder and point to your custom URL or the route name you defined in your web.php
If you try the 3.x version, be aware that it did not work on my side and as the need was to have a decent calendar with all new features, wrote the code to make it work based on the examples and some custom controllers + Javascript to fit my project needs...
Hello all.
Seems like after all, I might need to get back to the FC 2/3 version as a part of my project would require now to have a year view which is not that easy to achieve (or so it seems) with v5 which I got fully working before the Year View need.
There are some versions shared around that offer the year view of v2 or v3, however they seem to throw an error when I try to use them with Wave:
jQuery.Deferred exception: $(...).fullCalendar is not a function TypeError: $(...).fullCalendar is not a function
From my humble experience and tons of thread followups it seems as this issue could arrive if the jQuery is not loaded before the fullCalendar, however I am not yet sure why would it work fine with v5 and not with its predecessors. Seems like something I am missing here, so my question to the veterans here would be: If by any chance WAVE load somewhere automatically jQuery or it is only loaded through the templates and only if included manually somewhere?
Doing a quick search did not show me any results of jQuery, but it is better to make sure of it, so that I can figure out what is happening and why the earlier versions would not work just as fine as v5 does...
After trying to use FullCalendar 2.2.7 I am getting a similar error:
Uncaught TypeError: $(...).fullCalendar is not a function
The interesting part is that if I use the same code outside of WAVE, it works like a charm and is ready to implement. So I know as a last resort I can follow the suggestion of @bobby to import the view in iframe, however I am trying to figure out why would it not work the usual way... Any suggestions or ideas are more than welcome to try as most of the topics share that the order is very important and since I am using a Javascript demo which works outside of WAVE, then there is something else that is picky here...