fullcalendar buttontext 事件 -回复
Vue之日历控件vue-full-calendar的使用

Vue之⽇历控件vue-full-calendar的使⽤(1).安装依赖npm install vue-full-calendar npm install moment因为这是⽇历插件⽤到了时间⼯具类 === moment (2).⽂件中导⼊依赖在想要⽤此插件的⽂件中导⼊依赖import { FullCalendar } from 'vue-full-calendar'import "fullcalendar/dist/fullcalendar.css";注册到组件中components: { FullCalendar },我的代码:<template><div class="fullCalendarCont"><el-date-pickersize="small"style="width: 144px;"v-model="selectDate"type="date"placeholder="选择时间"@change="changeDate"></el-date-picker><full-calendar:config="config":events="events"ref="calendar"></full-calendar></div></template><script>import { FullCalendar } from 'vue-full-calendar'import "fullcalendar/dist/fullcalendar.css";export default {components: { FullCalendar},data() {return {selectDate:'',//⽇期选择器选中的⽉份events: [{id:1,title:'出差',start: '2020-07-20', // 事件开始时间end: '2020-07-21', // 事件结束时间}, {id:2,title:'春游',start: '2020-07-12 09:00:00',end: '2020-07-18 12:00:00',}, {id:3,title:'春游2',start: '2020-07-12 09:00:00',end: '2020-07-12 12:00:00',}, {id:4,title:'春游3',start: '2020-07-26 13:00:00',end: '2020-07-26 15:00:00',}, {id:5,title:'春游4',start: '2020-07-26 15:00:00',end: '2020-07-26 16:00:00',}],config: {firstDay:'0',//以周⽇为每周的第⼀天buttonText: { today: "今天", month: "⽉", week: "周", day: "⽇" },header: {left:'today', center: 'prev, title, next'},theme:false,//是否允许使⽤jquery的ui主题height:'auto',slotLabelFormat:'H:mm', // axisFormat 'H(:mm)'//slotLabelInterval:1,views: {month: {titleFormat: 'YYYY年MMM'},day: {titleFormat: 'YYYY年MMMDD⽇ dddd'}},monthNames: ["1⽉", "2⽉", "3⽉", "4⽉", "5⽉", "6⽉", "7⽉", "8⽉", "9⽉", "10⽉", "11⽉", "12⽉"],monthNamesShort: ["1⽉", "2⽉", "3⽉", "4⽉", "5⽉", "6⽉", "7⽉", "8⽉", "9⽉", "10⽉", "11⽉", "12⽉"], dayNames: ["星期⽇", "星期⼀", "星期⼆", "星期三", "星期四", "星期五", "星期六"],dayNamesShort: ["星期⽇", "星期⼀", "星期⼆", "星期三", "星期四", "星期五", "星期六"],slotDuration:'00:30:00',minTime:'00:00',maxTime:'24:00',locale: "zh-cn",editable: false, //是否允许修改事件selectable: false,//是否允许⽤户单击或者拖拽⽇历中的天和时间隙eventLimit: false, // 限制⼀天中显⽰的事件数,默认falseallDaySlot:true, //是否显⽰allDaydisplayEventEnd: false,//是否显⽰结束时间allDayText: '全天',navLinks: true, //允许天/周名称是否可点击defaultView: "agendaWeek", //显⽰默认视图eventClick: this.eventClick, //点击事件dayClick: this.dayClick, //点击⽇程表上⾯某⼀天eventRender: this.eventRender}}},methods: {changeDate(){this.$refs.calendar.fireMethod('gotoDate', this.selectDate)},// 点击事件eventClick (event, jsEvent, pos) {alert('eventClick', event, jsEvent, pos)},// 点击当天dayClick (day, jsEvent) {alert('dayClick', day, jsEvent)},eventRender:function (event, element) {element.find('.fc-title').attr('title',event.title)}}}</script>。
fullcalendar buttontext 事件

fullcalendar buttontext 事件`fullCalendar` 是一个流行的日历插件,用于在网页上显示日历和事件。
`buttonText` 是`fullCalendar` 中的一个配置选项,用于自定义日历上的按钮文本。
如果你想在`buttonText` 中添加事件,你可能是在寻找如何响应用户点击这些按钮的事件。
在`fullCalendar` 中,你可以使用`dayClick` 或`eventClick` 等事件来响应用户的点击事件。
以下是一个基本的示例,说明如何使用`dayClick` 事件:```javascript$('#calendar').fullCalendar({// 其他配置...dayClick: function(date, jsEvent, view) {alert('你点击了日期: ' + date.format());}});```在这个例子中,当用户点击日历中的某一天时,将会弹出一个警告框显示点击的日期。
如果你想在`buttonText` 中添加事件,你可能需要自定义这些按钮的HTML 结构,并使用jQuery 或其他JavaScript 库来绑定事件。
例如:```html<button class="fc-prev-button">上一月</button><button class="fc-next-button">下一个月</button>```然后你可以使用以下代码来绑定事件:```javascript$('.fc-prev-button').click(function() {alert('你点击了上一个按钮');});$('.fc-next-button').click(function() {alert('你点击了下个按钮');});```这样,当用户点击这些按钮时,就会弹出一个警告框。
fullCalendar日历插件玩法解析

fullCalendar⽇历插件玩法解析fullCalendar⽇历 1、在⽤之前我先介绍为啥要⽤这个fullcalendar⽇历插件,⾸先我在⽤之前是⽤的Ant Design of Vue框架的⽇历,这个框架的⽇历就⽐较单调没有很灵活的能操作⽇历⾥⾯的⽇历⽇程,⽽fullcalendar⽇历就能很灵活的进⾏⽇历⽅⾯的操作。
2、在刚开始⽤的时候还是有太多坑的,fullCalendar⽇历插件在我现在发现的有(vue-full-calendar 、vue-fullcalendar 、 calendar),凡是看到npm install以上三个的就不要去下载了,虽然vue-fullcalendar是可以使⽤的,但想要使⽤下载fullCalendar⾥⾯的其它包是不可以的。
Fullcalendar安装安装所需要的npm包npm install --save @fullcalendar/vue下⾯包是⽇历的周视图、⽇视图等插件包:npm install --save @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction @fullcalendar/list @fullcalendar/timegrid安装后的fullcalendar源码和其它插件都会在@fullcalendar导⼊HTML<template><div><FullCalendar ref="myCalendar" :options="calendarOptions"/></div></template>导⼊JSimport FullCalendar from '@fullcalendar/vue'import dayGridPlugin from '@fullcalendar/daygrid'import timeGridPlugin from '@fullcalendar/timegrid'import interactionPlugin from '@fullcalendar/interaction'import listPlugin from '@fullcalendar/list'export default {name: 'MaintenanceCalendarview',components: {FullCalendar},data () {return {calendarOptions: {// 引⼊的插件,⽐如fullcalendar/daygrid,fullcalendar/timegrid引⼊后才可显⽰⽉,周,⽇plugins: [ dayGridPlugin, interactionPlugin, timeGridPlugin, listPlugin ],initialView: 'dayGridMonth', // 默认为那个视图(⽉:dayGridMonth,周:timeGridWeek,⽇:timeGridDay)firstDay: 1, // 设置⼀周中显⽰的第⼀天是哪天,周⽇是0,周⼀是1,类推locale: 'zh-cn', // 切换语⾔,当前为中⽂eventColor: '#3BB2E3', // 全部⽇历⽇程背景⾊themeSystem: 'bootstrap', // 主题⾊(本地测试未能⽣效)initialDate: moment().format('YYYY-MM-DD'), // ⾃定义设置背景颜⾊时⼀定要初始化⽇期时间timeGridEventMinHeight: '20', // 设置事件的最⼩⾼度aspectRatio: 1.65, // 设置⽇历单元格宽度与⾼度的⽐例。
fullcalendar使用教程

fullcalendar使⽤教程$('#calendar').fullCalendar({header : {left : 'today prev,next',center : 'title',right : 'month,basicWeek'},buttonText : {month : '⽉视图',week : '周',day : '⽇视图'},defaultDate : date,eventPhase : 5,editable : false,// 可以拖动selectable : true,eventLimit : true,events:function(start, end, callback){//prev上⼀⽉, next下⼀⽉等事件时调⽤.fullCalendar( 'removeEvents' [, idOrFilter ] )}eventOrder :'seq',// 注意:这⾥有两种实现⽅法,下⾯是⼀种,还有⼀种是通过url,如events:'/data.json' // events : [ {// title : 'All Day Event',// start : '2016-05-01'// }, {// title : 'Long Event',// start : '2016-05-07',// end : '2016-05-10'// }, {// id : 999,// title : 'Repeating Event',// start : '2016-05-09'// }, {// id : 999,// title : 'Repeating Event',// start : '2016-05-16'// }, {// title : 'Conference',// start : '2016-05-11',// end : '2016-05-13'// }, {// title : 'Meeting',// start : '2016-05-12',// end : '2016-05-12'// }, {// title : 'Lunch',// start : '2016-05-12'// }, {// title : 'Meeting',// start : '2016-05-12'// }, {// title : 'Happy Hour',// start : '2016-05-12'// }, {// title : 'Dinner',// start : '2016-05-12'// }, {// title : 'Birthday Party',// start : '2016-05-13'// }, {// title : 'Click for Google',// url : '/',// start : '2016-05-28'// } ],dayClick : function(date, allDay, jsEvent, view) {var selDate = date.format();// 获取当前点击⽇期$("#datetimepicker").val(selDate);$("#taskModal").modal();},eventClick : function(calEvent, jsEvent, view) {var today = calEvent.start.format();switch (calEvent.data.type) {case 'video':$(".view-audio").hide();$(".view-picture").hide();$(".view-video").show();myPlayer.play();$("#viewModal").modal();break;case 'audio':$(".view-video").hide()$(".view-picture").hide();$(".view-audio").show();music.play();$("#viewModal").modal();break;case 'picture':$(".view-video").hide()$(".view-audio").hide();$(".view-picture").show();$('.carousel-inner').empty();var html = "";var count = 0;for (var i = 0; i < calEvent.source.events.length; i++) {var type = calEvent.source.events[i].data.type;var currentDay = calEvent.source.events[i].start.format();if (type == 'picture' && today == currentDay) {if (count == 0) {html += '<div class="item active"><img src="'+ calEvent.source.events[i].data.img_url+ '"></div>';} else {html += '<div class="item"><img src="'+ calEvent.source.events[i].data.img_url+ '"></div>';}count++;}}if (count == 1) {$('.carousel-control').hide()} else {$('.carousel-control').show()}$('.carousel-inner').append(html)$("#viewModal").modal();$('#myCarousel').carousel({pause : true,interval : false});break;case 'course':$(this).attr('target', '_blank')break;case 'other':break;}}});$(".body-left .file-list").each(function(index) {var fileName = $(this).find('.fileName').text();var dataType = $(this).find('.fileName').attr('data-type');if (!dataType)return;var eventData = {title : fileName,start : datetimepicker,backgroundColor : 'transparent',textColor : '#03A9F4',borderColor : '#fff',seq: Math.round(Math.random() * 9 + 1)}switch (dataType) {case 'video':eventData.className = 'icon-video-sm';eventData.data = {type : 'video'};break;case 'audio':eventData.className = 'icon-audio-sm';// 这⾥可以设置此action的样式, eventData.data = {type : 'audio'};break;case 'picture':eventData.className = 'icon-picture-sm';// 这⾥可以设置此action的样式, eventData.data = {type : 'picture',img_url : '/resources/img/myCalendar/'+ Math.round(Math.random() * 5 + 1) + '.png'};break;case 'course':eventData.className = 'icon-course-sm';// 这⾥可以设置此action的样式, eventData.data = {type : 'course'};eventData.url = '';break;case 'other':eventData.className = 'icon-other-sm';// 这⾥可以设置此action的样式, eventData.data = {type : 'other'};break;}$('#calendar').fullCalendar('renderEvent', eventData, true);})。
FullCalendar日历插件说明文档

FullCalendar日历插件说明文档普通显示设置属性描述默认值header 设置日历头部信息。
如果设置为false,则不显示头部信息。
包括left,center,right左中右三个位置,每个位置都可以对应以下不同的配置:title: 显示当前月份/周/日信息prev: 用于切换到上一月/周/日视图的按钮next: 用于切换到下一月/周/日视图的按钮prevYear:用于切换到上一年视图的按钮nextYear:用于切换到下一年视图的按钮{left:'title',center: '',right:'todayprev,next'}theme 是否允许使用jquery的ui主题,如果设置为true,则需要加载jquery ui相关css和js文件。
查看演示falsebuttonIcons 设置header中使用的prev, next等变量对应按钮的样式,只有当theme为true时才有效,如果你调用了jQuery ui样式但又不想使用它的图标样式,可以将此属性设置为false{ prev:'circle-triangle-w', next:'circle-triangle-e' }firstDay 设置一周中显示的第一天是哪天,周日是0,周一是1,类推。
isRTL 设置为ture时则日历从右往左显示,貌似是针对阿拉伯人设计的。
falseweekends 是否显示周末,设为false则不显示周六和周日。
truehiddenDays 隐藏一周中的某一天或某几天,数组形式,如隐藏周二和周五:[2,5],默认不隐藏,除非weekends设置为false。
[]weekMode 在月视图里显示周的模式,因为每月周数可能不同,所以月视图高度不一定。
fixed:固定显示6周高,日历高度保持不变liquid:不固定周数,高度随周数变化variable:不固定周数,但高度固定'fixed'weekNumbers 是否在日历中显示周次(一年中的第几周),如果设置为true,则会在月视图的false左侧、周视图和日视图的左上角显示周数。
fullCalendar2.9排课

FullCalendar2.9排课1、页面示例(效果图)2、js文件内容//create by cxy 2016-08$(function () {//初始化、var jsonStr={name:"",class:"",crew_startDate:"2016-08-03",crew_end_Date:'',crew_classTime_Arr:["08:40~09:20","09:30~10:10","10:20~11:00","11:20~12:00","13:40~14:20"," 14:40~15:20","15:40~16:20","16:40~17:20"]};//生成日期控件initFullCalendar(jsonStr);//获取日期function getdate() {var now = new Date();y = now.getFullYear();m = now.getMonth() + 1;d = now.getDay();m = m < 10 ? "0" + m : m;d = d < 10 ? "0" + d : d;return y + "-" + m + "-" + d;}//初始化日历方法function initFullCalendar(jsonStr) {//var crew_classTime_arr=new Array();//var crew_classTime_Arr=newArray("08:40~09:20","09:30~10:10","10:20~11:00","11:20~12:00","13:40~14:20","14:40~15:20","1 5:40~16:20","16:40~17:20");var crew_classTime_Arr;var crew_startDate= getdate();//获取课节$.each(jsonStr, function(key, value) {crew_classTime_Arr=jsonStr["crew_classTime_Arr"];crew_startDate=jsonStr["crew_startDate"];});//先清空已有控件内容$('#calendar').fullCalendar('destroy');//加载日历控件$('#calendar').fullCalendar({// defaultDate: '2016-07-12',defaultDate: crew_startDate,defaultView:"agendaWeek", //默认显示周// defaultView: 'timelineDay',height: 600,editable: true,customButtons: {//自定义按钮可以添加多个,自己命名在header 部分调用即可比如这里的myCustomButtonmyCustomButton: {text: '自定义按钮',click: function() {alert('点击自定义按钮!');}}},header: {left: 'prev,next today, myCustomButton',center: 'title',right: 'month,agendaWeek,agendaDay'//right: 'month,agendaWeek,agendaDay,timelineFourDays'},//views: {// timelineFourDays: {// type: 'timeline',// duration: { days: 4 }// }//},allDaySlot:false,//是否显示全天// titleFormat:'MMM D YYYY',//header日期显示格式axisFormat: 'H:mm时',//修改日期前面显示内容默认为早上6点00分,改完后显示6:00时('H:mm时')slotDuration:'01:00:00', //时间间隔// slotLabelFormat:'HH:mm',//左侧时间格式slotLabelFormat:'第H课',// slotLabelInterval:'00:20:00',//左侧标注时间间隔crew_classTime_Arr:crew_classTime_Arr,scrollTime:'01:00:00', //滚动起始时间displayEventTime:false, //默认不显示事件上的时间// timeFormat: 'HH:mm',//事件上日期格式(默认事件不显示日期)minTime:'01:00:00', //最小开始时间maxTime:'09:00:00',//最大开始时间defaultTimedEventDuration:'01:00:00',//默认拖进事件的时间间隔大小// businessHours: {// 设置休息时间,不能排课的时间// dow: [ 1, 2, 3, 4, 5 ],//每周日期// start: '08:00', //开始// end: '18:00' // 结束时间// },// contentHeight:500,// monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],// monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],// dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],// dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],// today: ["今天"],// firstDay: 1,buttonText: {// today: '本月',month: '月',week: '周',day: '日'// prev: '上一月',// next: '下一月'},//点击一天时触发dayClick: function (date, allDay, jsEvent, view) {//当前日期// alert(date);// alert(date.format('YYYY-MM-DD'));// alert(date.format('DD'));// if (typeof($(this).attr("isHoliday")) == "undefined" || $(this).attr("isHoliday") == "false") {// $(this).css({'background-color': '#eaf4fa'});// $(this).attr("isHoliday", "true");// showOperationDialog("","addModal");// } else {// $(this).css({'background-color': '#f8f8f8'});// $(this).attr("isHoliday", "false");// $(this).find("i").remove();// }//添加事件// var eventData;// if (title) {// eventData = {// title: title,// start: start,// end: end// };// }// $('#calendar').fullCalendar('addEventSource',eventData);},// 当点击某一个事件时触发此操作eventClick: function (calEvent, jsEvent, view) {// alert(calEvent.id);// $(this).css('border-color', 'red');showOperationDialog("", "addModal");//删除事件// $('#calendar').fullCalendar('removeEvents',"test");},//当鼠标悬停在一个事件上触发此操作eventMouseover: function(calEvent, jsEvent, view) {//var fstart = $.fullCalendar.formatDate(calEvent.start, "yyyy/MM/dd HH:mm");//var fend = $.fullCalendar.formatDate(calEvent.end, "yyyy/MM/dd HH:mm"); //$(this).attr('title', fstart + " - " + fend + " " + calEvent.fullname); // 鼠标悬浮到title的时候可以设置展现哪些信息$(this).attr('data-toggle', "tooltip");$(this).attr('data-placement', "right");var newTitle=calEvent.title.replace(/fc-schedule-td-p/g,"fc-schedule-td-p-title").replace("font-blue","font-white");//$(this).attr('title', "<h5>"+newTitle+"</h5>");$(this).css('font-weight', 'normal');//用jqueyUI 的tooltip ,图层被遮挡,改为 layer tips//$("[data-toggle='tooltip']").tooltip({html : true , track: true,});//layer.tips(newTitle,this, {// tips: [2, '#3192cb']//});layer.tips(newTitle,this, {tips: [2, '#3192cb']});//$("[data-toggle='tooltip']").tooltip("show");// $(this).tooltip({// effect: 'toggle',// cancelDefault: true// });},//当鼠标从一个事件上移开触发此操作eventMouseout: function (event, jsEvent, view) {},droppable: true, //允许拖拽放置//drop: function() {// if ($('#drop-remove').is(':checked')) {// $(this).remove();// }//},//drop: function(date, allDay) {drop: function( date, jsEvent, ui, resourceId ) {if ($('#drop-remove').is(':checked')) {$(this).remove();}},eventReceive:function(event){//根据event.title内容,修改拖拽后的样式//alert(event.title);event.className.push("bg-crew-baoan");event.title= '<p class="fc-schedule-td-p">'+event.title+'</p>'+'<p class="fc-schedule-td-p">测试拖拽</p>' +'<p class="fc-schedule-td-p"><span class="font-blue">测试</span>,测试</p>',//event.title= '<p class="fc-schedule-td-p">'+event.title+'</p>' +//'<p class="fc-schedule-td-p">培训楼311化妆室</p>' +//'<p class="fc-schedule-td-p"><span class="font-blue">赵之静</span>,江美玲</p>',$('#calendar').fullCalendar('renderEvent', event, true);//重新加载此事件},//设置title为htmleventRender: function (event, element) {//titile值改为html ,直接修改后,缩放不起作用,fc-content中少了子div(.fc-bg .fc-title fc-resizer )//element.html(event.title);element.find(".fc-title").html(event.title);//cxy修改后的,不确定会不会有其他问题},//浏览器大小改变是触发eventResize: function(event,dayDelta,minuteDelta,revertFunc) {},//拖拽之后触发(仅限控件内部事件)eventDrop: function(event,dayDelta,minuteDelta,allDay,revertFunc) {//alert(event.id);},//事件被拖动之后触发eventDragStop: function(event,jsEvent,ui,view) {//alert(event.id);alert(123);},//事件被拖动之前触发eventDragStart: function(event,jsEvent,ui,view) {//alert(event.id);// alert(234);},//事件数据events: [{id:'test1',//resourceId: 'b',title: '<p class="fc-schedule-td-p">运行规范-乘务员工作指导和要求(1/4)</p>' +'<p class="fc-schedule-td-p">R:培训楼311化妆室</p>',start: '2016-08-02 02:00',end: '2016-08-02 03:00',color: '#efffe3',textColor:'#444'},{id:'test2',//resourceId: 'b',title: '<p class="fc-schedule-td-p">航空卫生与机上急救-理论(1/4)</p>' +'<p class="fc-schedule-td-p">培训楼311化妆室</p>' +'<p class="fc-schedule-td-p"><span class="font-blue">赵之静</span>,江美玲</p>',start: '2016-08-03 01:00',end: '2016-08-03 02:00',overlap: false,//rendering: 'background',color: '#eedefb',textColor:'#444'},{id:'test3',//resourceId: 'b',title: '<p class="fc-schedule-td-p">航空卫生与机上急救-理论(2/4)</p>' +'<p class="fc-schedule-td-p">培训楼311化妆室</p>' +'<p class="fc-schedule-td-p"><span class="font-blue">赵之静</span>,江美玲</p>',start: '2016-08-03 02:00',end: '2016-08-03 03:00',color: '#fcf7e5',textColor:'#444'},{id:'test4',//resourceId: 'b',title: '<p class="fc-schedule-td-p">职业形象-化妆</p>' +'<p class="fc-schedule-td-p">培训楼311化妆室</p>' +'<p class="fc-schedule-td-p"><span class="font-blue">赵之静</span>,江美玲</p>',start: '2016-08-04 01:00',end: '2016-08-04 02:00',color: '#edf7fa',textColor:'#444'},//颜色背景设置// {// id: 'availableForMeeting',// start: '2016-08-02 08:00',// end: '2016-08-02 08:45',// rendering: 'background'// }],//动态取数据例子// events: function (start, end, timezone, callback) {// $.ajax({// type: "GET",// url: '/routine/myschedules',// dataType: 'json',// data: {start: "" + start, end: "" + end, filter:$("#hid").val()},// success: function (doc) { var events = []; for (var i = 0; i < doc.meeting.length; i++) { var m = doc.meeting[i];// events.push({// key: "meeting",// id: m.id,// typeId: m.meetingType.typeId,// title: m.title,// content: "时间:" +ameutils.convertTime(m.meetingDate, "yyyy-MM-dd hh:mm:ss") + " 类型:" +m.meetingType.typeName,// start: ameutils.convertTime(m.meetingDate, "yyyy-MM-dd"),// time: ameutils.convertTime(m.meetingDate, "yyyy-MM-dd hh:mm:ss"),// backgroundColor: '#E0FFFF',// textColor: '#000000',// borderColor: '#E0FFFF',// });// } for (var i = 0; i < doc.outgoing.length; i++) { var o = doc.outgoing[i];// events.push({// key: "outgoing",// id: o.id,// typeId: o.outgoingType.type,// title: o.title,// content: "时间:" + ameutils.convertTime(o.startTime, "yyyy-MM-dd") + " 类型:" + o.outgoingType.typeName,// start: ameutils.convertTime(o.startTime, "yyyy-MM-dd"),// time: ameutils.convertTime(o.startTime, "yyyy-MM-dd"), // backgroundColor: '#E0FFFF',// textColor: '#000000',// borderColor: '#E0FFFF',// constraint: 'availableForMeeting' }); if(o.outgoingType.type == 10)// outgoingnum2 = outgoingnum2 + 1; else outgoingnum1 = outgoingnum1 + 1;// } var neihtml = ""; for (var i = 0; i < doc.bulletins.length; i++) { var b = doc.bulletins[i];// neihtml += '<dl>';// neihtml += '<dt>';// neihtml += '<h4>' + b.title + '</h4>';// neihtml += '<span class="f12 font-grey-silver">2015-05-18 07:13</span> </dt>';// neihtml += '<dd>';// neihtml += '<p>' + b.content + '</p>';// neihtml += '</dd>';// neihtml += '</dl>';// } var waihtml = ""; for (var i = 0; i <doc.announcements.length; i++) { var a = doc.announcements[i];// waihtml += '<dl>';// waihtml += '<dt>';// waihtml += '<h4>' + a.title + '</h4>';// waihtml += '<span class="f12 font-grey-silver">2015-05-18 07:13</span> </dt>';// waihtml += '<dd>';// waihtml += '<p>' + a.type + '</p>';// waihtml += '</dd>';//选择,可选择区域selectable: true,selectHelper: true,select: function(start, end) {var title = prompt('Event Title:');var eventData;if (title) {eventData = {title: title,start: start,end: end};$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true}$('#calendar').fullCalendar('unselect');}});// //重新设置日历的某些属性// $('#calendar').fullCalendar('option', {//// lang: 'fr',//// isRTL: true,// slotLabelFormat:'第H课',// });});$(function(){$('#external-events .fc-event').each(function() {$(this).data('event', {title: $.trim($(this).text()),stick: true});$(this).draggable({zIndex: 999,revert: true,revertDuration: 0});});});2、css代码.fc-top {margin-top: 5px;width: 100%;}.fc-top-title{line-height: 18px;margin:2px 0;font-size: 14px;}.fc-top-detail{line-height: 18px;margin:5px;padding: 8px;background: #f8f8f8;border-left: 7px solid #3192cb;/*border-radius: 3px;*/}.external-events {padding: 0 8px;border: 1px solid #ccc;background: #eee;text-align: left;}.external-events h4 {font-size: 16px;margin-top: 0;padding-top: 1em;}.external-events .fc-event {margin: 5px 0;cursor: pointer;}/*.external-events p {*//*margin: 1.5em 0;*//*font-size: 11px;*//*color: #666;*//*}*//*.external-events p input {*//*margin: 0;*//*vertical-align: middle;*//*}*/.external-events-box{}.external-events-box>li>h5{background: #f8f8f8;border: 1px solid #d5d5d5;/*border-radius:5px ;*/padding: 6px;cursor: pointer;}.external-events-box .hbg{background:#3192cb ;color: #fff;}.external-events-box>li>ul{display: none;}/*.external-events-box>li:first-child h5{*/ /*background:#3192cb ;*//*color: #fff;*//*}*//*.external-events-box>li:first-child ul{*/ /*display: block;*//*}*/.fc-view .tooltip.right .tooltip-arrow { border-right-color: #3192cb;}.fc-view .tooltip-inner {background-color: #3192cb;}.fc-view .tooltip-inner h5 {font-size: 12px;color: #fff;white-space: nowrap;padding: 10px 10px 0 10px;}.fc-view .tooltip.in {filter: alpha(opacity=100);opacity: 1;}.fc-schedule-td-p{margin: 3px 0;padding: 0;display:block;/*内联对象需加*/width:120px;word-break:keep-all;/* 不换行 */white-space:nowrap;/* 不换行 */overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。
vue使用@fullcalendar进行行程展示

vue使⽤@fullcalendar进⾏⾏程展⽰1、安装@fullcalendar插件npm install --save @fullcalendar/vue @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/interaction2、使⽤<template><FullCalendar:options="calendarOptions"timezone="local"locale="zh-cn"firstDay="1"style="padding-top:10px"/></template><script>import FullCalendar from '@fullcalendar/vue'// import dayGridPlugin from '@fullcalendar/daygrid'// import interactionPlugin from '@fullcalendar/interaction'import timegridPlugin from '@fullcalendar/timegrid'export default {components: {FullCalendar // make the <FullCalendar> tag available},data() {return {calendarOptions: {plugins: [timegridPlugin],//扩展initialView: 'timeGridWeek',//视图类型allDaySlot: false,//确定“全天”位置是否显⽰在⽇历的顶部默认为trueslotDuration: '00:30:00',//显⽰时隙的频率//头部标题格式化titleFormat: {month: '2-digit',day: 'numeric'},//表头格式化dayHeaderFormat: {// weekday: 'long',month: '2-digit',day: '2-digit',omitCommas: true},//左侧时间轴格式化slotLabelFormat: {hour: '2-digit',minute: '2-digit',hour12: false //设置时间为24⼩时},//事件时间格式化eventTimeFormat: {hour: '2-digit',minute: '2-digit',second: '2-digit',meridiem: false,hour12: false //设置时间为24⼩时},//头部按钮布局headerToolbar: {left: '',center: 'timeGridDay,timeGridWeek',right: 'prev,next'},//头部按钮内容重写buttonText: {//prev: '昨天',//next: '明天',prevYear: '去年',nextYear: '明年',today: '今天',month: '⽉',week: '周',day: '⽇'},//事件集合events: [//title:标题 start:开始时间 end:结束时间{title: '部门会议1', start: new Date(), end: new Date('2021/3/10 15:30:20')},{title: '部门会议2', start: new Date('2021/3/8 12:12:20'), end: new Date('2021/3/8 15:18:20')},{title: '部门会议3', start: new Date('2021/3/7 10:12:20'), end: new Date('2021/3/7 13:18:20')}],//表头内容注⼊dayHeaderContent: function (arg) {//周索引let weekDay = arg.dowlet weekName;switch (weekDay) {case 0:weekName = "周⽇"break;case 1:weekName = "周⼀"break;case 2:weekName = "周⼆"break;case 3:weekName = "周三"break;case 4:weekName = "周四"break;case 5:weekName = "周五"break;case 6:weekName = "周六"break;}weekName += " " + arg.text.replace('/', '-')return weekName}}}},mounted() {}}</script><style>.fc .fc-timegrid-body {min-height: 1055px;}.fc .fc-timegrid-slots {border-bottom: 1px solid #ddd;}.fc-direction-ltr .fc-button-group > .fc-button:not(:last-child) {background-color: #2d8cf0;border: none;border-radius: 4px;margin-right: 10px;}.fc-direction-ltr .fc-button-group > .fc-button:not(:first-child) {background-color: #2d8cf0;border: none;border-radius: 4px;}.fc .fc-button-group > .fc-button:focus, .fc .fc-button-group > .fc-button:active, .fc .fc-button-group > .fc-button.fc-button-active{ z-index: 0;}</style>4、npm run serve或者npm run dev 将项⽬跑起来浏览如下。
在Vue项目中用fullcalendar制作日程表的示例代码

在Vue项⽬中⽤fullcalendar制作⽇程表的⽰例代码前⾔最近⽼牌⽇历插件fullcalendar更新了v4版本,⽽且添加了Vue⽀持,所以⽤最新的fullcalendar v4制作⼀个完整⽇历体验⼀下,效果图:安装FullCalendar的功能被分解为“插件”。
如果您需要它提供的功能,您只需要包含⼀个插件。
也就是说,FullCalendar v4所有插件都得单独安装引⽤。
npm install --save @fullcalendar/vue @fullcalendar/core @fullcalendar/daygrid引⽤并初始化引⽤、注册FullCalendar组件,得到⼀个⽉视图的⽇历。
<script>import FullCalendar from '@fullcalendar/vue'import dayGridPlugin from '@fullcalendar/daygrid'export default {components: {FullCalendar},data() {return {calendarPlugins: [ dayGridPlugin ]}}}</script><template><FullCalendar defaultView="dayGridMonth" :plugins="calendarPlugins" /></template><style lang='less'>//⽤什么插件必须引⼊相应的样式表,否则不能正常显⽰@import '~@fullcalendar/core/main.css';@import '~@fullcalendar/daygrid/main.css';</style>功能定制为了完成复杂功能,需要引⽤更多插件,插件列表:语⾔设置简体中⽂<FullCalendar locale="zh-cn" />如果表头加了button的话,button⽂字要单独做处理,给每个button的英⽂名称加⼀个中⽂的映射,例: <FullCalendar:header="{left: 'prev,next today',center: 'title',right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'}":buttonText="buttonText"/>data () {return {buttonText: {today: '今天',month: '⽉',week: '周',day: '天'}}}点击⽇历添加事件npm install --save @fullcalendar/interaction<FullCalendar @dateClick="handleDateClick" />handleDateClick (arg) {if (confirm('Would you like to add an event to ' + arg.dateStr + ' ?')) {this.calendarEvents.push({ // add new event datatitle: 'New Event',start: arg.date,allDay: arg.allDay})}}点击事件查看详情<FullCalendar @eventClick="handleEventClick" />handleEventClick (info) {alert('Event: ' + info.event.title)}官⽅⽂档:以上就是本⽂的全部内容,希望对⼤家的学习有所帮助,也希望⼤家多多⽀持。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
fullcalendar buttontext 事件-回复FullCalendar buttontext 事件详解:自定义按钮文本
引言:
FullCalendar 是一个功能强大且灵活的日历插件,广泛应用于各种应用程序和网站中。
它为开发者提供了许多定制化选项,以满足不同用户的需求。
本文将重点介绍FullCalendar buttontext 事件,该事件允许开发者自定义日历控件中的按钮文本。
我们将逐步解释buttontext 事件的使用,并提供相关示例和最佳实践。
第一步:了解buttontext 事件的作用和功能
buttontext 事件是FullCalendar 插件中非常有用的一个事件,它允许开发者根据自己的需求自定义日历控件中的按钮文本。
通过使用buttontext 事件,开发者可以将默认的按钮文本改为更符合应用程序要求的文本,这样可以提高用户体验和交互性。
在FullCalendar 中,有许多按钮,如"today"(今天)、"prev"(上一个)、"next"(下一个)等。
当用户点击这些按钮时,会触发一些特定的动作和事件。
通过使用buttontext 事件,开发者可以自定义这些按钮的文本,使其更加适合应用程序的需求。
第二步:了解buttontext 事件的触发时机和参数
buttontext 事件在初始化FullCalendar 实例时触发,并传递一个参数对象。
在这个参数对象中,有一个属性`let buttonInfo`,它包含了当前按钮的信息,如按钮的名称、CSS 类名、操作等。
开发者可以通过修改这些信息来自定义按钮文本。
以下是参数对象的示例:
javascript
{
buttonInfo: {
buttonName: 'prev',
buttonText: 'Previous Month',
buttonClass: 'fc-prevButton'
}
}
在这个示例中,`buttonName` 表示当前按钮的名称,`buttonText` 表示当前按钮的默认文本,`buttonClass` 表示当前按钮的CSS 类名。
开发者可以根据需要修改这些属性的值来自定义按钮的文本和样式。
第三步:使用buttontext 事件自定义按钮文本
要使用buttontext 事件自定义按钮文本,开发者需要在FullCalendar
初始化时传递一个回调函数给`buttontext` 选项。
这个回调函数将在每个按钮的初始化过程中被触发,开发者可以在该回调函数中修改按钮文本。
以下是一个示例:
javascript
('#calendar').fullCalendar({
buttontext: function (buttonInfo) {
if (buttonInfo.buttonName === 'prev') {
buttonInfo.buttonText = 'Previous Month';
} else if (buttonInfo.buttonName === 'next') {
buttonInfo.buttonText = 'Next Month';
}
}
});
在这个示例中,我们使用了一个匿名函数作为`buttontext` 选项的回调函数。
在该回调函数中,我们检查了`buttonName` 属性的值,并相应地修改了`buttonText` 的值。
如果按钮的名称是"prev",则将按钮的文本修改为"Previous Month";如果按钮的名称是"next",则将按钮的文本修改为"Next Month"。
通过这种方式,开发者可以根据自己的需求来自定义按钮文本。
可以根据按钮所代表的操作或功能来修改按钮的文本,以使其更加符合应用程序的界面风格和交互逻辑。
第四步:最佳实践和注意事项
在使用buttontext 事件自定义按钮文本时,开发者可以考虑以下最佳实践和注意事项:
1. 理解按钮的含义:在自定义按钮文本之前,开发者应该明确了解每个按钮的功能和用途。
如果按钮的名称无法清楚地表示其功能,可以查看FullCalendar 文档或示例来获取更多信息。
2. 与设计风格保持一致:在自定义按钮文本时,应与应用程序的整体设计风格保持一致。
按钮文本应该简洁、清晰,并且符合应用程序的交互逻辑。
3. 多语言支持:如果应用程序需要支持多种语言,开发者可以根据用户的语言设置来动态地修改按钮文本。
可以使用国际化(i18n)的技术或其他相关工具来实现这一功能。
4. 注意按钮顺序和布局:在自定义按钮文本时,开发者应注意按钮的布局和排列顺序。
按钮的文本长度不宜过长,以免影响整体布局和用户体验。
5. 测试和优化:在自定义按钮文本后,开发者应该进行充分的测试,确保按钮文本的修改不会对其他功能和操作产生负面影响。
如果有需要,可以根据用户的反馈进行调整和优化。
结论:
FullCalendar 的buttontext 事件为开发者提供了定制化日历控件中按钮文本的强大功能。
通过正确地使用buttontext 事件,开发者可以根据自身需求来自定义按钮文本,提高用户体验和交互性。
在实际应用中,开发者应根据最佳实践和注意事项来使用buttontext 事件,确保按钮文本的修改与应用程序的整体设计风格一致。