It is now possible to print the calendar as a list, dayView or weekView

UI/Scheduler/English.lproj/Localizable.strings

@@ -149,7 +149,6 @@
 "LIST" = "List";
 "DAY" = "Daily";
 "WEEK" = "Weekly";
-"MONTH" = "Monthly";
 "Print Settings" = "Print Settings";
 "Title:" = "Title:";
 "Layout:" = "Layout:";

UI/Scheduler/UIxCalViewPrint.m

@@ -33,7 +33,7 @@ static NSArray *layoutItems = nil;
 {
   if (!layoutItems)
   {
-    layoutItems = [NSArray arrayWithObjects: @"LIST", @"DAY", @"WEEK", @"MONTH", nil];
+    layoutItems = [NSArray arrayWithObjects: @"LIST", @"DAY", @"WEEK", nil];
     [layoutItems retain];
   }
 

UI/WebServerResources/UIxCalViewPrint.css

@@ -6,44 +6,21 @@ BODY
   bottom: 1em;
   right: 1em;
   left: 1em;
-  overflow:scroll;
+  overflow:auto;
 }
 
 .toolbar
 { display:none;}
 
-DIV#rightSide
-{
-  position: absolute;
-  left:230px;
-  height:370px;
-  width:660px;
-}
-  DIV#rightFrame
-  {
-    min-height:350px;
-    max-height:350px;
-    background-color:#FFFFFF;
-    border-radius:8px;
-    border-top: 1px solid #909090;
-    border-left: 1px solid #909090;
-    border-bottom: 1px solid #FFFFFF;
-    border-right: 1px solid #FFFFFF;
-    margin-top: 12px;
-    margin-left: auto;
-    margin-right: auto;
-    margin-bottom: 1em;
-    padding-left:10px;
-    padding-right:10px;
-    overflow-y:scroll;
-    overflow-x:hidden;
-  }
-
 DIV#leftSide
 {
   position: absolute;
-  height:370px;
+  top:0;
-  width:220px;
+  bottom:0;
+  left:0;
+  right:0;
+  max-width:220px;
+  overflow-y:auto;
 }
 
 DIV.colorBox
@@ -86,6 +63,12 @@ TABLE#eventsList .colorBox
 /************************/
 /******  Buttons ********/
 
+#printButtons {
+  position:absolute;
+  bottom:0;
+  right:0;
+}
+
 #printButton
 {
   font-weight:bold;
@@ -101,14 +84,6 @@ TABLE#eventsList .colorBox
   margin-top:4px;
   margin-bottom:4px;
 }
-.eventsPreview
-{
-
-}
-
-#rightFrameEvents{
-
-}
 
 .overdueTasks {
   color:red;
@@ -121,6 +96,80 @@ TABLE#eventsList .colorBox
   text-indent:20px;
 }
 
+DIV#rightSide
+{
+  position: absolute;
+  left:230px;
+  top:0;
+  bottom:0;
+  right:0;
+}
+  DIV#rightFrame
+  {
+    position:absolute;
+    right:0;
+    left:0;
+    top:12px;
+    bottom:30px;
+    background-color:#FFFFFF;
+    border-radius:5px;
+    border-top: 1px solid #909090;
+    border-left: 1px solid #909090;
+    border-bottom: 1px solid #FFFFFF;
+    border-right: 1px solid #FFFFFF;
+    padding-left:5px;
+    padding-right:5px;
+    overflow-y:auto;
+  }
+    #rightFrameEvents{
+    }
+
+    #rightFrameTasks{
+    }
+    
+    
+/***********************************************/
+/******  Overriding the SchedulerUI.css ********/
+
+DIV#calendarHeader {
+  position:relative;
+  top:0;
+  height:70px;
+}
+
+DIV#calendarHeader DIV.dayLabels {
+  position:relative;
+  width:93%;
+  display:flex;
+}
+
+DIV#daysView {
+  position:relative;
+  top:0;
+}
+
+DIV#daysView DIV.days {
+  display:flex;
+}
+
+DIV#daysView DIV.day0,
+DIV#daysView DIV.day1,
+DIV#daysView DIV.day2,
+DIV#daysView DIV.day3,
+DIV#daysView DIV.day4,
+DIV#daysView DIV.day5,
+DIV#daysView DIV.day6 {
+  position:relative;
+  left:0;
+  display:inline-block;
+}
+
+DIV.event{
+  z-index:1;
+  border:solid black 2px;
+  background-color:white;
+  border-radius:5px;
+}
 
 /*******************************************/
 /******  Overriding the general.css ********/
