jQuery UI Widgets › Forums › Grid › grid from calendar range

Tagged: , , , , , , , , , ,

This topic contains 2 replies, has 2 voices, and was last updated by  lezap 9 years, 5 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    grid from calendar range Posts
  • June 25, 2015 at 8:11 pm grid from calendar range #73037

    lezap
    Participant

    I want to create a grid from a calendar range selection where each column is a day of the selected range. is it possible to do it?

    Thank you in advance

    June 26, 2015 at 7:42 am grid from calendar range #73067

    Dimitar
    Participant

    Hello lezap,

    Please take a look at the following example:

    <!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.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/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.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/globalization/globalize.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#jqxCalendar").jqxCalendar({ width: 220, height: 220, selectionMode: 'range' });

            var gridLoaded = false;
            $('#loadGrid').click(function () {
                if (gridLoaded === false) {
                    gridLoaded = true;
                    var range = $("#jqxCalendar").jqxCalendar('getRange');
                    if (!range.from) {
                        alert('No range selected');
                        gridLoaded = false;
                        return;
                    }
                    var startingDate = range.from.getDate();
                    var endingDate = range.to.getDate();

                    var source = { datatype: 'json', datafields: [] };
                    var columns = [];

                    for (var i = startingDate; i <= endingDate; i++) {
                        source.datafields.push({ name: i.toString() });
                        columns.push({ text: i.toString(), datafield: i.toString() });
                    }

                    var dataAdapter = new $.jqx.dataAdapter(source);

                    $("#jqxgrid").jqxGrid(
                    {
                        width: 850,
                        source: dataAdapter,
                        columnsresize: true,
                        columns: columns
                    });
                }
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxCalendar">
        </div>
        <br />
        <button id="loadGrid">
            Load grid from range</button>
        <br />
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    June 29, 2015 at 7:09 pm grid from calendar range #73160

    lezap
    Participant

    Thank you!

    This will work only for a period during the same month. For a date range between two months you should change the loop.

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.