function showEvents( description, durationnote, date ) {
  document.getElementById("calendarEvent").style.top= "250px";
  document.getElementById("calendarEvent").style.left = (pageWidth()/2)-370+"px";
  document.getElementById("calendarEvent").style.display = "block";
  document.getElementById("calendarEvent").innerHTML = "<ul><li><b>Date:</b> " + date + "</li><li><b>Event:</b> " + description + "</li><li><b>Duration:</b> " + durationnote + "</li></ul>";
}

function pageWidth() {
  return document.body.clientWidth != null 
    ? ( document.body.clientWidth -12) 
    : doucment.documentElement.clientWidth;
}

onresize = function() { 
  document.getElementById("calendarEvent").style.left = (pageWidth()/2)-370+"px";
}

function clearData() {
  document.getElementById("calendarEvent").innerHTML = "";
}