@@ -152,11 +201,16 @@ SPAN.caption
   }
   DIV#rightSide
   {
-    position:absolute;
+    position:relative;
     top:5px;
     left:5px;
     width:100%;
-    height:100%;
+    height:auto;
+  }
+  DIV#rightFrame, DIV#rightFrameEvents, DIV#rightFrameTasks
+  {
+    width:100%;
+    height:auto;
   }
   DIV#rightFrame
   {

UI/WebServerResources/UIxCalViewPrint.js

@@ -29,6 +29,7 @@ var printCompletedTasks=1;
 var printNoDueDateTasks=1;
 var eventsBlocks;
 var currentView;
+var currentDay = window.parentvar("currentDay");
 var sd, ed;
 
 /******************************************* Ajust Window position from his size ***********************************************************/
@@ -41,13 +42,53 @@ function ajustWindow(width, height) {
 
 /****************************************** Ajax Requests, callbacks & events/tasks drawings ***************************************************/
 
-function refreshCalendarDisplay() {
+function refreshContent() {
-    refreshCalendarEvents();
+    refreshEvents(); // Get the eventBlocks and draw them
-    refreshCalendarTasks();
+    refreshTasks();  // Get the taskLists and draw them
 }
 
-function updatePreviewDisplay() {
+function updateDisplayView(data, newView) {
-  var url = ApplicationBaseURL + "/" + currentView;
+  newView = ((newView) ? newView : currentView);
+  var url = ApplicationBaseURL + "/" + newView;
+  var day = null;
+  
+  if (data) {
+    day = data['day'];
+  }
+  if (!day)
+    day = currentDay;
+  
+  if (day) {
+    if (data) {
+      var dayDiv = $("day"+day);
+      if (dayDiv) {
+        // Don't reload the view if the event is present in current view
+        
+        // Deselect day in date selector
+        if (document.selectedDate)
+          document.selectedDate.deselect();
+        
+        // Select day in date selector
+        var selectedLink = $$('table#dateSelectorTable span[day='+day+']');
+        if (selectedLink.length > 0) {
+          selectedCell = selectedLink[0].getParentWithTagName("td");
+          $(selectedCell).selectElement();
+          document.selectedDate = selectedCell;
+        } else
+          document.selectedDate = null;
+
+        setSelectedDayDate(day);
+        
+        return false;
+      }
+      else if (day.length == 6) {
+        day += "01";
+      }
+    }
+    url += "?day=" + day;
+  }
+  
+  selectedCalendarCell = null;
 
   if (document.dayDisplayAjaxRequest) {
     document.dayDisplayAjaxRequest.aborted = true;
@@ -55,29 +96,28 @@ function updatePreviewDisplay() {
   }
   document.dayDisplayAjaxRequest
   = triggerAjaxRequest(url, previewDisplayCallback,
-                       {"startDate": sd, "endDate": ed });
+                       { "view": newView,
-  
+                         "day": day});
-  return false;
 }
 
 function previewDisplayCallback(http) {
   if (http.readyState == 4
       && http.status == 200) {
-    document.dayDisplayAjaxRequest = null;
+    $("rightFrameEvents").innerHTML = http.responseText;
-    $("rightFrameEvents").update(http.responseText);
+    $("currentViewMenu").remove();
+    $("listCollapse").remove();
     
-    if ($("printLayoutList").value == "3")
+    // TODO : Month
-      _drawMonthEvents(eventsBlocks[2], eventsBlocks[0]);
+    _drawEvents(eventsBlocks[2], eventsBlocks[0]);
-    else
-      _drawCalendarEvents(eventsBlocks[2], eventsBlocks[0]);
   }
   else
     log ("calendarDisplayCallback Ajax error ("+ http.readyState + "/" + http.status + ")");
+  
+  return false;
 }
 
-function refreshCalendarEvents() {
+function refreshEvents() {
   var todayDate = new Date();
-  var currentDay = window.parentvar("currentDay");
   
   if (!currentDay)
     currentDay = todayDate.getDayString();
@@ -108,19 +148,19 @@ function refreshCalendarEvents() {
     lastMonthDate.addDays(-1);
     ed = lastMonthDate.endOfWeek().getDayString();
   }
-  if (document.refreshCalendarEventsAjaxRequest) {
+  if (document.refreshEventsAjaxRequest) {
-    document.refreshCalendarEventsAjaxRequest.aborted = true;
+    document.refreshEventsAjaxRequest.aborted = true;
-    document.refreshCalendarEventsAjaxRequest.abort();
+    document.refreshEventsAjaxRequest.abort();
   }
   var url = (ApplicationBaseURL + "/eventsblocks?sd=" + sd + "&ed=" + ed
              + "&view=" + currentView);
   
-  document.refreshCalendarEventsAjaxRequest
+  document.refreshEventsAjaxRequest
-  = triggerAjaxRequest(url, refreshCalendarEventsCallback,
+  = triggerAjaxRequest(url, refreshEventsCallback,
                        {"startDate": sd, "endDate": ed});
 }
 
-function refreshCalendarTasks(){
+function refreshTasks(){
   if (document.tasksListAjaxRequest) {
     document.tasksListAjaxRequest.aborted = true;
     document.tasksListAjaxRequest.abort();
@@ -136,19 +176,19 @@ function refreshCalendarTasks(){
   else
     selectedIds = null;
   
-  document.tasksListAjaxRequest = triggerAjaxRequest(url, refreshCalendarTasksListCallback, selectedIds);
+  document.tasksListAjaxRequest = triggerAjaxRequest(url, refreshTasksListCallback, selectedIds);
 }
 
-function refreshCalendarEventsCallback(http) {
+function refreshEventsCallback(http) {
   if (http.readyState == 4
       && http.status == 200) {
     if (http.responseText.length > 0) {
       eventsBlocks = http.responseText.evalJSON(true);
       $("rightFrameEvents").innerHTML = "";
       if ($("printLayoutList").value == "0")
-        _drawEventsCells();
+        _drawEventsCells(eventsBlocks);
       else {
-        updatePreviewDisplay();
+        updateDisplayView(null, currentView);
       }
     }
   }
@@ -156,7 +196,7 @@ function refreshCalendarEventsCallback(http) {
     log("AJAX error when refreshing calendar events");
 }
 
-function refreshCalendarTasksListCallback(http) {
+function refreshTasksListCallback(http) {
   if (http.readyState == 4
       && http.status == 200) {
     if (http.responseText.length > 0) {
@@ -173,7 +213,7 @@ function refreshCalendarTasksListCallback(http) {
     log("AJAX error when refreshing calendar events");
 }
 
-function _drawEventsCells() {
+function _drawEventsCells(eventsBlocks) {
   for(var i=0; i < eventsBlocks[0].length; i++)
   {
     var event = _parseEvent(eventsBlocks[0][i]);
@@ -204,7 +244,7 @@ function _drawTasksList(tasksBlocks) {
   $("rightFrameTasks").innerHTML = tasksList;
 }
 
-function _drawCalendarEvents(events, eventsData) {
+function _drawEvents(events, eventsData) {
   var daysView = $("daysView");
   var subdivs = daysView.childNodesWithTag("div");
   for (var i = 0; i < subdivs.length; i++) {
@@ -223,29 +263,120 @@ function _drawCalendarEvents(events, eventsData) {
     }
   }
 }
+// todo : month
 
-function _drawMonthEvents(events, eventsData) {
+function newEventDIV(eventRep, event) {
-  var daysView = $("monthDaysView");
+  var eventCell = newBaseEventDIV(eventRep, event, event[4]);
-  var days = daysView.childNodesWithTag("div");
+  
-  for (var i = 0; i < days.length; i++) {
+  var pc = 100 / eventRep.siblings;
-    var parentDiv = days[i];
+  var left = Math.floor(eventRep.position * pc);
-    for (var j = 0; j < events[i].length; j++) {
+  eventCell.style.left = left + "%";
-      var eventRep = events[i][j];
+  var right = Math.floor(100 - (eventRep.position + 1) * pc);
-      var nbr = eventRep.nbr;
+  eventCell.style.right = right + "%";
-      var eventCell = newMonthEventDIV(eventRep, eventsData[nbr]);
+  eventCell.addClassName("starts" + eventRep.start);
-      parentDiv.innerHTML += eventCell;
+  eventCell.addClassName("lasts" + eventRep.length);
-    }
+  
-  }
+  if (event[7]) {
+    var inside = eventCell.childNodesWithTag("div")[0];
+    var textDiv = inside.childNodesWithTag("div")[1];
+    textDiv.appendChild(createElement("br"));
+    var span = createElement("span", null, "location");
+    var text = _("Location:") + " " + event[7];
+    span.update(text);
+    textDiv.appendChild(span);
   }
   
-function newMonthEventDIV(eventRep, event) {
+  return eventCell;
-  var eventText;
+}
-  if (event[8]) // all-day event
-    eventText = event[4];
-  else
-    eventText = "<span>" + eventRep.starthour + " - " + event[4] + "</span>";
 
-  return eventText;
+function newBaseEventDIV(eventRep, event, eventText) {
+  //	log ("0 cname = " + event[0]);
+  //	log ("1 calendar = " + event[1]);
+  //  log ("2 calendar name = " + event[2]);
+  //	log ("3 status = " + event[3]);
+  //	log ("4 title = " + event[4]);
+  //	log ("5 start = " + event[5]);
+  //	log ("6 end = " + event[6]);
+  //	log ("7 location = " + event[7]);
+  //	log ("8 isallday = " + event[8]);
+  //	log ("9 classification = " + event[9]); // 0 = public, 1 = private, 2 = confidential
+  //	log ("10 category = " + event[10]);
+  //	log ("11 participants emails = " + event[11]);
+  //	log ("12 participants states = " + event[12]);
+  //	log ("13 owner = " + event[13]);
+  //	log ("14 iscycle = " + event[14]);
+  //	log ("15 nextalarm = " + event[15]);
+  //	log ("16 recurrenceid = " + event[16]);
+  //	log ("17 isexception = " + event[17]);
+  //  log ("18 editable = " + event[18]);
+  //  log ("19 erasable = " + event[19]);
+  //  log ("20 ownerisorganizer = " + event[20]);
+  
+  var eventCell = createElement("div");
+  eventCell.cname = event[0];
+  eventCell.calendar = event[1];
+  var startDate = new Date(event[5]*1000);
+  if (startDate) {
+    eventCell.startDate = event[5];
+    eventCell.writeAttribute('day', startDate.getDayString());
+    eventCell.writeAttribute('hour', event[8]? 'allday' : startDate.getHourString());
+  }
+  //    if (event[8] == 1)
+  //        eventCell.addClassName("private");
+  //    else if (event[8] == 2)
+  //        eventCell.addClassName("confidential");
+  if (eventRep.recurrenceTime)
+    eventCell.recurrenceTime = eventRep.recurrenceTime;
+  //eventCell.owner = event[12];
+  eventCell.isException = event[17];
+  eventCell.editable = event[18];
+  eventCell.erasable = event[19] || IsSuperUser;
+  eventCell.ownerIsOrganizer = event[20];
+  eventCell.addClassName("event");
+  //    if (event[14] > 0)
+  //        eventCell.addClassName("alarm");
+  
+  var innerDiv = createElement("div");
+  eventCell.appendChild(innerDiv);
+  innerDiv.addClassName("eventInside");
+  innerDiv.addClassName("calendarFolder" + event[1]);
+  if (eventRep.userState >= 0 && userStates[eventRep.userState])
+    innerDiv.addClassName(userStates[eventRep.userState]);
+  
+  var gradientDiv = createElement("div");
+  innerDiv.appendChild(gradientDiv);
+  gradientDiv.addClassName("gradient");
+  
+  var gradientImg = createElement("img");
+  gradientDiv.appendChild(gradientImg);
+  gradientImg.src = ResourcesURL + "/event-gradient.png";
+  
+  var textDiv = createElement("div");
+  innerDiv.appendChild(textDiv);
+  textDiv.addClassName("text");
+  var iconSpan = createElement("span", null, "icons");
+  textDiv.update(eventText.replace(/(\\r)?\\n/g, "<BR/>"));
+  textDiv.appendChild(iconSpan);
+  
+  // Add alarm and classification icons
+  if (event[9] == 1)
+    createElement("img", null, null, {src: ResourcesURL + "/private.png"}, null, iconSpan);
+  else if (event[9] == 2)
+    createElement("img", null, null, {src: ResourcesURL + "/confidential.png"}, null, iconSpan);
+  if (event[15] > 0)
+    createElement("img", null, null, {src: ResourcesURL + "/alarm.png"}, null, iconSpan);
+  
+  if (event[10] != null) {
+    var category = event[10].decodeEntities();
+    var categoryStyle = categoriesStyles.get(category);
+    if (!categoryStyle) {
+      categoryStyle = 'category_' + categoriesStyles.keys().length;
+      categoriesStyles.set([category], categoryStyle);
+    }
+    innerDiv.addClassName(categoryStyle);
+  }
+  
+  return eventCell;
 }
 
 function _parseEvent(event) {
@@ -289,6 +420,62 @@ function _parseTask(task) {
   return parsedTask;
 }
 
+/************************************** Preview Navigation *****************************************/
+
+function onCalendarGotoDay(node) {
+  var day = node.getAttribute("date");
+  var needRefresh = (listFilter == 'view_selectedday' && day != currentDay);
+  
+  changeDateSelectorDisplay(day);
+  updateDisplayView({ "day": day });
+  refreshEvents();
+  
+  return false;
+}
+
+function changeDateSelectorDisplay(day, keepCurrentDay) {
+  var url = ApplicationBaseURL + "/dateselector";
+  if (day) {
+    if (day.length < 8)
+      day += "01";
+    url += "?day=" + day;
+  }
+  
+  if (!keepCurrentDay)
+    currentDay = day;
+  
+  var month = day.substr(0, 6);
+  if (cachedDateSelectors[month]) {
+    //       log ("restoring cached selector for month: " + month);
+    setDateSelectorContent(cachedDateSelectors[month]);
+  }
+  else {
+    //       log ("loading selector for month: " + month);
+    if (document.dateSelectorAjaxRequest) {
+      document.dateSelectorAjaxRequest.aborted = true;
+      document.dateSelectorAjaxRequest.abort();
+    }
+    document.dateSelectorAjaxRequest
+    = triggerAjaxRequest(url,
+                         dateSelectorCallback,
+                         month);
+  }
+}
+
+function dateSelectorCallback(http) {
+  if (http.readyState == 4
+      && http.status == 200) {
+    document.dateSelectorAjaxRequest = null;
+    var content = http.responseText;
+    setDateSelectorContent(content);
+    cachedDateSelectors[http.callbackData] = content;
+  }
+  else
+    log ("dateSelectorCallback Ajax error");
+  
+  return false;
+}
+
 /*********************** Input Field, Checkboxes, Radio and listMenu *********************************/
 
 function onInputTitleChange(event){
@@ -306,33 +493,25 @@ function onPrintLayoutListChange() {
     case "0": // List view
       window.resizeTo(660,500);
       ajustWindow(660,500);
-      $("rightSide").style.width = "390px";
       currentView = parentView;
       break;
       
     case "1": // Day view
       window.resizeTo(660,500);
       ajustWindow(660,500);
-      $("rightSide").style.width = "390px";
       currentView = "dayview";
       break;
       
     case "2": // Week view
       window.resizeTo(1010,500);
       ajustWindow(1010,500);
-      $("rightSide").style.width = "740px";
       currentView = "weekview";
       break;
       
-    case "3": // Month view
+      //todo : month
-      window.resizeTo(1010,500);
-      ajustWindow(1010,500);
-      $("rightSide").style.width = "740px";
-      currentView = "monthview";
-      break;
   }
   
-  refreshCalendarDisplay();
+  refreshContent();
 }
 
 function onEventsCheck(checkBox) {
@@ -364,17 +543,17 @@ function onPrintDateCheck() {
 function onDisplayTimeFormatCheck(){
   var radioTimeFormat = document.getElementsByName("printTimeFormat");
   displayTime = (radioTimeFormat[0].checked ? true : false);
-  refreshCalendarDisplay();
+  refreshContent();
 }
 
 function onPrintCompletedTasksCheck(checkBox) {
   printCompletedTasks = (checkBox.checked ? 1 : 0);
-  refreshCalendarTasks();
+  refreshTasks();
 }
 
 function onPrintNoDueDateTasksCheck(checkBox) {
   printNoDueDateTasks = (checkBox.checked ? 1 : 0);
-  refreshCalendarTasks();
+  refreshTasks();
 }
 
 /************** Date picker functions *************/