My favorites | Sign in
Project Home Issues
New issue   Search
for
  Advanced search   Search tips   Subscriptions

Issue 289 attachment: listView.js (7.6 KB)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
(function() {
'strict';


var FC = $.fullCalendar, // a reference to FullCalendar's root namespace
View = FC.View, // the class that all views must inherit from
ListView; // our subclass

ListView = View.extend({ // make a subclass of View

computeRange: function(date) {
var intervalDuration = moment.duration(this.opt('duration') || this.constructor.duration || {
days: 10
});
var intervalUnit = 'day';
var intervalStart = date.clone().startOf(intervalUnit);
var intervalEnd = intervalStart.clone().add(intervalDuration);
var start, end;

// normalize the range's time-ambiguity
intervalStart.stripTime();
intervalEnd.stripTime();

start = intervalStart.clone();
start = this.skipHiddenDays(start);
end = intervalEnd.clone();
end = this.skipHiddenDays(end, -1, true); // exclusively move backwards

return {
intervalDuration: intervalDuration,
intervalUnit: intervalUnit,
intervalStart: intervalStart,
intervalEnd: intervalEnd,
start: start,
end: end
};
},

initialize: function() {
// called once when the view is instantiated, when the user switches to the view.
// initialize member variables or do other setup tasks.

View.prototype.initialize.apply(this, arguments);
},

render: function() {

// responsible for displaying the skeleton of the view within the already-defined
// this.el, a jQuery element.
View.prototype.render.apply(this, arguments);
},

computeTitle: function() {
return moment().format(this.opt('titleFormat'));
},

setHeight: function(height, isAuto) {
// responsible for adjusting the pixel-height of the view. if isAuto is true, the
// view may be its natural height, and `height` becomes merely a suggestion.
this.el.height(height);

View.prototype.setHeight.apply(this, arguments);
},

renderEvents: function(events) {
// reponsible for rendering the given Event Objects

var noDebug = true;
noDebug || console.log(events);

var eventsCopy = events.slice().reverse(); //copy and reverse so we can modify while looping

var tbody = $('<tbody></tbody>');

this.scrollerEl = this.el.addClass('fc-scroller');

this.el.html('')
.append('<table style="border: 0; width:100%"></table>').children()
.append(tbody);

var periodEnd = this.end.clone(); //clone so as to not accidentally modify

noDebug || console.log('Period start: ' + this.start.format("YYYY MM DD HH:mm:ss Z") + ', and end: ' + this.end.format("YYYY MM DD HH:mm:ss Z"));

var currentDayStart = this.start.clone();
while (currentDayStart.isBefore(periodEnd)) {

var didAddDayHeader = false;
var currentDayEnd = currentDayStart.clone().add(1, 'days');

noDebug || console.log('=== this day start: ' + currentDayStart.format("YYYY MM DD HH:mm:ss Z") + ', and end: ' + currentDayEnd.format("YYYY MM DD HH:mm:ss Z"));

//Assume events were ordered descending originally (notice we reversed them)
for (var i = eventsCopy.length - 1; i >= 0; --i) {
var e = eventsCopy[i];

var eventStart = e.start.clone();
var eventEnd = this.calendar.getEventEnd(e);

if (!noDebug) {
console.log(e.title);
console.log('event index: ' + (events.length - i - 1) + ', and in copy: ' + i);
console.log('event start: ' + eventStart.format("YYYY MM DD HH:mm:ss Z"));
console.log('event end: ' + this.calendar.getEventEnd(e).format("YYYY MM DD HH:mm:ss Z"));
console.log('currentDayEnd: ' + currentDayEnd.format("YYYY MM DD HH:mm:ss Z"));
console.log(currentDayEnd.isAfter(eventStart));
}

if (currentDayStart.isAfter(eventEnd) || (currentDayStart.isSame(eventEnd) && !eventStart.isSame(eventEnd)) || periodEnd.isBefore(eventStart)) {
eventsCopy.splice(i, 1);
noDebug || console.log("--- Removed the above event");
} else if (currentDayEnd.isAfter(eventStart)) {
//We found an event to display

noDebug || console.log("+++ We added the above event");

if (!didAddDayHeader) {
tbody.append('\
<tr class="fc-header" date="">\
<th colspan="2">\
<span class="fc-header-day">' + currentDayStart.format('dddd') + '</span>\
<span class="fc-header-date">' + currentDayStart.format(this.opt('columnFormat')) + '</span>\
</th>\
</tr>');

didAddDayHeader = true;
}

/*
<td class="fc-event-handle">\
<span class="fc-event"></span>\
</td>\
*/

var segEl = $('\
<tr class="fc-row fc-event-container fc-content">\
<td class="fc-time">' + (e.allDay ? this.opt('allDayText') : e.start.format('H:mm') + '-' + e.end.format('H:mm')) + '</td>\
<td>\
<div class="fc-title">' + e.title + '</div>\
<div class="fc-description">' + e.location + '</div>\
</td>\
</tr>');
tbody.append(segEl);

//Tried to use fullcalendar code for this stuff but to no avail
(function(_this, myEvent, mySegEl) { //temp bug fix because 'e' seems to change
segEl.on('click', function(ev) {
return _this.trigger('eventClick', mySegEl, myEvent, ev);
});
})(this, e, segEl);

}

}

currentDayStart.add(1, 'days');
}

this.updateHeight();

View.prototype.renderEvents.apply(this, arguments);
},

destroyEvents: function() {
// responsible for undoing everything in renderEvents
View.prototype.destroyEvents.apply(this, arguments);
},

renderSelection: function(range) {
// accepts a {start,end} object made of Moments, and must render the selection
View.prototype.renderSelection.apply(this, arguments);
},

destroySelection: function() {
// responsible for undoing everything in renderSelection
View.prototype.destroySelection.apply(this, arguments);
}

});

FC.views.list = ListView; // register our class with the view system

})();
Powered by Google Project Hosting