Localization of Joget Calendar

 
1
0
-1

Hello experts,

 

I like to localise the Calendar used in Joget. I found that the plugin from fullcalendar.io/ is used. On their site I found the possibility to embed a piece of javascript to localise the calendar.

https://fullcalendar.io/docs/text/locale/

<script src='fullcalendar/fullcalendar.js'></script>

<script src='fullcalendar/locale-all.js'></script>

<script>

$(document).ready(function() { 

$('#calendar').fullCalendar({

locale: 'nl' 

});

});

</script>


Two questions:

1) What is the best place to embed this code? In the 'Custom Header (HTML)' section?

2) How to I reference the javascripts fullcalendar.js and locale-all.js. I looked in de calendar_menu.jar and there I found the scripts. By the way: In calendar-menu.jar I found that locale-all.js probably is called lang-all.js


Thanks in advance


Arend-Henk


    CommentAdd your comment...

    3 answers

    1.  
      1
      0
      -1

      Hi Experts,

      I looked into the generated code of the calendar page. The relevant part looked like ths:

       

      ...

      <link href='/jw/plugin/org.joget.CalendarMenu/lib/fullcalendar.min.css' rel='stylesheet' />
      <link href='/jw/plugin/org.joget.CalendarMenu/lib/fullcalendar.print.css' rel='stylesheet' media='print' />
      <script src='/jw/plugin/org.joget.CalendarMenu/lib/moment.min.js'></script>
      <script src='/jw/plugin/org.joget.CalendarMenu/lib/fullcalendar.min.js'></script>
      <script src='/jw/plugin/org.joget.CalendarMenu/lib/lang-all.js'></script>
      <script src='/jw/plugin/org.joget.CalendarMenu/lib/gcal.js'></script>
      <script>
      $(document).ready(function() {
      $('#fullcalendar').fullCalendar({
      header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay'
      },
      buttonText: {
      today: 'Today',
      month: 'Month',
      week: 'Week',
      day: 'Day'
      },
      lang: "en",
      eventLimit: true,
      eventSources: [
      {
      url: '/jw/web/json/app/mba/1/plugin/org.joget.CalendarMenu/service?action=events&userviewId=v&menuId=GeneralCalendar&key=&_nonce=U%257D%25EF%25BF%25BD%25EF%25BF%25BD%25EF%25BF%25BD%257D%257B4cV',
      }

      ],
      eventRender: function(event, element, view) {
      //console.log(event); console.log(element); console.log(view);
      },
      eventAfterRender: function(event, element, view) {
      //console.log(event); console.log(element); console.log(view);
      },
      eventAfterAllRender: function(view) {
      //console.log(view);
      },
      eventClick: function(event, jsEvent, view) {
      console.log(event); console.log(jsEvent); console.log(view);
      var popupActionDialog = new PopupDialog("/jw/web/userview/jmrb/v/_/calendarDisplay?id="+event.id+"&embed=true");
      popupActionDialog.init();
      }
      });
      });
      </script>


      <div class="calendar_menu_body">
      <h3></h3>

      <script>
      $(document).ready(function() {
      $('#fullcalender').fullCalendar({
      buttonText: {
      today: 'Vandaag',
      month: 'Maand',
      week: 'Week',
      day: 'Dag'
      },
      lang: "nl"
      });
      });
      </script>

      <style>
      h1 {text-align:center;}
      </style>

      <h1>Deadline Calendar</h1>

      <div id="fullcalendar" class="fullcalendar"></div>

      </div>

       

      The bold text I added through the Custom Header.

       

      1) It seems to me that the relevant js-scripts are correctly referenced.

      2) I copying the script to change the buttonText and language. So I think that is correct.

      3) I wonder of my added script is placed at the right place. In other words: does the Custom Header place the addition at the right place? It is now place in the div class="calendar_menu_body".

       

      Thanks in advance,

      Arend-Henk 

       

       

        CommentAdd your comment...
      1.  
        1
        0
        -1

        Hi Panda,

         

        Thx for your quick response.

        I placed the suggested code in de custom header. It didn't work.

        I still have the question about the reference to the jar. Is the reference right?

         

        Thanks in advance,

        Arend-Henk 

          CommentAdd your comment...
        1.  
          1
          0
          -1

          Hi,

          From the fullcalendar document, it seem like you can set option using $('#fullcalendar').fullCalendar('option', 'locale', 'nl');

          You can try to include the locale-all.js and the above script in the "Custom Header (HTML)" of the Calendar Menu. 

            CommentAdd your comment...