{% layout 'layout' %}
{% block title %}Calendar{% endblock %}

{% block breadcrumb %}
<li><a href="index.html">Home</a></li>
<li><a href="#">Extras</a></li>
<li class="active"><a href="extras-calendar">Calendar</a></li>
{% endblock %}

{% block styles %}
{{ "plugins/fullcalendar/fullcalendar.css" | asset_url | stylesheet_tag }}   <!-- Calendar Plugin -->
{% endblock %}

{% block scripts %}
{{ "plugins/fullcalendar/fullcalendar.min.js" | asset_url | script_tag }}   <!-- Calendar Plugin -->

{{ "demo/demo-calendar.js" | asset_url | script_tag }}
{% endblock %}

{% block content %}
<div class="alert alert-info">
	<h3>FullCalendar <small>Drag and Drop Calendar</small></h3>
	<p>FullCalendar is a jQuery plugin that provides a full-sized, drag &amp; drop calendar like the one below. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar). It is visually customizable and exposes hooks for user-triggered events (like clicking or dragging an event).</p>
</div>

<div class="row">
	<div class="col-md-12">
		<div class="panel panel-primary">
			<div class="panel-heading">
				<h2>Basic Calendar</h2>
			</div>
			<div class="panel-body">
				<div id="calendar-drag"></div>
			</div>
		</div>
	</div>

	<div class="col-md-12">
		<div class="panel panel-primary">
			<div class="panel-heading">
				<h2>Calendar with External Drag &amp; Drop</h2>
			</div>
			<div class="panel-body">
				<div class="row">
                    <div id='external-events' class="col-sm-3">
                        <h3>Draggable Events</h3>
                        <div class='external-event label label-info'>All Day Event</div>
                        <div class='external-event label label-primary'>Birthday Party</div>
                        <div class='external-event label label-warning'>Meeting</div>
                        <div class='external-event label label-alizarin'>Lunch</div>
                        <div class='external-event label label-danger'>Dinner</div>
                        <div class='external-event label label-success'>Date</div>
                        <div class="checkbox icheck">
                        	<label for='drop-remove'><input type='checkbox' id='drop-remove' />Remove after drop</label>
                        </div>
                    </div>

                    <div id='calendar-external' class="col-sm-9"></div>
                </div>
			</div>
		</div>
	</div>
</div>
{% endblock %}
