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

pull/36/head
Alexandre Cloutier 2014-04-25 18:04:24 -04:00
parent f9869d19b4
commit 9dc07fccc0
4 changed files with 337 additions and 105 deletions

View File

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

View File

@ -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];
}

View File

@ -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;
width:220px;
top:0;
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,15 +201,20 @@ 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
{
border: none;
border:none;
overflow:visible;
}
}

View File

@ -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() {
refreshCalendarEvents();
refreshCalendarTasks();
function refreshContent() {
refreshEvents(); // Get the eventBlocks and draw them
refreshTasks(); // Get the taskLists and draw them
}
function updatePreviewDisplay() {
var url = ApplicationBaseURL + "/" + currentView;
function updateDisplayView(data, newView) {
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 });
return false;
{ "view": newView,
"day": day});
}
function previewDisplayCallback(http) {
if (http.readyState == 4
&& http.status == 200) {
document.dayDisplayAjaxRequest = null;
$("rightFrameEvents").update(http.responseText);
if ($("printLayoutList").value == "3")
_drawMonthEvents(eventsBlocks[2], eventsBlocks[0]);
else
_drawCalendarEvents(eventsBlocks[2], eventsBlocks[0]);
$("rightFrameEvents").innerHTML = http.responseText;
$("currentViewMenu").remove();
$("listCollapse").remove();
// TODO : Month
_drawEvents(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) {
document.refreshCalendarEventsAjaxRequest.aborted = true;
document.refreshCalendarEventsAjaxRequest.abort();
if (document.refreshEventsAjaxRequest) {
document.refreshEventsAjaxRequest.aborted = true;
document.refreshEventsAjaxRequest.abort();
}
var url = (ApplicationBaseURL + "/eventsblocks?sd=" + sd + "&ed=" + ed
+ "&view=" + currentView);
document.refreshCalendarEventsAjaxRequest
= triggerAjaxRequest(url, refreshCalendarEventsCallback,
document.refreshEventsAjaxRequest
= 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) {
var daysView = $("monthDaysView");
var days = daysView.childNodesWithTag("div");
for (var i = 0; i < days.length; i++) {
var parentDiv = days[i];
for (var j = 0; j < events[i].length; j++) {
var eventRep = events[i][j];
var nbr = eventRep.nbr;
var eventCell = newMonthEventDIV(eventRep, eventsData[nbr]);
parentDiv.innerHTML += eventCell;
}
function newEventDIV(eventRep, event) {
var eventCell = newBaseEventDIV(eventRep, event, event[4]);
var pc = 100 / eventRep.siblings;
var left = Math.floor(eventRep.position * pc);
eventCell.style.left = left + "%";
var right = Math.floor(100 - (eventRep.position + 1) * pc);
eventCell.style.right = right + "%";
eventCell.addClassName("starts" + eventRep.start);
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);
}
return eventCell;
}
function newMonthEventDIV(eventRep, event) {
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
window.resizeTo(1010,500);
ajustWindow(1010,500);
$("rightSide").style.width = "740px";
currentView = "monthview";
break;
//todo : month
}
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 *************/