2

am trying to fetch all single day event from SharePoint calendar list and want to display all these single date's events into the single row of html table inside based on appropriate condition i tried something 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("MyList"); 
function retrieveBookingDetails(Date) { 
var query = new SP.CamlQuery(); 
query.set_viewXml('<View><Where><eq><FieldRef Name=\'EventDate\'/><Value Type=\'DateTime\'IncludeTimeValue=\'FALSE\' >' + Date + '</Value></eq>" + "</Where></View>'); 
var items = myList.getItems(query); 
ctx.load(items); 
//ctx.load(myList); 
ctx.executeQueryAsync(onQuerySucceeded, onQueryFailed); 
function onQuerySucceeded() { 
retrieveItems(items); 
} 
function onQueryFailed(sender, args) { 
alert('Request failed. ' + args.get_message() + 
'\n' + args.get_stackTrace()); 
} 
} 
function retrieveItems(items) { 
var enumerator = items.getEnumerator(); 
var innerHtml = "<table border=1 class='display nowrap dataTable dtr-inline'><thead><tr><th> Class Name</th><th>8:00-9:00</th><th>9:00-10:00</th><th>10:00-11:00</th><th>11:00-12:00</th><th>12:00-13:00</th></tr></thead> "; 
var count = 0; 
var count = items.get_count(); 
var rowcount = myList.get_itemCount(); 
var rows = 0; 
var strttandend; 
innerHtml += "<tbody>" 
//do label:{ 
while (enumerator.moveNext()) { 
var currentListItem = enumerator.get_current(); 
innerHtml += "<tr><td class=classname id=" + currentListItem.get_item('ID') + ">" + currentListItem.get_item('RName') + "</td>"; 
for (var c = 1; c <= 5; c++) { 
var startdte = currentListItem.get_item('EventDate').toString().split(" "); 
var startdte_time = startdte[4].toString().split(":"); 
var enddte = currentListItem.get_item('EndDate').toString().split(" "); 
var enddte_time = enddte[4].toString().split(":"); 
strttandend = startdte_time[0] + ":" + startdte_time[1] + "-" + enddte_time[0] + ":" + enddte_time[1]; 
switch (c) { 
case 1: if (strttandend === "08:00-09:00") { 
innerHtml += "<td class='alertShow held'></td>" 
break; 
} 
else { 
innerHtml += "<td class='alertShow'></td>" 
} 
break; 
case 2: if (strttandend === "09:00-10:00") { 
innerHtml += "<td class='alertShow held 
} 
else { 
innerHtml += "<td class='alertShow'></td>" 
} 
break; 
case 3: if (strttandend === "10:00-11:00") { 
innerHtml += "<td class='alertShow held'></td>" 
} 
else { 
innerHtml += "<td class='alertShow '></td>" 
} 
break; 
case 4: if (strttandend === "11:00-12:00") { 
innerHtml += "<td class='alertShow held'></td>" 
} 
else { 
innerHtml += "<td class='alertShow'></td>" 
} 
break; 
case 5: if (strttandend === "12:00-13:00") { 
innerHtml += "<td class='alertShow held'></td>" 
} 
else { 
innerHtml += "<td class='alertShow'></td>" 
} 
break; 
} 

} 
innerHtml += "</tbody>"; 
} 
//}while(!count) 
$("#Data1").html(innerHtml); 
}


Output of above code(current and expected) are as per bellow snippet
enter image description here

  • Please add the error or wrong behaviour you are seeing to your question so we can troubleshoot. – NiceNix Aug 29 '16 at 12:51
  • updated question please check – Madhav Aug 29 '16 at 13:02
  • This has nothing to do with SharePoint and all with building HTML from a datastructure. You first have to process all items into a single data entity PER room, you then loop this/your own datastructure and create the HTML – Danny '365CSI' Engelman Aug 29 '16 at 13:25
1

Just guessing by looking at the code, but you are adding empty table cells in your switch-case statement. You probably mean to insert text or pictures or something inside the <td></td> tags.

Edit after problem described: The problem is with the loops at the end. What you want to be doing is looping only over the listItems returned from SharePoint. Don't dynamically create a different number of table cells. Here is the pseudocode:

Create all 5 table cells (or just the CSSclass for each of them) in separate variables with no highlight as the default
loop through listitems
  If listItem matches a timeslot, set that td CSSclass to be highlighted.
endloop
add all 5 table cells to your innerhtml.

Edit 2: Here is some code to get you started. Caution - I haven't tried to run this code, I just typed it out off the top of my head ... it will require debugging on your part.

function retrieveItems(items) { 
  var orderedRooms = ["room1","room2","room3"];
  var orderedTimes = ["08:00-09:00","09:00-10:00","10:00-11:00","11:00-12:00","12:00-13:00"];
  //The roomsByTimes array each row represents a different room (room1, room2, room3, etc.) each column represents a different time (0800-0900, 0900-1000, 1000-1100, etc.)
  //If the value is zero, there is no appointment in that room at that time, if the value one there is an appointment in that room at that time.
  var roomsByTimes = [[0,0,0,0,0],
                      [0,0,0,0,0],
                      [0,0,0,0,0]];


  var enumerator = items.getEnumerator(); 

  while (enumerator.moveNext()) {
    var currentListItem = enumerator.get_current();

    //Get the time
    var startdte = currentListItem.get_item('EventDate').toString().split(" ");
    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];

    //get the room
    var rmname = currentListItem.get_item('RName');

    // set the roomsByTimes number to 1 for the correct room and time.
    var row = orderedRooms.indexOf(rmName);
    var column = orderedTimes.indexOf(strttandend);
    roomsByTimes[row][column] = 1;
  }
  //We now know every room and time whether it is held or not.

  //Set up the beginning of the table HTML including header row
  var innerHtml = "<table border=1 class='display nowrap dataTable dtr-inline'><thead><tr><th> Class Name</th><th>8:00-9:00</th><th>9:00-10:00</th><th>10:00-11:00</th><th>11:00-12:00</th><th>12:00-13:00</th></tr></thead> "; 
  innerHtml += "<tbody>" 

  //Iterate through the roomsByTimes array and generate our HTML from that.
  for(var i=0; i<roomsByTimes.length; i++){
    var resultRow = roomsByTimes[i];
    innerHtml += "<tr><td class='classname'>" + orderedRooms[i] + "</td>";
    for(var j=0; j<resultRow.length; j++) {
      var cssClass = "alertShow";
      if (roomsByTimes[i][j] == 0)
        cssClass = "alertShow held";
      innerHtml += "<td class='" + cssClass + "'></td>";
    }
    innerHtml += "</tr>";
  }

  //Set up the end of the HTML table
  innerHtml += "</tbody></table>";
}
  • i want to keep them empty and making them highlighted with some background colour – Madhav Aug 29 '16 at 13:04
  • sorry but,it's clear to me – Madhav Aug 29 '16 at 13:32
  • var roomsByTimes = [[0,0,0,0,0], [0,0,0,0,0], [0,0,0,0,0]]; you mentioned ,it stores columns value as 0 for 3 rows,right? – Madhav Aug 30 '16 at 5:16
  • Yes, that's right. – NiceNix Aug 30 '16 at 18:00
  • with this structure i want to bind the event id to to table cell as id to which we are setting this cssClass = "alertShow held"; class,need your help with that @NiceNix – Madhav Sep 7 '16 at 6:13

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.