fullcalendar,fullcalendar中文

fullCalendar初始化界面重叠

可以通过fullcalendar自带的formatDate函数来解决：

$('#calendar').fullCalendar({

....

//点击日历中日期格子

,dayClick: function(date, allDay, jsEvent, view) {

alert( $.fullCalendar.formatDate(date, "yyyy-MM-dd") );

}

});

fullcalendar中文翻译是什么？

翻译：完整的日历。

例句：

1.This may not always be a full calendar year.

翻译：此时间期并不总是一个完整的日历年度。

2.That's down from 73% in 2010, the first full calendar year after the recession ended.

翻译：而在2010年（美国摆脱衰退后的第一个完整日历年），这一比例为73%。

中文：

中文(Chinese)，狭义指汉语和汉字，即包括书写体系，也包括发音体系，广义包括少数民族

语言文字。中文的使用人数在17亿以上，范围包括中国全境(大陆、港澳、台湾)及新加坡、马

来西亚、日本(日语中由于受中华文化影响也使用部分汉字)、朝鲜、韩国、印度尼西亚、泰国

、越南、柬埔寨、缅甸等海外华人地区。

翻译：

译是在准确、通顺的基础上，把一种语言信息转变成另一种语言信息的行为。翻译是将一种相

对陌生的表达方式，转换成相对熟悉的表达方式的过程。

fullcalendar的简单实用

1.

!DOCTYPE html

html lang="en"

head

? ? meta charset="UTF-8"

? ? titleTitle/title

? ? link href='fullcalendar.css' rel='stylesheet' /

/head

body

? ? div id='calendar'/div

/body

script src='jquery.js'/script

script src='moment.min.js'/script

script src='fullcalendar.js'/script

script src='zh-cn.js'/script

script type="text/javascript"

!--数据传输格式为[{"title":"张康大","start":"2019-12-05 09:20:00","end":"2019-12-07 09:20:00"}]--

? ? $('#ename1').change( function(){

? ? ? ? var eid = $("#ename1 option:selected").val()

? ? ? ? var events = {

? ? ? ? ? ? url: "/appoint/selectTids",

? ? ? ? ? ? type: 'post',

? ? ? ? ? ? data: {

? ? ? ? ? ? ? "eid":eid

? ? ? ? ? ? }

? ? ? ? }

? ? ? ? $('#calendar').fullCalendar( 'removeEventSource', events)

? ? ? ? $('#calendar').fullCalendar( 'addEventSource', events)

? ? ? ? $('#calendar').fullCalendar( 'refetchEvents' )

? ? }).change()

/script

/html

2.

!DOCTYPE html

html lang="en"

head

? ? meta charset="UTF-8"

? ? titleTitle/title

? ? link href='fullcalendar.css' rel='stylesheet' /

? ? style

? ? ? ? #top {

? ? ? ? ? ? background: #eee;

? ? ? ? ? ? border-bottom: 1px solid #ddd;

? ? ? ? ? ? padding: 0 10px;

? ? ? ? ? ? line-height: 40px;

? ? ? ? ? ? font-size: 12px;

? ? ? ? }

? ? ? ? #calendar {

? ? ? ? ? ? margin: 40px auto;

? ? ? ? ? ? padding: 0 10px;

? ? ? ? }

? ? ? ? .done:before {

? ? ? ? ? ? content:"【 已完成 】";

? ? ? ? ? ? background-color:yellow;

? ? ? ? ? ? color:green;

? ? ? ? ? ? text-align:center;

? ? ? ? ? ? font-weight:bold;

? ? ? ? ? ? width:100%;

? ? ? ? }

? ? ? ? .doing:before {

? ? ? ? ? ? content:"【 未完成 】";

? ? ? ? ? ? background-color:yellow;

? ? ? ? ? ? color:red;

? ? ? ? ? ? text-align:center;

? ? ? ? ? ? font-weight:bold;

? ? ? ? }

? ? /style

/head

body

? ? div id='calendar'/div

/body

script src='jquery.js'/script

script src='moment.min.js'/script

script src='fullcalendar.js'/script

script src='zh-cn.js'/script

script type="text/javascript"

