Localization of Joget Calendar

Confluence User - 19 Sep, 2017

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


localisation;calendar

3


19 Sep, 2017
confluenceUser
confluenceUser

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. 

19 Sep, 2017
confluenceUser
confluenceUser

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 

19 Sep, 2017
confluenceUser
confluenceUser

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 

 

 

RELATED QUESTIONS

Your answer


To answer a question you'll need an account.

Print