2

Estoy tratando de traducir el calendario que se origina de la librería fullcalendar.js. Para eso agregué lang/es. Sin embargo, me devuelve el siguiente error en la consola:

a.fullCalendar.datepickerLang is not a function

Adjunto imagen:

introducir la descripción de la imagen aquí

Código:

/* CALENDAR */
function  init_calendar() {
  
if( typeof ($.fn.fullCalendar) === 'undefined'){ return; }
console.log('init_calendar');
  
var date = new Date(),
  d = date.getDate(),
  m = date.getMonth(),
  y = date.getFullYear(),
  started,
  categoryClass;

  var calendar = $('#calendar').fullCalendar({
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay,listMonth'
    },

    selectable: true,
    selectHelper: true,
    select: function(start, end, allDay) {
      $('#fc_create').click();

      started = start;
      ended = end;

      $(".antosubmit").on("click", function() {
        var title = $("#title").val();
        if (end) {
          ended = end;
        }

        categoryClass = $("#event_type").val();

        if (title) {
          calendar.fullCalendar('renderEvent', {
            title: title,
            start: started,
            end: end,
            allDay: allDay
          },
            true // make the event "stick"
          );
        }

        $('#title').val('');
        calendar.fullCalendar('unselect');
        $('.antoclose').click();

        return false;
      });
    },

    eventClick: function(calEvent, jsEvent, view) {
      $('#fc_edit').click();
      $('#title2').val(calEvent.title);

      categoryClass = $("#event_type").val();

      $(".antosubmit2").on("click", function() {
        calEvent.title = $("#title2").val();

        calendar.fullCalendar('updateEvent', calEvent);
        $('.antoclose2').click();
      });

      calendar.fullCalendar('unselect');
    },

    editable: true,
    events: [{
      title: 'All Day Event',
      start: new Date(y, m, 1)
    }, {
      title: 'Long Event',
      start: new Date(y, m, d - 5),
      end: new Date(y, m, d - 2)
    }, {
      title: 'Meeting',
      start: new Date(y, m, d, 10, 30),
      allDay: false
    }, {
      title: 'Lunch',
      start: new Date(y, m, d + 14, 12, 0),
      end: new Date(y, m, d, 14, 0),
      allDay: false
    }, {
      title: 'Birthday Party',
      start: new Date(y, m, d + 1, 19, 0),
      end: new Date(y, m, d + 1, 22, 30),
      allDay: false
    }, {
      title: 'Click for Google',
      start: new Date(y, m, 28),
      end: new Date(y, m, 29),
      url: 'http://google.com/'
    }]
    
  });
  
};

$(document).ready(function() {
  init_calendar();
});
<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <!-- Meta, title, CSS, favicons, etc. -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Gentelella Alela! | </title>

  <!-- Bootstrap -->
  <link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
  
  <!-- Font Awesome -->
  <link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  
  <!-- NProgress -->
  <link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
  
  <!-- FullCalendar -->
  <link href="../vendors/fullcalendar/dist/fullcalendar.min.css" rel="stylesheet">
  <link href="../vendors/fullcalendar/dist/fullcalendar.print.css" rel="stylesheet" media="print">
  
  <!-- Custom styling plus plugins -->
  <link href="../build/css/custom.min.css" rel="stylesheet">
</head>

<body class="nav-md">

<!-- page content -->
<div class="right_col" role="main">
  <div class="">
    <div class="page-title">
      <div class="title_left">
        <h3>Calendar <small>Click to add/edit events</small></h3>
      </div>

      <div class="title_right">
        <div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Search for...">
            <span class="input-group-btn">
              <button class="btn btn-default" type="button">Go!</button>
            </span>
          </div>
        </div>
      </div>
    </div>

    <div class="clearfix"></div>

    <div class="row">
      <div class="col-md-12">
        <div class="x_panel">
          <div class="x_title">
            <h2>Calendar Events <small>Sessions</small></h2>
            <ul class="nav navbar-right panel_toolbox">
              <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></li>
              
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                <ul class="dropdown-menu" role="menu">
                  <li><a href="#">Settings 1</a></li>
                  <li><a href="#">Settings 2</a></li>
                </ul>
              </li>

              <li><a class="close-link"><i class="fa fa-close"></i></a></li>
            </ul>

            <div class="clearfix"></div>
          </div>

          <div class="x_content">
            <div id='calendar'></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- /page content -->

