1

Here am trying to create one app in which I have one table who has a header with defined time slots like 08:00-09:00,09:00-10:00.....etc,and here am storing items for these time slots,there am able to write data to calendar list for a specific time slot with javascript,i wan to display that data in table format with UI that will show us that specific slot have a data according to the Time slot header's column cell and this is working fine for a single-single time slots,issue arises when am entering time value which covers multiple time slots like 08:00-09:00,09:00-10:00,10:00-11:00 these are 3 single -single time slots and here suppose am entering data like having time value as 08:00-10:00 then it covers two time slots,so now here i want to display this time slot as single in table structure and i want to takle this situation ,here data for single time slot and multiple time slots should be displayed in single table,code am using for showing single time slots data is as bellow

var ctx = new SP.ClientContext(appWebUrl);//Get the SharePoint Context object based upon the URL
var myList = ctx.get_web().get_lists().getByTitle("CalendarList");
var myList1 = ctx.get_web().get_lists().getByTitle("DataList");
function retrieveBookingDetails() {
    var query= new SP.CamlQuery();
    var query1 = new SP.CamlQuery();
    var items = myList.getItems(query);
    var items1 = myList1.getItems(query1);
    ctx.load(items);
    ctx.load(items1);
    ctx.executeQueryAsync(onQuerySucceeded, onQueryFailed);
    function onQuerySucceeded() {
        retrieveItems(items, items1);
    }
    function onQueryFailed(sender, args) {
        alert('Request failed. ' + args.get_message() +
            '\n' + args.get_stackTrace());
    }
}

function retrieveItems(items, items1) {

    var enumerator1 = items1.getEnumerator();
    var enumerator = items.getEnumerator();
    var enumerator2 = items.getEnumerator();
    var rms = new Array();
    var rmname;
    var rcount=0;

    var rmids=new Array();
    var count1 = items1.get_count();

    while (enumerator1.moveNext()) {
        var currentListItem = enumerator1.get_current();
        rcount++;
        rmname = currentListItem.get_item('Name');
        rmids[rcount]=currentListItem.get_item('ID');
        rms[rcount] = rmname;
    }  
    var orderedTimes = ["08:00-09:00", "09:00-10:00", "10:00-11:00", "11:00-12:00", "12:00-13:00", "13:00-14:00", "14:00-15:00", "15:00-16:00", "16:00-17:00", "17:00-18:00"];
    function matrix(m, n) {
        return Array.from({
            // generate array of length m
            length: m
            // inside map function generate array of size n
            // and fill it with `0`
        }, () => new Array(n).fill(0));
    };

    var cols=10
    var counter=0;

    var startdte;
    var rmsByTimes =matrix(count1+1,cols);// creates mtrix like[[0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0]];

    var months=["","Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
    var count=0;
    for (var r = 1; r <= count1; r++) {

        while (enumerator.moveNext()) {  

            var currentListItem = enumerator.get_current();
            var rmnm=currentListItem.get_item('Name');               
            startdte = currentListItem.get_item('EventDate').toString().split(" ");
            var month=months.indexOf(startdte[1]);
            if(month<10)
            {
                month="0"+month;
            }
            var day=startdte[2];
            var year=startdte[3];
            var converteddte=month+"/"+day+"/"+year;
            var evententereddate = document.getElementById("Date").innerHTML;
            var dateToCompare = moment(evententereddate, 'DD/MM/YYYY').format("MM/DD/YYYY");

            if(converteddte=== dateToCompare)
            {                  
                var startdte_time = startdte[4].toString().split(":");
                var enddte = currentListItem.get_item('EndDate').toString().split(" ");
                var enddte_time = enddte[4].toString().split(":");
                var strttandend = startdte_time[0] + ":" + startdte_time[1] + "-" + enddte_time[0] + ":" + enddte_time[1];  

                var rname = rms[r];
                var row = rms.indexOf(rmnm);
                var column = orderedTimes.indexOf(strttandend);               
                rmsByTimes[row][column] = 1;                 
            }

        }
    }  

    var bDate = document.getElementById("Date").innerHTML;
    var EnteredDate = moment(bDate, 'DD/MM/YYYY').format("MM/DD/YYYY");
    var EventDate = moment(startdte, 'DD/MM/YYYY').format("MM/DD/YYYY");
    var innerHtml = "<table border=1 class='display'  id='example'><thead><tr><th>Names</th><th>08:00-09:00</th><th>09:00-10:00</th><th>10:00-11:00</th><th>11:00-12:00</th><th>12:00-13:00</th><th>13:00-14:00</th><th>14:00-15:00</th><th>15:00-16:00</th><th>16:00-17:00</th><th>17:00-18:00</th></tr></thead> ";
    innerHtml += "<tbody>"
    var getrowcount = 0;     
    var cnt=0;

    for (var i = 1; i < rmsByTimes.length; i++) {  
        var resultRow = rmsByTimes[i];              
        innerHtml += "<tr><td class='rname' id="+i+"_"+j+">" + rms[i] + "</td>";
        for (var j = 0; j < resultRow.length; j++) {
            var cssClass = "alertShow";                       
            if (rmsByTimes[i][j] == 1)
            {                
                cssClass = "booked";                     
                innerHtml += "<td class='displaydata' ><span id=id_"+i+"_"+j+" class='" + cssClass + "' draggable='true'></span></td>";
            }
            else
            {
                cssClass = "alertShow";
                innerHtml += "<td class='" + cssClass + "' id="+i+"_"+j+"></td>";
            }
        }
        innerHtml += "</tr>";

    }

    innerHtml += "</tbody></table>";

    $("#content").html(innerHtml);
}


Output
enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.