Fullcalendar locale in Laravel not working

Question

I used FullCalendar in my Laravel project. I followed a tutorial on YouTube and the https://github.com/maddhatter/laravel-fullcalendar helper. Now I want to add locale settings to my calendar so I can change the language of it. But nothing works. I tried the FullCalendar docs and every solution I could find on the internet, but nothing worked. I hope you can help me.

I tried using the js files in my public folder, and the script from cdnjs.cloudflare but both didn't work.

My view:

@extends('layouts.layout')

<head>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>

    <script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/lang-all.js"></script>

    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.css"/>
</head>

@section('content')
    </br>
    <div class="control">
    <button onclick="window.location.href = '/calendars/create';">Voeg betaalevenement toe</button>
    </div>
    </br>

    {!! $calendar_details->calendar() !!}
    {!! $calendar_details->script() !!}
@endsection

What documentation did you check, exactly? [locale](https://fullcalendar.io/docs/v3/locale) was only introduced in version 3. Move to v3 instead of v2 if you want to use `locale`, and include the right files. Alternately, in v2 you can use [lang](https://fullcalendar.io/docs/v3/lang#v2), the usage is slightly different but it's a similar idea. But either way, the code you've got above makes no attempt to set the language or locale (unless it's done within one of those ->calendar() or ->script() functions, which you haven't shown), so in that case it's not surprising it doesn't do anything. — ADyson, Mar 26 '19 at 11:45
I checked the documentation of https://fullcalendar.io/docs and used this tutorial https://www.youtube.com/watch?v=JtMEGbCSqEg. I needed to use this kind of code instead of the code the fullcalendar site used, because this was the only code that actually worked. I didn't create the calendar() and script() functions, they were delivered with the package from madhatter's laravel. — Anna, Mar 26 '19 at 11:54
there's no reason the standard calendar code wouldn't work, unless you implemented it wrong. Be careful which documentation you are looking at, the latest version is v4 which is _very_ different from previous versions. The documentation page lets you choose which version to view docs for, make sure you choose correctly. — ADyson, Mar 26 '19 at 11:59
@ADyson Well then I guess I did something wrong, but it just didn't work. The one from Madhatter worked right away in my Laravel project. I did look at the different versions and tried them all, but nothing worked. — Anna, Mar 26 '19 at 12:03
ok. Well even if you use the laravel code to set up the calendar, if you want to specify an extra option like lang or locale then you have to do it via the ->setOptions method (as shown in the demo code on the project home page), otherwise it won't know you want to use the option. Did you do that? — ADyson, Mar 26 '19 at 12:04
But TBH if you are only just creating your calendar now, v2 is ancient history. You would be far better to start again using the new v4. It's supported with fixes, new functionality etc and has a lot more features. No-one has written a laravel library for it AFAIK but it shouldn't matter...there are loads of demos you can copy code from to get a basic calendar running using JavaScript. — ADyson, Mar 26 '19 at 12:05
@ADyson No I did not do anything with the setOptions, I didn't notice that. Thanks, will try it now :) This is just for a school assessment, so I just need it to work now and forget about it in a week. I guess the v2 will work for now? — Anna, Mar 26 '19 at 12:11
You should add your final code for the solution as an Answer, below. You are allowed to answer your own question :-) — ADyson, Mar 26 '19 at 12:23

score 1 · Accepted Answer · answered Mar 26 '19 at 12:28

1

Eventually, the following code worked for me. I added the '->setOptions(['lang' => 'nl']); in my Controller to my Calendar object.

$calendar_details = \Calendar::addEvents($event_list)->setOptions(['lang' => 'nl']);
       return view('calendar.index')->with(compact('calendar_details'));

I also added this script to my head:

<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/lang-all.js"></script>

answered Mar 26 '19 at 12:28

Anna

21
5

You should have shown this code first in your question because other people have not to lost their time. – Inzamam Idrees Mar 26 '19 at 12:33
@InzamamIdrees Why? I included all the information needed in my question. ADyson helped me to discover I needed the setOptions function, instead of adding code to my view (which I thought I needed to do). I didn't know this was the answer when I created my question, otherwise I wouldn't have asked it... – Anna Mar 26 '19 at 13:37

Inzamam Idrees · Answer 2 · 2019-03-26T12:23:38.053

0

In your header section:

<head>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.css"/>
</head>

In your Content Section:

<div id="calendar"></div>

In your footer section:

<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/lang-all.js"></script>

<script type="text/javascript">
    $(document).ready(function(){

        $('#calendar').fullCalendar({
            // for v2
            lang: 'ar',
        });
    });
</script>

I hope it would helpful.
Example of translating v2 fullcalendar check this codepen.

Note:- Assuming that you have to set the application locale for translating.

edited Mar 26 '19 at 12:23

answered Mar 26 '19 at 11:38

Inzamam Idrees

1,955
14
28

Yes I indeed need this for translating, but it did not work. Does it matter where I put the script? I tried putting it in the body and head(which is not the right place for javascript I guess) and under and above several other code. But nothing changed. I do live in The Netherlands so I guess the language should have changed from English to Dutch. – Anna Mar 26 '19 at 11:47
look at the version of fullCalendar that OP is using...`locale` is not a valid option – ADyson Mar 26 '19 at 11:47
@InzamamIdrees Maybe if you have v3 it will understand "lang", since it's legacy but if you have v2 it will not understand "locale" - and OP has v2 – ADyson Mar 26 '19 at 11:58
@InzamamIdrees you should also mention including the correct languages files in the page. And again the files to be used are different between v2 and v3. – ADyson Mar 26 '19 at 12:01
@InzamamIdrees Well like I said, I did change 'locale' to 'lang' but it didn't change anything to my calendar. I also tried to put the script at several places in my code, just in case it needed to be put before any other code to work. But the language of my calendar is still the same – Anna Mar 26 '19 at 12:01
It's also worth pointing out that in OP's code they are using server-side code to generate the calendar...so if they simply add this code it will either create a second calendar, or none at all (if there is no HTML element with id "calendar" in the page), and not have any effect on the main one. That may explain why they were unable to use your answer – ADyson Mar 26 '19 at 12:25
@ADyson OP's have not mention the controller code in the question so, I assuming that the problem occur with the basic of fullcalendar. – Inzamam Idrees Mar 26 '19 at 12:35
@InzamamIdrees `{!! $calendar_details->calendar() !!} {!! $calendar_details->script() !!}` is laravel (i.e. server-side) code. As you see from the code in the question, there's no jQuery being used directly here (it is injected by laravel based on the PHP code supplied - check the examples on the home page of the project linked in the question). The "basics" of fullCalendar are created by the server-side code, which is why it's the server-side code which would need changing. See now that OP has answered their own question based on my suggestions in the other comment thread. – ADyson Mar 26 '19 at 12:37

Fullcalendar locale in Laravel not working

2 Answers2