PLATFORM
  • Tails

    Create websites with TailwindCSS

  • Wave

    Start building the next great SAAS

  • Pines

    Alpine & Tailwind UI Library

  • Auth

    Plug'n Play Authentication for Laravel

  • Designer comingsoon

    Create website designs with AI

  • DevBlog comingsoon

    Blog platform for developers

  • Static

    Build a simple static website

  • SaaS Adventure

    21-day program to build a SAAS

Question By
Solved

Using fullCalendar with Wave

Solved
mikemastercorp

Jul 27th, 2022 11:14 AM

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?

lamarvandusen

Jul 29th, 2022 05:26 AM

Wave is also good

mikemastercorp

Jul 29th, 2022 05:57 AM

@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 :)

bobbyiliev

Jul 31st, 2022 11:44 PM

Best Answer

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

mikemastercorp

Aug 1st, 2022 05:19 AM

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 :)

mikemastercorp

Aug 3rd, 2022 09:02 AM

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 :)

mikemastercorp

Aug 3rd, 2022 12:43 PM

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

Report
1
bobbyiliev

Aug 3rd, 2022 01:12 PM

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!

Report
1
mikemastercorp

Aug 5th, 2022 02:59 PM

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

Report
1
mikemastercorp

Aug 5th, 2022 06:48 PM

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 :)

Report
1
mikemastercorp

Aug 11th, 2022 10:39 PM

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

mikemastercorp

Aug 17th, 2022 05:59 PM

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

mikemastercorp

Aug 17th, 2022 07:34 PM

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