README

基于Twitter Bootstrap的全视图日历。请尝试演示。

为什么？

我为什么要开始这个项目？因为我相信现在没有很好的原生Bootstrap支持的全视图日历。实际上我甚至找不到一个。还使用了不同的UI和UX设计理念。

特性

可重用 - 这个日历中没有UI。所有切换视图或加载事件的按钮都是分开完成的。您将拥有自己独特的日历设计。
模板化 - 所有的视图如年、月、周或日都是基于模板的。您可以轻松更改其外观或样式，甚至添加新的自定义视图。
LESS - 使用变量文件轻松调整和样式化您的日历。
AJAX - 它使用AJAX将事件填充到日历中。您提供URL，然后通过这个URL返回事件列表的JSON。
i18n - 语言文件是独立连接的。您可以轻松地将日历翻译成自己的语言。假日也将根据您的语言在日历中显示。

如何使用

安装

您可以使用 bower 包管理器来安装它。

$ bower install bootstrap-calendar

Bower将自动安装所有依赖项。然后运行

$ bower list --path

您将看到需要包含到您的文档中的文件列表。

快速设置

您需要包含Bootstrap CSS和日历CSS。以下是最小设置。

	<!DOCTYPE html>
	<html>
	<head>
		<title>Minimum Setup</title>
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<link rel="stylesheet" href="css/calendar.css">
	</head>
	<body>

		<div id="calendar"></div>

		<script type="text/javascript" src="js/vendor/jquery-1.9.1.js"></script>
		<script type="text/javascript" src="js/vendor/underscore-min.js"></script>
		<script type="text/javascript" src="js/calendar.js"></script>
		<script type="text/javascript">
			var calendar = $("#calendar").calendar(
				{
					tmpl_path: "/tmpls/",
					events_source: function () { return []; }
				});			
		</script>
	</body>
	</html>

Bootstrap Calendar依赖于jQuery，并使用underscore.js作为模板引擎。对于日历，您只需要包含calendar.css和calendar.js文件。如果您想本地化您的日历，只需在包含calendar.js之前添加此行

	<script type="text/javascript" src="js/language/xx-XX.js"></script>

其中xx-XX是语言代码。在初始化日历时，您必须指定此语言代码

	<script type="text/javascript">
		var calendar = $('#calendar').calendar({language: 'xx-XX'});
	</script>

提供事件

要向日历提供事件，您应使用events_source参数。它可以是函数、数组或URL。在所有情况下，您都必须使用有效的事件数组设置它。

有关更多信息，请参阅events.json.php文件。

start和end包含事件开始（包含）和结束（不包含）的日期，以Unix时间戳形式。类是event-important、event-success、event-warning、event-info、event-inverse和event-special。这将更改事件指示器的颜色。

提供URL

var calendar = $('#calendar').calendar({events_source: '/api/events.php'});

它将通过GET发送两个参数，分别命名为from和to，它们将告诉您需要什么时间段。您必须以如下所示的JSON结构返回它

{
	"success": 1,
	"result": [
		{
			"id": 293,
			"title": "Event 1",
			"url": "http://example.com",
			"class": "event-important",
			"start": 12039485678000, // Milliseconds
			"end": 1234576967000 // Milliseconds
		},
		...
	]
}

提供数组

您可以将事件列表数组直接设置为events_source参数。

	var calendar = $('#calendar').calendar({
	    events_source: [
            {
                "id": 293,
                "title": "Event 1",
                "url": "http://example.com",
                "class": "event-important",
                "start": 12039485678000, // Milliseconds
                "end": 1234576967000 // Milliseconds
            },
            ...
        ]});

提供函数

或者您可以使用函数。您必须返回事件数组。

	var calendar = $('#calendar').calendar({events_source: function(){
	    return  [
           {
               "id": 293,
               "title": "Event 1",
               "url": "http://example.com",
               "class": "event-important",
               "start": 12039485678000, // Milliseconds
               "end": 1234576967000 // Milliseconds
           },
           ...
       ];
	}});

PHP 示例

请注意，开始和结束日期是以毫秒为单位的，因此您需要将其除以1000以获取秒数。PHP 示例。

    $start = date('Y-m-d h:i:s', ($_GET['start'] / 1000));

如果您遇到错误，可以返回

	{
		"success": 0,
		"error": "error message here"
	}

以下是一个PHP脚本的示例。

<?php
$db    = new PDO('mysql:host=localhost;dbname=testdb;charset=utf8', 'username', 'password');
$start = $_REQUEST['from'] / 1000;
$end   = $_REQUEST['to'] / 1000;
$sql   = sprintf('SELECT * FROM events WHERE `datetime` BETWEEN %s and %s',
    $db->quote(date('Y-m-d', $start)), $db->quote(date('Y-m-d', $end)));

$out = array();
foreach($db->query($sql) as $row) {
    $out[] = array(
        'id' => $row->id,
        'title' => $row->name,
        'url' => Helper::url($row->id),
        'start' => strtotime($row->datetime) . '000',
        'end' => strtotime($row->datetime_end) .'000'
    );
}

echo json_encode(array('success' => 1, 'result' => $out));
exit;

另一个PHP脚本的示例（不连接数据库）。

<?php
$out = array();
 
 for($i=1; $i<=15; $i++){ 	//from day 01 to day 15
	$data = date('Y-m-d', strtotime("+".$i." days"));
	$out[] = array(
     	'id' => $i,
		'title' => 'Event name '.$i,
		'url' => Helper::url($id),
		'class' => 'event-important',
		'start' => strtotime($data).'000'
	);
}
 
echo json_encode(array('success' => 1, 'result' => $out));
exit;
?>

使用警告。

您不能从本地文件使用日历。将显示以下错误：Failed to load resource: Origin null is not allowed by Access-Control-Allow-Origin。

使用Ajax与本地资源（file:///）是不允许的。您需要将其部署到网络上。

模态弹出窗口

您可以通过启用bootstrap模态弹出窗口来显示点击事件，而不是重定向到event.url。要启用bootstrap模态，首先将模态HTML添加到您的页面中，并给boostrap-calendar提供ID

    <div class="modal hide fade" id="events-modal">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h3 class="modal-title">Event</h3>
        </div>
        <div class="modal-body" style="height: 400px">
        </div>
        <div class="modal-footer">
            <a href="#" data-dismiss="modal" class="btn">Close</a>
        </div>
    </div>

然后设置

modal: "#events-modal"

这将启用模态，并用iframe填充event.url的内容。

对于Bootstrap v3，使用

    <div class="modal fade" id="events-modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h3 class="modal-title">Event</h3>
                </div>
                <div class="modal-body" style="height: 400px">
                </div>
                <div class="modal-footer">
                    <a href="#" data-dismiss="modal" class="btn">Close</a>
                </div>
            </div>
        </div>
    </div>

模态内容来源

有三种选项可以用于填充模态的内容，由modal_type选项控制

iframe（默认）- 用iframe填充模态，iframe.src设置为event.url
ajax - 从event.url获取HTML，这在您只有一小段HTML且想利用日历页面中的样式时很有用
template - 将渲染一个模板（例如tmpls/modal.html），该模板获取event和一个对calendar对象的引用。

模态标题

您可以通过定义modal_title选项为一个函数来自定义模态标题。此函数将接收事件作为其唯一参数。例如，这可以用来设置模态的标题为事件的标题

modal_title: function(event) { return event.title }

一个设置为使用模态的日历看起来像这样

$("#calendar").calendar({modal : "#events-modal", modal_type : "ajax", modal_title : function (e) { return e.title }})

serhioromano / bootstrap-calendar

维护者

详细信息