bootstrap-calendar

2018-06-14 admin

bootstrap-calendar是什么

什么是bootstrap-calendar,Bootstrap full view calendar

bootstrap-calendar介绍、bootstrap-calendar使用

<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 depends on [jQuery](http://jquery.com/) and [underscore.js](http://underscorejs.org/) is used as a template engine. For the calendar you only have to include the `calendar.css` and `calendar.js` files. If you want to localize your Calendar, it's enough to add this line before including calendar.js:

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

Where xx-XX is the language code. When you initializing the calendar, you have to specify this language code:

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

Feed with events

To feed the calendar with events you should use events_source parameter. It may be a function, array or URL. In all cases you have to set it with valid events array.

See events.json.php file for more details.

start and end contain dates when event starts (inclusive) and ends (exclusive) in Unix timestamp. Classes are event-important, event-success, event-warning, event-info, event-inverse and event-special. This wil change the color of your event indicators.

Feed URL

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

It will send two parameters by GET named from and to, which will tell you what period is required. You have to return it in JSON structure like this

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

Feed array

You can set events list array directly to events_source parameter.

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

Feed function

Or you can use function. You have to return array of events.

	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 example

Note that start and end dates are in milliseconds, thus you need to divide it by 1000 to get seconds. PHP example.


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

If you have an error you can return

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

Here is the example of PHP script.

<?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;

Another example of PHP script (without connecting with the Database).

<?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;
?>

Usage warning.

You cannot use the calendar from a local file. The following error will be displayed : Failed to load resource: Origin null is not allowed by Access-Control-Allow-Origin.

Using Ajax with local resources (file:///), is not permited. You will need to deploy this to the web instead.

Modal popup

You can enable a bootstrap modal popup to show when clicking an event instead of redirecting to event.url. To enable boostrap modal, first add the modal html to your page and provide boostrap-calendar with the 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>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>

and then set:

modal: "#events-modal"

This will enable the modal, and populate it with an iframe with the contents of event.url .

For Bootstrap v3, use

    <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>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>
    

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-34041.html

文章标题:bootstrap-calendar

回到顶部