<!-- footer content -->
      
<!-- jQuery -->
<script src="../vendors/jquery/dist/jquery.min.js"></script>

<!-- Bootstrap -->
<script src="../vendors/bootstrap/dist/js/bootstrap.min.js"></script>

<!-- FastClick -->
<script src="../vendors/fastclick/lib/fastclick.js"></script>

<!-- NProgress -->
<script src="../vendors/nprogress/nprogress.js"></script>

<!-- FullCalendar -->
<script src="../vendors/moment/min/moment.min.js"></script>
<script src="../vendors/fullcalendar/dist/fullcalendar.min.js"></script>

<!--este me causa error en la imagen, para que traduzca el calendario-->
<script type="text/javascript" src="../vendors/fullcalendar/dist/lang/es.js"></script>

<!-- Custom Theme Scripts -->
<script src="../build/js/custom.min.js"></script>

</body>
</html>

Ese es todo el código que utilizo para generar el calendario. La versión que estoy utilizando es la de FullCalendar v3.1.0. Utilicé los archivos que recomiendan en su Página Oficial, que es es.js y llamarlo con un script:

<script type="text/javascript" src="../vendors/fullcalendar/dist/lang/es.js"></script>

Gracias por su apoyo.

6
  • Hola elber, esta pregunta es algo amplia, por favor edítala para añadir más información: ¿qué versión de FullCalendar estás usando? ¿cómo incorporas los ficheros en el proyecto? ¿Puedes crear un ejemplo mínimo verificable en la propia pregunta para que podamos ver el problema? (o al menos compartir el código). Lee Cómo preguntar para más información.
    – Alvaro Montoro
    Commented el 16 jun. 2019 a las 4:14
  • La versión que estoy usando es la de FullCalendar v3.1.0, use los archivos que recomiendan en su pagina oficial, fullcalendar.io/docs/v3/locale, que es agregar el archivo es.js y llamarlo con un script :<script src='fullcalendar/locale/es.js'></script> Commented el 16 jun. 2019 a las 4:45
  • 1
    Por favor, añade tu código en la pregunta para que podamos verlo y detectar un posible problema. Una captura del error no es suficiente para ayudarte.
    – Alvaro Montoro
    Commented el 18 jun. 2019 a las 14:30
  • Gracias alvaro, alli agregue el código espero que la comunidad pueda ayudarme para que se pueda ejecutar y así traducir el calendario en cuestión, y gracias por las sugerencias. Commented el 19 jun. 2019 a las 10:46
  • 1
    Hay un error al final del javascript porque no está bien cerrado (te faltan el paréntesis y el punto y coma final): $(document).ready(function() { init_calendar(); }); Commented el 19 jun. 2019 a las 12:54

1 respuesta 1

0

Solución Real: Se debe actualizar a la última versión del Fullcalendar y/o jQuery/UI.

Solución Alternativa: Traducir los títulos manualmente.

$('#calendar-group').fullCalendar({
    dayNames: ['Domingo', 'Lunes', 'Martes', 'Miercoles', 'Jueves', 'Viernes', 'Sabado'],
    dayNamesShort: ['Dom','Lun','Mar','Mie','Jue','Vie','Sáb'],
    monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
    monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
    buttonText: {
        today:    'Hoy',
        month:    'Mes',
        week:     'Semana',
        day:      'Día',
        list:     'Lista'
    }

});

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.