jQWidgets Mobile Demos

Show Demo List

Theme:

Demo
View Source
API Reference

View in full screen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
    <meta name="msapplication-tap-highlight" content="no" />
    <title id='Description'>jQWidgets Basic Calendar Mobile Example
    </title>
    <link rel="stylesheet" href="../styles/demo.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.windowsphone.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.blackberry.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.android.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.mobile.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../simulator.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = prepareSimulator("calendar");
            $("#calendar").jqxCalendar({ theme: theme, titleHeight: 40, columnHeaderHeight: 40, width: '100%', height: '60%' });
            
            $("#events").jqxListBox({ theme: theme, itemHeight: 34, width: '100%', height: '40%', source: [{ html: "12:00 <strong>Appointment with Nancy</strong>" }, { html: "16:00 <strong>Appointment with Peter</strong>" }, { html: "18:00 <strong>Fitness</strong>" }, { html: "20:00 <strong>Conference call with Alex</strong>" }] });
            initSimulator("calendar");
        });
    </script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<body>
    <div id="demoContainer" class="device-mobile">
        <div id="container" class="device-mobile-container">
            <div style="border: none;" id="calendar"></div>
            <div style="border: none;" id="events">
            </div>
        </div>
    </div>
</body>
</html>