针对fullcalendar的学习研究（二）

javascript部分主要的设置日程安排
       var date = new Date();

       var d = date.getDate();

       var m = date.getMonth();

       var y = date.getFullYear();

获取时间，使用getFullYear()和getMonth()分别获取年和月。
draggable:表示日程安排是否可以拖动。

Event的JSON格式
events:表示具体的日程安排。由源代码中1058至1080行可知道，格式如下：

{

 _id:编号,
start:日程安排开始日期，
end:日程安排结束日期,
title:日程安排名称,
url:查看日程安排连接的路径,

allDay:是否为全天任务,

className:日程安排的每一个单元格的样式,

editable:是否可以编辑,

color:设置单元格的颜色,
backgroudColor:设置单元格背景的颜色,

borderColor:边框颜色,

textColor:文件颜色

}
FullCalendar中默认设置的修改可以支持国际化展示：

由以下代码可知道所有默认行为绑定在defaults对象上。

function setDefaults(d) {

    $.extend(true, defaults, d);

}

修改默认行为可以实现国际化

var defaults = {

 

    // display

    defaultView: 'month',  //设置默认选中的为month视图

    aspectRatio: 1.35,

    header: {

       left: 'title',

       center: '',

       right: 'today prev,next'

    },

    weekends: true,

   

    // editing                       //相关的编辑功能

    //editable: false,              //启用编辑功能

    //disableDragging: false,      //拖动启用

    //disableResizing: false,      //大小改变的启用

   

    allDayDefault: true,            //是否为全天任务默认为true

    ignoreTimezone: true,           //是否忽略时区影响

   

    // event ajax

    lazyFetching: true,              

    startParam: 'start',             //绑定开始参数名称

    endParam: 'end',                  //绑定结束时间参数

   

    // time formats                   //选择月份，日期和每天的按钮标题栏时间格式

    titleFormat: {

       month: 'MMMM yyyy',

       week: "MMM d[ yyyy]{ '—'[ MMM] d yyyy}",

       day: 'dddd, MMM d, yyyy'

    },

    columnFormat: {                 //选中月份，日期和每天时候单元格中日期的格式

       month: 'ddd',

       week: 'ddd M/d',

       day: 'dddd M/d'

    },

    timeFormat: { // for event elements

       '': 'h(:mm)t' // default

    },

   

    // locale

    isRTL: false,

    firstDay: 0,

monthNames:              //针对月份的中文化展示修改 ['January','February','March','April','May','June','July','August','September','October','November','December'],

    monthNamesShort: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],

  dayNames: //针对星期的中文化展示修改  ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],

    dayNamesShort: ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'],

    buttonText: {               //针对按钮中显示信息的国际化的改变

       prev: ' ◄ ',

       next: ' ► ',

       prevYear: ' << ',

       nextYear: ' >> ',

       today: 'today',

       month: 'month',

       week: 'week',

       day: 'day'

    },

   

    // jquery-ui theming

    theme: false,                    //是否采用主题

    buttonIcons: {                      //按钮的图标

       prev: 'circle-triangle-w',

       next: 'circle-triangle-e'

    },

   

    //selectable: false,         //选择是否启用

    unselectAuto: true, 

   

    dropAccept: '*'

   

};

