Current File : /home/tjamichg/intranet.tjamich.gob.mx/intranet/common/vendors/calendar/examples/action.html
<!DOCTYPE html>
<html>
<head>
<title>Zabuto | Calendar | Action</title>
<meta name="robots" content="noindex, nofollow">
<!-- jQuery CDN -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!-- Bootstrap CDN -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="//oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<!-- Zabuto -->
<link rel="stylesheet" type="text/css" href="//zabuto.com/assets/css/style.css">
<link rel="stylesheet" type="text/css" href="//zabuto.com/assets/css/examples.css">
<!-- Zabuto Calendar -->
<script src="../zabuto_calendar.min.js"></script>
<link rel="stylesheet" type="text/css" href="../zabuto_calendar.min.css">
</head>
<body>
<!-- container -->
<div class="container example">
<h1>
Calendar <span>Action</span>
<ul class="nav nav-pills pull-right">
<li><a class="pull-right" href="set_legend.html">« Set Legend</a></li>
<li><a class="pull-right" href="index.html">^ Example Index</a></li>
</ul>
</h1>
<hr>
<div class="row">
<div class="col-xs-6">
<p>You can add a function to the calendar to execute when the onclick event is triggered on a specific
day.</p>
<p>You are also able to add a function to the onclick event of the navigation to the previous or next
month.</p>
<table>
<tr>
<th>action</th>
<td class="type">function</td>
<td>The function to execute when a date is clicked.</td>
</tr>
<tr>
<th>action_nav</th>
<td class="type">function</td>
<td>The function to execute when the navigation to the previous or next month is clicked.</td>
</tr>
</table>
</div>
<div class="col-xs-6">
<p>To retrieve the date for the date action you need to access the element information using the calendar
day ID. You can also check if an event is available for this date.
<code>
myDateFunction(this.id);
function myDateFunction(id) {
var date = $("#" + id).data("date");
var hasEvent = $("#" + id).data("hasEvent");
}
</code>
</p>
<p>To retrieve information on the navigation action you need to access the element information using the
calendar navigation ID. To can access the navigation info itself (prev/next) and information on the
previous or next year and month.
<code>
myNavFunction(this.id);
function myNavFunction(id) {
var nav = $("#" + id).data("navigation");
var to = $("#" + id).data("to");
}
</code>
</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-5">
<div id="date-popover" class="popover top"
style="cursor: pointer; display: block; margin-left: 33%; margin-top: -50px; width: 175px;">
<div class="arrow"></div>
<h3 class="popover-title" style="display: none;"></h3>
<div id="date-popover-content" class="popover-content"></div>
</div>
<div id="my-calendar"></div>
<script type="application/javascript">
$(document).ready(function () {
$("#date-popover").popover({html: true, trigger: "manual"});
$("#date-popover").hide();
$("#date-popover").click(function (e) {
$(this).hide();
});
$("#my-calendar").zabuto_calendar({
action: function () {
return myDateFunction(this.id, false);
},
action_nav: function () {
return myNavFunction(this.id);
},
ajax: {
url: "show_data.php?action=1",
modal: true
},
legend: [
{type: "text", label: "Special event", badge: "00"},
{type: "block", label: "Regular event"}
]
});
});
function myDateFunction(id, fromModal) {
$("#date-popover").hide();
if (fromModal) {
$("#" + id + "_modal").modal("hide");
}
var date = $("#" + id).data("date");
var hasEvent = $("#" + id).data("hasEvent");
if (hasEvent && !fromModal) {
return false;
}
$("#date-popover-content").html('You clicked on date ' + date);
$("#date-popover").show();
return true;
}
function myNavFunction(id) {
$("#date-popover").hide();
var nav = $("#" + id).data("navigation");
var to = $("#" + id).data("to");
console.log('nav ' + nav + ' to: ' + to.month + '/' + to.year);
}
</script>
</div>
<div class="col-xs-6 col-xs-offset-1">
<code>
<div id="date-popover" class="popover top" style="...">
...
<div id="date-popover-content" class="popover-content"></div>
</div>
<div id="my-calendar"></div>
<script type="application/javascript">
$(document).ready(function () {
$("#date-popover").popover(...);
...
$("#my-calendar").zabuto_calendar({
<span>action: function () {
return myDateFunction(this.id, false);
},
action_nav: function () {
return myNavFunction(this.id);
}</span>,
ajax: {
url: "show_data.php?action=1",
modal: true
},
legend: [
{type: "text", label: "Special event", badge: "00"},
{type: "block", label: "Regular event"}
]
});
});
<span>function myDateFunction(id, fromModal) {
$("#date-popover").hide();
if (fromModal) {
$("#" + id + "_modal").modal("hide");
}
var date = $("#" + id).data("date");
var hasEvent = $("#" + id).data("hasEvent");
if (hasEvent && !fromModal) {
return false;
}
$("#date-popover-content").html('You clicked on date ' + date);
$("#date-popover").show();
return true;
}
function myNavFunction(id) {
$("#date-popover").hide();
var nav = $("#" + id).data("navigation");
var to = $("#" + id).data("to");
console.log('nav ' + nav + ' to: \ + to.month + '/' + to.year);
}</span>
</script>
</code>
</div>
</div>
</div>
<!-- /container -->
</body>
</html>
Mini Shell