? ? $(document).ready(function() {

? ? ? ? var initialLangCode = 'en';

? ? ? ? $('#calendar').fullCalendar({

? ? ? ? ? ? header: {

? ? ? ? ? ? ? ? left: 'prev,next today',

? ? ? ? ? ? ? ? center: 'title',

? ? ? ? ? ? ? ? right: 'month,agendaWeek,agendaDay'

? ? ? ? ? ? },

? ? ? ? ? ? weekends: true,

? ? ? ? ? ? weekMode: 'liquid',

? ? ? ? ? ? defaultView: 'month',

? ? ? ? ? ? allDayText: '全天',

? ? ? ? ? ? businessHours: true,

? ? ? ? ? ? defaultEventMinutes: 120,

? ? ? ? ? ? eventLimit: true,

? ? ? ? ? ? dayClick : function(date,id) {

? ? ? ? ? ? ? ? console.log('dayClick触发的时间为：', date.format());

var da=new Date(date);

? ? var b=da.getHours()-8;?

var date1=new Date(da.setHours(b));

var a=da.getMinutes()+30;

alert(date1);

var date2=new Date(date1.setMinutes(a));

alert(date2);

alert(id);

alert(data-date);

? ? ? ? ? ? },

? ? ? ? ? ? //设置是否可被单击或者拖动选择

? ? ? ? ? ? selectable: true,

? ? ? ? ? ? //点击或者拖动选择时，是否显示时间范围的提示信息，该属性只在agenda视图里可用

? ? ? ? ? ? selectHelper: true,

? ? ? ? ? ? //点击或者拖动选中之后，点击日历外的空白区域是否取消选中状态 true为取消 false为不取消，只有重新选择时才会取消

? ? ? ? ? ? unselectAuto: true,

? ? ? ? ? ? select: function( start, end ){

? ? ? ? ? ? ? ? console.log('select触发的开始时间为：', start.format());

? ? ? ? ? ? ? ? console.log('select触发的结束时间为：', end.format());

? ? ? ? ? ? },

? ? ? ? ? ? eventClick : function( event ){

? ? ? ? ? ? ? ? console.log('eventClick中选中Event的id属性值为：', event.id);

? ? ? ? ? ? ? ? console.log('eventClick中选中Event的title属性值为：', event.title);

? ? ? ? ? ? ? ? console.log('eventClick中选中Event的start属性值为：', event.start.format('YYYY-MM-DD HH:mm'));

? ? ? ? ? ? ? ? console.log('eventClick中选中Event的end属性值为：', event.end==null?'无':event.end.format('YYYY-MM-DD HH:mm'));

? ? ? ? ? ? ? ? console.log('eventClick中选中Event的color属性值为：', event.color);

? ? ? ? ? ? ? ? console.log('eventClick中选中Event的className属性值为：', event.className);

? ? ? ? ? ? },

? ? ? ? ? ? eventMouseover : function( event ) {

? ? ? ? ? ? ? ? console.log('鼠标经过 ...');

? ? ? ? ? ? ? ? console.log('eventMouseover被执行，选中Event的title属性值为：', event.title);

? ? ? ? ? ? },

? ? ? ? ? ? eventMouseout : function( event ) {

? ? ? ? ? ? ? ? console.log('eventMouseout被执行，选中Event的title属性值为：', event.title);

? ? ? ? ? ? ? ? console.log('鼠标离开 ...');

? ? ? ? ? ? },

? ? ? ? ? ? //Event是否可被拖动或者拖拽

? ? ? ? ? ? editable: true,

? ? ? ? ? ? //Event被拖动时的不透明度

? ? ? ? ? ? dragOpacity: 0.5,

? ? ? ? ? ? eventDrop : function( event, dayDelta, revertFunc ) {

? ? ? ? ? ? ? ? //do something here...

? ? ? ? ? ? ? ? console.log('eventDrop --- start ---');

? ? ? ? ? ? ? ? console.log('eventDrop被执行，Event的title属性值为：', event.title);

? ? ? ? ? ? ? ? if(dayDelta._days != 0){

? ? ? ? ? ? ? ? ? ? console.log('eventDrop被执行，Event的start和end时间改变了：', dayDelta._days+'天！');

? ? ? ? ? ? ? ? }else if(dayDelta._milliseconds != 0){

? ? ? ? ? ? ? ? ? ? console.log('eventDrop被执行，Event的start和end时间改变了：', dayDelta._milliseconds/1000+'秒！');

? ? ? ? ? ? ? ? }else{

? ? ? ? ? ? ? ? ? ? console.log('eventDrop被执行，Event的start和end时间没有改变！');

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? console.log('eventDrop --- end ---');

? ? ? ? ? ? },

? ? ? ? ? ? eventResize : function( event, dayDelta, revertFunc ) {

? ? ? ? ? ? ? ? console.log(' --- start --- eventResize');

? ? ? ? ? ? ? ? console.log('eventResize被执行，Event的title属性值为：', event.title);

? ? ? ? ? ? ? ? if(dayDelta._days != 0){

? ? ? ? ? ? ? ? ? ? console.log('eventResize被执行，Event的start和end时间改变了：', dayDelta._days+'天！');

? ? ? ? ? ? ? ? }else if(dayDelta._milliseconds != 0){

? ? ? ? ? ? ? ? ? ? console.log('eventResize被执行，Event的start和end时间改变了：', dayDelta._milliseconds/1000+'秒！');

? ? ? ? ? ? ? ? }else{

? ? ? ? ? ? ? ? ? ? console.log('eventResize被执行，Event的start和end时间没有改变！');

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? console.log('--- end --- eventResize');

? ? ? ? ? ? },

? ? ? ? });

//初始化语言选择的下拉菜单值

? ? ? ? $.each($.fullCalendar.langs, function(langCode) {

? ? ? ? ? ? $('#lang-selector').append(

? ? ? ? ? ? ? ? ? ? $('option/')

? ? ? ? ? ? ? ? ? ? ? ? ? ? .attr('value', langCode)

? ? ? ? ? ? ? ? ? ? ? ? ? ? .prop('selected', langCode == initialLangCode)

? ? ? ? ? ? ? ? ? ? ? ? ? ? .text(langCode)

? ? ? ? ? ? );

? ? ? ? });

? ? ? ? //当选择一种语言时触发

? ? ? ? $('#lang-selector').on('change', function() {

? ? ? ? ? ? if (this.value) {

? ? ? ? ? ? ? ? $('#calendar').fullCalendar('option', 'lang', this.value);

? ? ? ? ? ? }

? ? ? ? });

events: [

? ? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? ? ? id: 1,

? ? ? ? ? ? ? ? ? ? title: '这是一个all-day数据',

? ? ? ? ? ? ? ? ? ? allDay: true,

? ? ? ? ? ? ? ? ? ? start: '2018-12-11'

? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? ? ? id: 2,

? ? ? ? ? ? ? ? ? ? title: '开始时间为12PM',

? ? ? ? ? ? ? ? ? ? start: '2018-12-11 12:00'

? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? ? ? id: 3,

? ? ? ? ? ? ? ? ? ? title: '给一点颜色',

? ? ? ? ? ? ? ? ? ? start: '2018-12-4',

? ? ? ? ? ? ? ? ? ? color: 'red'

? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? ? ? id: 4,

? ? ? ? ? ? ? ? ? ? title: '使用className:done',

? ? ? ? ? ? ? ? ? ? start: '2018-12-10 09:00',

? ? ? ? ? ? ? ? ? ? end: '2018-12-11 18:00',

? ? ? ? ? ? ? ? ? ? color: 'blue',

? ? ? ? ? ? ? ? ? ? className: 'done'

? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? ? ? id: 5,

? ? ? ? ? ? ? ? ? ? title: '使用className:doing',

? ? ? ? ? ? ? ? ? ? start: '2018-12-11 09:00',

? ? ? ? ? ? ? ? ? ? end: '2018-12-12 18:00',

? ? ? ? ? ? ? ? ? ? color: 'green',

? ? ? ? ? ? ? ? ? ? className: 'doing'

? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? ? ? id: 6,

? ? ? ? ? ? ? ? ? ? title: '使用URL和字体颜色',

? ? ? ? ? ? ? ? ? ? start: '2019-12-4',

? ? ? ? ? ? ? ? ? ? color: 'pink',

? ? ? ? ? ? ? ? ? ? url: '',

? ? ? ? ? ? ? ? ? ? className: 'doing',

? ? ? ? ? ? ? ? ? ? textColor: 'black'

? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? ? ? id: 7,

? ? ? ? ? ? ? ? ? ? title: '使用backgroundColor和borderColor',

? ? ? ? ? ? ? ? ? ? start: '2018-12-11 09:00',

? ? ? ? ? ? ? ? ? ? end: '2018-12-12 18:00',

? ? ? ? ? ? ? ? ? ? backgroundColor: 'gray',

? ? ? ? ? ? ? ? ? ? borderColor: 'red',

? ? ? ? ? ? ? ? ? ? className: 'done'

? ? ? ? ? ? ? ? },

? ? ? ? ? ? ]

? ? });

/script

/html