FullCalendar中的各种事件绑定：
源代码如下：
function Calendar(element, options, eventSources) {

    var t = this;

   

   

    // exports

    t.options = options;             

    t.render = render;

    t.destroy = destroy;

    t.refetchEvents = refetchEvents;

    t.reportEvents = reportEvents;

    t.reportEventChange = reportEventChange;

    t.rerenderEvents = rerenderEvents;

    t.changeView = changeView;

    t.select = select;          //选中单元格的事件

    t.unselect = unselect;     

    t.prev = prev;               //上一页事件

    t.next = next;               //下一页事件

    t.prevYear = prevYear;

    t.nextYear = nextYear;

    t.today = today;              //今天按钮时间

    t.gotoDate = gotoDate;      //

    t.incrementDate = incrementDate;

    t.formatDate = function(format, date) { return formatDate(format, date, options) };

    t.formatDates = function(format, date1, date2) { return formatDates(format, date1, date2, options) };

    t.getDate = getDate;

    t.getView = getView;

    t.option = option;

    t.trigger = trigger;

   

   

    // imports

    EventManager.call(t, options, eventSources);

    var isFetchNeeded = t.isFetchNeeded;

    var fetchEvents = t.fetchEvents;

   

   

    // locals

    var _element = element[0];

    var header;

    var headerElement;

    var content;

    var tm; // for making theme classes

    var currentView;

    var viewInstances = {};

    var elementOuterWidth;

    var suggestedViewHeight;

    var absoluteViewElement;

    var resizeUID = 0;

    var ignoreWindowResize = 0;

    var date = new Date();

    var events = [];  //当前绑定的events数据

    var _dragElement;

采用一个请求页面获取数据加载方式如下：
<script type='text/javascript'>

 

    $(document).ready(function() {

   

       $('#calendar').fullCalendar({

      

           editable: true,

          

           events: "json-events.php",

          

           eventDrop: function(event, delta) {

              alert(event.title + ' was moved ' + delta + ' days\n' +

                  '(should probably update your database)');

           },

          

           loading: function(bool) {

              if (bool) $('#loading').show();

              else $('#loading').hide();

           }

          

       });

      

    });

 

</script>

开启选中单元格的事件
<script type='text/javascript'>

 

    $(document).ready(function() {

   

       var date = new Date();

       var d = date.getDate();

       var m = date.getMonth();

       var y = date.getFullYear();

      

       var calendar = $('#calendar').fullCalendar({

           header: {

              left: 'prev,next today',

              center: 'title',

              right: 'month,agendaWeek,agendaDay'

           },

           selectable: true,

           selectHelper: true,

           select: function(start, end, allDay) {

              var title = prompt('Event Title:');

              if (title) {

                  calendar.fullCalendar('renderEvent',

                     {

                         title: title,

                         start: start,

                         end: end,

                         allDay: allDay

                     },

                     true // make the event "stick"

                  );

              }

              calendar.fullCalendar('unselect');

           },

           editable: true,

           events: [

              {

                  title: 'All Day Event',

                  start: new Date(y, m, 1)

              },

              {

                  title: 'Long Event',

                  start: new Date(y, m, d-5),

                  end: new Date(y, m, d-2)

              },

              {

                  id: 999,

                  title: 'Repeating Event',

                  start: new Date(y, m, d-3, 16, 0),

                  allDay: false

              },

              {

                  id: 999,

                  title: 'Repeating Event',

                  start: new Date(y, m, d+4, 16, 0),

                  allDay: false

              },

              {

                  title: 'Meeting',

                  start: new Date(y, m, d, 10, 30),

                  allDay: false

              },

              {

                  title: 'Lunch',

                  start: new Date(y, m, d, 12, 0),

                  end: new Date(y, m, d, 14, 0),

                  allDay: false

              },

              {

                  title: 'Birthday Party',

                  start: new Date(y, m, d+1, 19, 0),

                  end: new Date(y, m, d+1, 22, 30),

                  allDay: false

              },

              {

                  title: 'Click for Google',

                  start: new Date(y, m, 28),

                  end: new Date(y, m, 29),

                  url: 'http://google.com/'

              }

           ]

       });

      

    });

 

</script>

 

评论

2 楼 rain_2372 2014-07-15  

我现在的需求：在agendaDay 日视图中，又切分出4列，同一天，可以显示出不同 的 4大事件类型（1会议，2 生活，3 工作，4 娱乐） 像 周视图那样 二维显示的视图。左侧显示24小时。有这样的 fullcalendar 源码demo 吗。

1 楼 rain_2372 2014-07-15  

  谢谢分享。