I want to translate the FullCalendar header (next, prev, today...). I already did the month/days but I have some problems with the header. I did not succeed with the "locale" settings.

<script src=".3.1/jquery.min.js"></script>
<div class="ui container">
  <div class="ui grid">
    <div class="ui sixteen column">
      <div id="calendar"></div>
    </div>
  </div>
</div>



<!-- partial -->
<script src='.2.7/semantic.min.js'></script>
<script src='.1.1/jquery.min.js'></script>
<script src='.js/2.17.1/moment.min.js'></script>

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

$(document).ready(function() {

  $('#calendar').fullCalendar({
    monthNames: ['Janvier', 'Fevrier', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Aout', 'Septembre', 'Octobre', 'Novembre', 'Dedembre'],
    monthNamesShort: ['Janv', 'Fev', 'Mar', 'Avr', 'Mai', 'Juin', 'Jul', 'Aou', 'Sep', 'Oct', 'Nov', 'Dec'],
    dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
    dayNamesShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],

    header: {
      left: 'prev, next, today',
      center: 'title',
      right: 'month, basicWeek, basicDay'
    },

    defaultDate: '<?= json_encode(date("Y-m-d"), \JSON_HEX_TAG) ?>',
    navLinks: true,
    editable: true,
    eventLimit: true,
    events: <?= json_encode($events, \JSON_HEX_TAG) ?>
  });

})();

I want to translate the FullCalendar header (next, prev, today...). I already did the month/days but I have some problems with the header. I did not succeed with the "locale" settings.

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ui container">
  <div class="ui grid">
    <div class="ui sixteen column">
      <div id="calendar"></div>
    </div>
  </div>
</div>



<!-- partial -->
<script src='https://cdnjs.cloudflare./ajax/libs/semantic-ui/2.2.7/semantic.min.js'></script>
<script src='https://cdnjs.cloudflare./ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare./ajax/libs/moment.js/2.17.1/moment.min.js'></script>

<script src='https://cdnjs.cloudflare./ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js'></script>

$(document).ready(function() {

  $('#calendar').fullCalendar({
    monthNames: ['Janvier', 'Fevrier', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Aout', 'Septembre', 'Octobre', 'Novembre', 'Dedembre'],
    monthNamesShort: ['Janv', 'Fev', 'Mar', 'Avr', 'Mai', 'Juin', 'Jul', 'Aou', 'Sep', 'Oct', 'Nov', 'Dec'],
    dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
    dayNamesShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],

    header: {
      left: 'prev, next, today',
      center: 'title',
      right: 'month, basicWeek, basicDay'
    },

    defaultDate: '<?= json_encode(date("Y-m-d"), \JSON_HEX_TAG) ?>',
    navLinks: true,
    editable: true,
    eventLimit: true,
    events: <?= json_encode($events, \JSON_HEX_TAG) ?>
  });

})();

• javascript
• html
• css
• fullcalendar

Share Improve this question Follow edited May 7, 2021 at 9:16 T J 43.2k1313 gold badges8686 silver badges142142 bronze badges asked May 7, 2021 at 8:56 Laurent LouisLaurent Louis 10922 silver badges1010 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

You can use buttonText option to add translations for the buttons:

buttonText: {
  today: 'hellow',
  day: 'world',
  week:'wele',
  month:'hmmm'
},

buttonText
Text that will be displayed on buttons of the headerToolbar/footerToolbar.

{
  today:    'today',
  month:    'month',
  week:     'week',
  day:      'day',
  list:     'list'
}