fullcalendar日历显示中文此方法不需要zh-cn.js,直接在.fullCalendar里面配置以下代码即可,header之前的就够。
$('#calendar').fullCalendar({
buttonText: {
today: '今天',
month: '月视图',
week: '周视图',
day: '日视图'
},
allDayText: "全天",
timeFormat: {
'': 'H:mm{-H:mm}'
},
weekMode: "variable",
columnFormat: {
month: 'dddd',
week: 'dddd M-d',
day: 'dddd M-d'
},
titleFormat: {
month: 'yyyy年 MMMM月',
week: "[yyyy年] MMMM月d日 { '—' [yyyy年] MMMM月d日}",
day: 'yyyy年 MMMM月d日 dddd'
},
monthNames: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
dayNames: ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
eventClick: function (date, allDay, jsEvent, view) {
//...
},
events: function (start, end, callback) {
//...
}});
效果图如下:
(ps:如果有fullcalendar/zh-cn.js的资源的话直接引入并配置locale:"zh-cn"即可)
注:以上方法需要引入原生的fullcalendar.min.js后另外加入
2021年6月22日 (以上方法如果报错尝试以下方法)
---------------------------分割线-----------------
本例添加在jsp页面,html页面未尝试
<!-- 这个是为了让日期开始时间小于结束时间-->
<script type="text/javascript">
jQuery(function($) {
/* initialize the external events
-----------------------------------------------------------------*/
$('#external-events div.external-event').each(function() {
// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
// it doesn't need to have a start or end
var eventObject = {
title: $.trim($(this).text()) // use the element's text as the event title
};
// store the Event Object in the DOM element so we can get to it later
$(this).data('eventObject', eventObject);
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
/* initialize the calendar
-----------------------------------------------------------------*/
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var initialLocaleCode = 'zh-cn';
var calendar = $('#calendar').fullCalendar({
buttonText: {
today: '今天',
month: '月视图',
week: '周视图',
day: '日视图',
prev: '<i class="icon-chevron-left">后退</i>',
next: '<i class="icon-chevron-right">前进</i>'
},
allDayText: "全天",
timeFormat: {
'': 'H:mm{-H:mm}'
},
weekMode: "variable",
columnFormat: {
month: 'dddd',
week: 'dddd M-d',
day: 'dddd M-d'
},
titleFormat: {
month: 'yyyy年 MMMM月',
week: "[yyyy年] MMMM月d日 { '—' [yyyy年] MMMM月d日}",
day: 'yyyy年 MMMM月d日 dddd'
},
monthNames: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
dayNames: ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
navLinks: true, // can click day/week names to navigate views
locale:'zh-cn',
events:
[
<c:forEach items="${calendars}" var="e" varStatus="s">
{
title: "${e.title}",
start: new Date(${e.start.year}+1900, ${e.start.month}, ${e.start.date},${e.start.hours}, ${e.start.minutes}),
end: new Date(${e.end.year}+1900, ${e.end.month}, ${e.end.date}, ${e.end.hours}, ${e.end.minutes}),
allDay: false,
className: 'label-${e.classname}'
},
</c:forEach>
],
editable: true,
droppable: true, // this allows things to be dropped onto the calendar !!!
drop: function(date, allDay) { // this function is called when something is dropped
// retrieve the dropped element's stored Event Object
var originalEventObject = $(this).data('eventObject');
var $extraEventClass = $(this).attr('data-class');
// we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = $.extend({}, originalEventObject);
// assign it the date that was reported
copiedEventObject.start = date;
copiedEventObject.allDay = allDay;
if($extraEventClass) copiedEventObject['className'] = [$extraEventClass];
// render the event on the calendar
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
}
,
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
bootbox.prompt("添加新事件:", function(title) {
if (title !== null) {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end
// allDay: allDay
},
true // make the event "stick"
);
}
});
calendar.fullCalendar('unselect');
}
,
eventClick: function(calEvent, jsEvent, view) {
var form = $("<form class='form-inline' id='form1' action='../calendar/del ' method='post'><label>修改事件名称 </label></form>");
form.append("<input class='middle' type=text value='" + calEvent.title+"' /> ");
form.append("<input class='hidden' name='cid' value='12'>");
form.append("<button type='submit' id='su1' class='btn btn-sm btn-success'><i class='icon-ok'></i> 修改</button>");
var div = bootbox.dialog({
message: form,
buttons: {
"delete" : {
"label" : "<i class='icon-trash'></i> 删除事件",
"className" : "btn-sm btn-danger",
"callback": function() {
calendar.fullCalendar('removeEvents' , function(ev){
return (ev._id == calEvent._id);
})
}
} ,
"close" : {
"label" : "<i class='icon-remove'></i> 关闭",
"classname" : "btn-sm"
}
}
});
form.on('submit', function(){
calEvent.title = form.find("input[type=text]").val();
calendar.fullCalendar('updateEvent', calEvent);
$("#form1").submit();
div.modal("hide");
return false;
});
console.log(calEvent.id);
//console.log(jsEvent);
//console.log(view);
// change the border color just for fun
//$(this).css('border-color', 'red');
}
});
});
</script>