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