【fullcalendar插件】FullCalendar日历插件应用之数据展现(一)-fullcalendar-日历插件-数据展现

欢迎您访问我爱IT技术网，今天小编为你分享的javascript教程：【FullCalendar日历插件应用之数据展现(一)】，下面是详细的讲解！

FullCalendar日历插件应用之数据展现(一)

  通过ID来初始化放到哪个标签里
 jQuery('#calendar').fullCalendar({
  header: {
   left: 'month,agendaWeek,agendaDay',
   center: 'title',
   right: 'today, prev, next'
  },  monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
  monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
  dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
  dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
  today: ["今天"],
  firstDay: 1,
  buttonText: {
   prev: '«',
   next: '»',
   prevYear: ' << ',
   nextYear: ' >> ',
   today: '今天',
   month: '月',
   week: '周',
   day: '日'
  },
  viewDisplay: function (view) {
   //动态把数据查出，按照月份动态查询
   var viewStart=$.fullCalendar.formatDate(view.start, "yyyy-MM-dd HH:mm:ss");
   var viewEnd=$.fullCalendar.formatDate(view.end, "yyyy-MM-dd HH:mm:ss");
   $("#calendar").fullCalendar('removeEvents');   通过post 请求一般处理程序来返回需要展现的信息(start与end为需要传递的参数，在本文中没有用到可以忽略)
   $.post("../DateHandle/ViewData.ashx", { start: viewStart, end: viewEnd }, function (data) {
    var resultCollection=jQuery.parseJSON(data);
    $.each(resultCollection, function (index, term) {
     $("#calendar").fullCalendar('renderEvent', term, true);
    });
   }); //把从后台取出的数据进行封装以后在页面上以fullCalendar的方式进行显示
  },
  dayClick: function (date, allDay, jsEvent, view) {
  },
  loading: function (bool) {
   if (bool) $('#loading').show();
   else $('#loading').hide();
  },
  //#region 数据绑定上去后添加相应信息在页面上(一开始加载数据时运行)
  eventAfterRender: function (event, element, view) {
   var fstart=$.fullCalendar.formatDate(event.start, "HH:mm");
   var fend=$.fullCalendar.formatDate(event.end, "HH:mm");
   var confbg='<span class="fc-event-bg"></span>';
   if (view.name=="month") {//按月份    
    var evtcontent='<div class="fc-event-vert"><a>';
    evtcontent=evtcontent + confbg;
    //evtcontent=evtcontent + '<span class="fc-event-titlebg">' + fstart + " - " + fend + event.fullname + '</span>'; 
    evtcontent=evtcontent + '<span class="fc-event-titlebg">' + event.fullname + '</span>';
    element.html(evtcontent);
   } else if (view.name=="agendaWeek") {//按周
    var evtcontent='<a>';
    evtcontent=evtcontent + confbg;
    evtcontent=evtcontent + '<span class="fc-event-time">' + fstart + "-" + fend + '</span>';
    evtcontent=evtcontent + '<span>' + event.fullname + '</span>';
    element.html(evtcontent);
   } else if (view.name=="agendaDay") {//按日
    var evtcontent='<a>';
    evtcontent=evtcontent + confbg;
    evtcontent=evtcontent + '<span class="fc-event-time">' + fstart + " - " + fend + '</span>';
    element.html(evtcontent);
   }
  },
  //#endregion
  //#region 鼠标放上去显示信息
  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('title', calEvent.fullname);
   $(this).css('font-weight', 'normal');
   //   $(this).tooltip({
   //    effect: 'toggle',
   //    cancelDefault: true
   //   });
  },
  eventClick: function (event) {    
  },
  events: [],
  //#endregion
  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=jQuery(this).data('eventObject');
   // we need to copy it, so that multiple events don't have a reference to the same object
   var copiedEventObject=jQuery.extend({}, originalEventObject);
   // assign it the date that was reported
   copiedEventObject.start=date;
   copiedEventObject.allDay=allDay;
   // render the event on the calendar
   // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
   jQuery('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
   // is the "remove after drop" checkbox checked?
   jQuery(this).remove();
  }
 }); 

关于FullCalendar日历插件应用之数据展现(一)的用户互动如下：

　　相关问题：FullCalendar日历插件怎么设置只显示当前月的日期？

　　答：.fc-ltr .fc-basic-view .fc-other-month { color: trnasparent; } 使用CSS处理吧 fullCalendar的API中没看到怎样处理啊 >>详细

　　相关问题：日历管理怎么动态显示内容在日历上

　　答：ajax请求后台页面，返回 日程管理数据为Json格式，绑定到日历上。 >>详细

　　相关问题：FullCalendar日历插件怎么设置只显示当前月的日期？

　　答：仔细看看官方的API呗。我注意到不是当前月的格子样式也不一样，看看是不是可以利用那个区分的样式将不是当前月的格子的display设置为none;或者将visibility设置为hidden; >>详细