You can add a function to the calendar to execute when the onclick event is triggered on a specific day.
You are also able to add a function to the onclick event of the navigation to the previous or next month.
| action | function | The function to execute when a date is clicked. |
|---|---|---|
| action_nav | function | The function to execute when the navigation to the previous or next month is clicked. |
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.
myDateFunction(this.id);
function myDateFunction(id) {
var date = $("#" + id).data("date");
var hasEvent = $("#" + id).data("hasEvent");
}
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.
myNavFunction(this.id);
function myNavFunction(id) {
var nav = $("#" + id).data("navigation");
var to = $("#" + id).data("to");
}
<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({
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>