jQuery UI Widgets Forums Grid grid from calendar range

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

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • grid from calendar range #73037


    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

    grid from calendar range #73067


    Hello lezap,

    Please take a look at the following example:

    <!DOCTYPE html>
    <html lang="en">
        <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;
                        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);
                            width: 850,
                            source: dataAdapter,
                            columnsresize: true,
                            columns: columns
    <body class='default'>
        <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
            <div id="jqxCalendar">
            <br />
            <button id="loadGrid">
                Load grid from range</button>
            <br />
            <div id="jqxgrid">

    Best Regards,

    jQWidgets team

    grid from calendar range #73160


    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.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.