You can add a legend to clarify the styling of the date events shown on the calendar.
| legend | array | List of legend element objects. |
|---|
This is the list of possible settings for a legend object:
| type | string | The display type. Values 'text', 'block', 'list' and 'spacer' are allowed. |
|---|---|---|
| label | string | Label. Required for display type 'text', optional for 'block'. Not used for 'list' or 'spacer'. |
| badge | string | Extra setting for display type 'text' to show badge information. |
| classname | string | Extra setting for display type 'text' (applied to the badge) and 'block' to add a css class to the legend item. |
| list | array | Array of css classnames for the list of blocks for type 'list'. |
<!-- set the legend for the calendar -->
<script type="application/javascript">
$(document).ready(function () {
$("#my-calendar").zabuto_calendar({
legend: [
{type: "text", label: "Special event", badge: "00"},
{type: "block", label: "Regular event", classname: "purple"},
{type: "spacer"},
{type: "text", label: "Bad"},
{type: "list", list: ["grade-1", "grade-2", "grade-3", "grade-4"]},
{type: "text", label: "Good"}
],
ajax: {
url: "show_data.php?grade=1"
}
});
});
</script>