WEB技术分享

timezone

设置日历的时区范围。默认false，还可以是'local','UTC'或者字符串如'America/Chicago'。

1.false：默认，没有时区

如果不存储时区信息，那么所有活动事件在所有客户机上呈现一致性，时间上跟时区就没关系了。

2.'local'：客户机时区

使用本地时区，则你的活动事件在不同时区的客户机上会显示客户机的当前所在时区的时间。

3.'UTC'：世界标准时间

日历中的事件活动以标准时间展示。

4.时区字符串：例如"America/Chicago"

根据世界各地时区差别，定制某个时区时间。

查看demo。

now

显示日历今天的日期，通常这一天用黄色背景显示。它可以是moment或者一个function函数。

一般是本地浏览器的日期时间。你可以使用Moment时刻覆盖当期日期，如ISO8601日期字符串如“2013-12-01t00:00:00”。

也可以设置一个回调函数来获取时间。

以下示例是结合服务端使用PHP写的代码：

<?php
$timezone = new \DateTimeZone('America/Chicago');
$datetime = new \DateTime('now', $timezone);
$datetime_string = $datetime->format('c');
?>

JS代码：

$('#calendar').fullCalendar({
    now: <?php echo json_encode($datetime_string) ?>
});

查看demo。

Current Date 当前日期

defaultDate 默认日期

当初次加载日历的时候显示的初始日期。如果未指定，则默认是当前日期。

defaultDate: '2017-10-28'

查看demo

nowIndicator

是否显示指示当前时间的标记，默认false。当用户查看日历时，指示器会自动重新定位。

visibleRange

在视图中设置可见的日期范围。以下代码显示日程视图中2017-03-22～24日三天时间范围：

$('#calendar').fullCalendar({
    defaultView: 'agenda',
    visibleRange: {
        start: '2017-03-22',
        end: '2017-03-25'
    }
});

你也可以以当前日期为准，动态设置前后日期范围，如：

$('#calendar').fullCalendar({
    defaultView: 'agenda',
    visibleRange: function(currentDate) {
        return {
            start: currentDate.clone().subtract(1, 'days'),
            end: currentDate.clone().add(3, 'days') // exclusive end, so 3
        };
    }
});

查看demo

validRange

限制日历可用日期范围，有效范围之外的日期会变灰，用户无法将时间拖动会调整到这些区域。导航箭头也会不可用。以下代码只可用的日期范围是2017-05-01～2017-06-01：

$('#calendar').fullCalendar({
    defaultView: 'month',
    validRange: {
        start: '2017-05-01',
        end: '2017-06-01'
    }
});

查看demo

dateIncrement

当点击日历标题上的上一个和下一个切换箭头时，跳转的日期。

dateAlignment

设置自定义视图和通用视图的第一个可见日期。

duration

设置自定义或通用视图的连续日期时间。

例如在自定义视图中，显示当前往后连续4天时间：

$('#calendar').fullCalendar({
    defaultView: 'agendaFourDay',
    views: {
        agendaFourDay: {
            type: 'agenda',
            duration: { days: 4 }
        }
    }
});

如果是在通用视图中，也可以这样写：

$('#calendar').fullCalendar({
    defaultView: 'agenda',
    duration: { days: 4 }
});

查看demo

dayCount

用来设置自定义视图或通用视图中显示的确切天数，数字。

例如，在自定义视图中，除去周末，只能看到连续的4天。

$('#calendar').fullCalendar({
    weekends: false,
    defaultView: 'agendaFourDay',
    views: {
        agendaFourDay: {
            type: 'agenda',
            dayCount: 4
        }
    }
});

在通用视图中，可以这样：

 $('#calendar').fullCalendar({
    weekends: false,
    defaultView: 'agenda',
    dayCount: 4
});   

查看demo

prev

切换到上一个日历（包括月视图，周视图，天视图）。

如果当前日程表是月视图，日历后退一个月；如果是周视图或者日程周视图，日历后退一周；如果是天视图或者日程天视图，日历后退一天。

$('#my-prev-button').click(function() {
    $('#calendar').fullCalendar('prev');
});

next

切换到下一个日历（包括月视图，周视图，天视图）。

