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:
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.
$(document).ready(function() { init_calendar(); });