%PDF- %PDF-
Mini Shell

Mini Shell

Direktori : /home/tjamichg/intranet.tjamich.gob.mx/intranet/common/vendors/calendar/examples/
Upload File :
Create Path :
Current File : /home/tjamichg/intranet.tjamich.gob.mx/intranet/common/vendors/calendar/examples/show_data.html

<!DOCTYPE html>
<html>
<head>
    <title>Zabuto | Calendar | Show Data</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>Show Data</span>
        <ul class="nav nav-pills pull-right">
            <li><a class="pull-right" href="display_settings.html">&laquo; Display Settings</a></li>
            <li><a class="pull-right" href="set_legend.html">Set Legend &raquo;</a></li>
        </ul>
    </h1>

    <hr>

    <div class="row">
        <div class="col-xs-6">
            <p>You can add date events to the calendar by using an AJAX GET request. The response has to return a JSON
                encoded array of events in a specified format.</p>

            <p>Details of an event can be shown with a modal window.</p>
            <table>
                <tr>
                    <th colspan="2">ajax</th>
                    <td colspan="2" class="type">object {</td>
                    <td></td>
                </tr>
                <tr>
                    <th></th>
                    <th>url</th>
                    <td class="type">string</td>
                    <td>URL to the JSON date event information.</td>
                </tr>
                <tr>
                    <td class="type"><br>}</td>
                    <th>modal</th>
                    <td class="type">boolean</td>
                    <td>Use a Bootstap JS modal window. The information will be shown with a click on the day of the
                        event.
                    </td>
                </tr>
            </table>
        </div>
        <div class="col-xs-6">
            <p>Below you can find an example of the JSON data format:</p>
            <code>[
                {
                &quot;date&quot;:&quot;1999-12-31&quot;,
                &quot;badge&quot;:true,
                &quot;title&quot;:&quot;Tonight&quot;,
                &quot;body&quot;:&quot;&lt;p class=\&quot;lead\&quot;&gt;Party&lt;\/p&gt;&lt;p&gt;Like it's 1999.&lt;\/p&gt;&quot;,
                &quot;footer&quot;:&quot;At Paisley Park&quot;,
                &quot;classname&quot;:&quot;purple-event&quot;
                },
                {
                &quot;date&quot;:&quot;2000-01-01&quot;,
                ...
                }
                ]</code>
        </div>
    </div>

    <hr>

    <div class="row">
        <div class="col-xs-5">

            <div id="my-calendar"></div>

            <script type="application/javascript">
                $(document).ready(function () {
                    $("#my-calendar").zabuto_calendar({
                        ajax: {
                            url: "show_data.php",
                            modal: true
                        }
                    });
                });
            </script>

        </div>
        <div class="col-xs-6 col-xs-offset-1">

            <code>
                &lt;!-- show date events with a modal window --&gt;
                &lt;script type=&quot;application/javascript&quot;&gt;
                $(document).ready(function () {
                $(&quot;#my-calendar&quot;).zabuto_calendar({
      <span>ajax: {
          url: &quot;show_data.php&quot;,
          modal: true
      }</span>
                });
                });
                &lt;/script&gt;
            </code>

        </div>
    </div>
</div>
<!-- /container -->

</body>
</html>

Zerion Mini Shell 1.0