如果当前日历是月视图，日历前进一个月；如果是周视图或者日程周视图，日历前进一周；如果是天视图或者日程天视图，日历前进一天。

$('#my-next-button').click(function() {
    $('#calendar').fullCalendar('next');
});   

prevYear

切换到上一年视图。

.fullCalendar( 'prevYear' )

nextYear

切换到下一年视图。

.fullCalendar( 'nextYear' )

today

跳转到今天。

$('#my-today-button').click(function() {
    $('#calendar').fullCalendar('today');
});

gotoDate

跳转到任意日期。

.fullCalendar( 'gotoDate', date )

date可以是任意日期。

incrementDate

日历前进或者后退任意的时间：

.fullCalendar( 'incrementDate', duration )

getDate

返回当前日期：

.fullCalendar( 'getDate' ) -> Moment

点击按钮显示当前时间的例子：

$('#my-button').click(function() {
    var moment = $('#calendar').fullCalendar('getDate');
    alert("The current date of the calendar is " + moment.format());
});

locale

自定义语言和本地化选项。字符串，默认是"en"。

如果要使用多国语言版，需要加载locale-all.js，如果只是单独一种语言版本，则可以加载对应的语言版本js，如中文/locale/zh-cn.js

<script src='fullcalendar/fullcalendar.js'></script>
<script src='fullcalendar/locale/zh-cn.js'></script>
<script>
$(document).ready(function() {
   $('#calendar').fullCalendar({
     // ... 其他配置项
   });
});
</script>

查看demo

timeFormat

设置每个事件的时间格式，值为字符串。每个视图都有一个特定的默认值，默认值将根据当前的语言环境而改变。

// 日程周视图和日程天视图
'h:mm',  // 5:00 - 6:30

// 其他视图
h(:mm)t'  // 7p

所有事件都使用24小时制：

$('#calendar').fullCalendar({
    events: [
        {
            title:  'My Event',
            start:  '2010-01-01T14:30:00',
            allDay: false
        }
        // other events here...
    ],
    timeFormat: 'H(:mm)' // uppercase H for 24-hour clock
});

columnFormat

设置日历每列头部的文字，值为字符串

'ddd'     // like 'Mon', for month view
'ddd M/D' // like 'Mon 9/7', for week views
'dddd'    // like 'Monday', for day views

titleFormat

设置日历头部的title，值为字符串

'MMMM YYYY'   // like 'September 2009', for month view
'MMM D YYYY'  // like 'Sep 13 2009', for week views
'MMMM D YYYY' // like 'September 8 2009', for day views

buttonText

设置日历的头部按钮文字，值为Object对象：

{
    today:    'today',
    month:    'month',
    week:     'week',
    day:      'day',
    list:     'list'
}

monthNames

每个月份的全称，数组。

['January', 'February', 'March', 'April', 'May', 'June', 'July',
 'August', 'September', 'October', 'November', 'December']

默认值会根据当前区域语言设置locale而更改。

monthNamesShort

每个月份的缩写、简称，数组。

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

默认值会根据当前区域语言设置locale而更改。

dayNames

设置一周中每天的全称，数组。

['Sunday', 'Monday', 'Tuesday', 'Wednesday',
 'Thursday', 'Friday', 'Saturday']

默认值会根据当前区域语言设置locale而更改。

dayNamesShort

设置一周中每天的名称缩写、简称，数组。

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

默认值会根据当前区域语言设置locale而更改。

weekNumberTitle

设置日历中的周数，即当前第几周。值为字符串，默认：'W'。日历的最左侧会多出一列，显示一年中的周数。

默认值会根据当前区域语言设置locale而更改。

displayEventTime

是否显示事件时也显示时间，布尔型，true/false。如果是全天时间则不会显示时间。如果设置为false，则不会在事件上显示时间。

查看demo

displayEventEnd

是否在日历上显示事件结束时间，默认是false。如果displayEventTime设置为false的情况下，事件的结束时间无论如何都不会显示。

eventLimitText

设置日历事件超出限制条数的文本，默认： 'more'，当然这个设置要生效的话要依赖eventLimit的设置。

dayPopoverFormat

设置点击更多事件eventLimitClick弹出的标题日期格式。默认："dddd, MMMM D" 。