fullcalendar 4.2 使用 实例 记录具体实现JS(自定义显示自己需要的视图)

这段代码使用FullCalendar创建了一个中文日历。设置了日历的插件、头部按钮、默认视图等,还添加了日期点击、日程点击、鼠标悬停等事件处理。通过AJAX请求获取日程数据,并将其渲染到日历上,同时支持显示HTML内容。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

$(document).ready(function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
      plugins: [ 'interaction', 'dayGrid'],
      header: {
        left: 'today,prev,next',
        center: 'title',
        right: 'dayGridMonth,dayGridWeek'
      },
      locale: 'zh-cn',
      defaultView:'dayGridWeek',//默认视图
      buttonText: {
          today: '今天',
          dayGridMonth: '月',
          dayGridWeek: '周',
      },
      defaultDate: new Date(),
      nowIndicator:true,//显示当前时间的标记
      //设置为true时,如果数据过多超过日历格子显示的高度时,多出去的数据不会将格子挤开,而是显示为 +...more ,点击后才会完整显示所有的数据
      eventLimit: true,
      dateClick: function(info) {
          
      },
      eventClick: function(event, jsEvent, view) {//点击日程事件,触发此操作 event是日程(事件)对象,jsEvent是个javascript事件,view是当前视图对象。
          alert("点击日程事件");
      },
      eventMouseEnter: function(mouseEnterInfo){//鼠标悬停在日程上的事件
         $(mouseEnterInfo.el).popover({
                content: 'Popoverddddddd',
                trigger: 'hover',
                theme: 'primary lg'
             })
      },
      events:function(fetchInfo, successCallback, failureCallback){
          var start = fetchInfo.start;
          var end = fetchInfo.end;
            var startDate= new Date(start);
            var endDate = new Date(end);
          var startTime = startDate.getFullYear()+'-'+checkTime(startDate.getMonth()+1)+'-'+checkTime(startDate.getDate());
          var endTime = endDate.getFullYear()+'-'+checkTime(endDate.getMonth()+1)+'-'+checkTime(endDate.getDate());
          var eventsValue = [];
          $.ajax({  
               url: "",  
               async:false,
               type:"post",
               dataType:'json',  
               data:{"startDate":startTime,"endDate":endTime},  
               success: function(datas) { 
                    if(datas.code==0){
                        $(datas.data).each(function (i , e){

                           var htmls=[];
                            htmls.push("");
                            htmls.push("<div class='yy-box yy-box-undone'>");
                            htmls.push("<div>");
                            htmls.push("  <span>"+datas.data[i].timeRange+"</span>");
                            htmls.push("</div>");
                            htmls.push("<div>");
                            htmls.push("  <span>"+teacheName+"</span>");
                            htmls.push("</div>");
                            htmls.push("<div>");
                            htmls.push("  <span>");
                            htmls.push("    <a href='javascript:;'>查看</a>");
                            htmls.push("    <span class='group-line-xs'></span>");
                            htmls.push("    <a href='javascript:;'>删除</a>");
                            htmls.push("    <span class='group-line-xs'></span>");
                            htmls.push("    <a href='javascript:;'>编辑</a>");
                            htmls.push("    <span class='group-line-xs'></span>");
                            htmls.push("    <a href='javascript:;'>查看总结</a>");
                            htmls.push("    <span class='group-line-xs'></span>");
                            htmls.push("   <a href='javascript:;'>编辑总结</a>");
                            htmls.push("  </span>");
                            htmls.push("</div>");
                            htmls.push("</div>");
                            
                            var html = htmls.join("\n");
                            
                            eventsValue.push({
                                   id:datas.data[i].scheduleDefineId,
                                   title:html,
                                   start:datas.data[i].startDate,
                                   end:datas.data[i].endDate,
                                   backgroundColor:datas.data[i].color,
                                   textColor:'#080808'
                            });
                        });
                    }
                }
            });
            successCallback(eventsValue);
       },
      eventRender: function (info) {
          info.el.innerHTML=info.event.title;//主要靠这个实现 显示html内容
       },
    });

    calendar.render();
  });
  
  
function checkTime(i){
    if(i<10){
        i = '0'+i
    }
    return i
}

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值