From 96002c8c8f1567ce9ca3b8a003371b06830f4270 Mon Sep 17 00:00:00 2001 From: Bart Visscher Date: Thu, 20 Oct 2011 22:18:17 +0200 Subject: [PATCH] Implement listview for fullcalendar --- apps/calendar/ajax/events.php | 2 +- apps/calendar/css/style.css | 44 +++++ apps/calendar/index.php | 4 +- apps/calendar/js/calendar.js | 293 +++++++++++++++++++--------------- 4 files changed, 213 insertions(+), 130 deletions(-) diff --git a/apps/calendar/ajax/events.php b/apps/calendar/ajax/events.php index d2ef66a8472..8f466bee91a 100644 --- a/apps/calendar/ajax/events.php +++ b/apps/calendar/ajax/events.php @@ -32,7 +32,7 @@ foreach($events as $event) $return_event = array(); $return_event['id'] = $event['id']; $return_event['title'] = $event['summary']; - $return_event['description'] = isset($vevent->DESCRIPTION)?$vevent->DESCRIPTION:''; + $return_event['description'] = isset($vevent->DESCRIPTION)?$vevent->DESCRIPTION->value:''; $return_event['start'] = $start_dt->format('Y-m-d H:i:s'); $return_event['end'] = $end_dt->format('Y-m-d H:i:s'); $return_event['allDay'] = false; diff --git a/apps/calendar/css/style.css b/apps/calendar/css/style.css index 78d26bb99a3..e6d212ef532 100644 --- a/apps/calendar/css/style.css +++ b/apps/calendar/css/style.css @@ -55,3 +55,47 @@ button.category{margin:0 3px;} .calendar-colorpicker-color{display:inline-block;width:20px;height:20px;margin-right:2px;cursor:pointer;border:2px solid transparent;} .calendar-colorpicker-color.active{border:2px solid black;} + +.fc-list-table +{ + margin: 10px; + border-style: hidden; + border-width: 10px; + padding: 10px; + vertical-align: top; + width: 100%; +} +.fc-list-table tr:hover +{ + color: #0000FF; + background-color: #CCFFCC; +} + + +.fc-list-date +{ + margin: 16px; + white-space: nowrap; + text-align: left; + width: 100%; + background-color: #808080; + color: #FFFFFF; + font-weight: bold; + font-family: Arial, Helvetica, sans-serif; +} +.fc-list-time +{ + text-align: center; + white-space: nowrap; + width: 1%; +} + +.fc-list-event +{ + text-align: left; +} + +.fc-list-event .fc-event-title +{ + cursor: pointer; +} diff --git a/apps/calendar/index.php b/apps/calendar/index.php index eba04100ce6..7150fb8490e 100644 --- a/apps/calendar/index.php +++ b/apps/calendar/index.php @@ -19,12 +19,12 @@ $eventSources = array(); foreach($calendars as $calendar){ $eventSources[] = OC_Calendar_Calendar::getEventSourceInfo($calendar); } +OC_Util::addScript('3rdparty/fullcalendar', 'fullcalendar'); +OC_Util::addStyle('3rdparty/fullcalendar', 'fullcalendar'); OC_Util::addScript('calendar', 'calendar'); OC_Util::addStyle('calendar', 'style'); OC_Util::addScript('', 'jquery.multiselect'); OC_Util::addStyle('', 'jquery.multiselect'); -OC_Util::addScript('3rdparty/fullcalendar', 'fullcalendar'); -OC_Util::addStyle('3rdparty/fullcalendar', 'fullcalendar'); OC_App::setActiveNavigationEntry('calendar_index'); $tmpl = new OC_Template('calendar', 'calendar', 'user'); $tmpl->assign('eventSources', $eventSources); diff --git a/apps/calendar/js/calendar.js b/apps/calendar/js/calendar.js index 000c0136873..8c30b1156ee 100644 --- a/apps/calendar/js/calendar.js +++ b/apps/calendar/js/calendar.js @@ -8,71 +8,7 @@ Calendar={ space:' ', - firstdayofweek: '', UI:{ - drageventid: '', - loadEvents:function(year){ - }, - getEventsForDate:function(date){ - var day = date.getDate(); - var month = date.getMonth(); - var year = date.getFullYear(); - if( typeof (this.events[year]) == "undefined") { - this.loadEvents(year); - return false; - } - if( typeof (this.events[year][month]) == "undefined") { - return false; - } - if( typeof (this.events[year][month][day]) == "undefined") { - return false; - } - return this.events[year][month][day]; - }, - createEventsForDate:function(date, week){ - events = this.getEventsForDate(date); - if (!events) { - return; - } - var weekday = (date.getDay()+7-Calendar.firstdayofweek)%7; - if( typeof (events["allday"]) != "undefined") { - var eventnumber = 1; - var eventcontainer = this.current.getEventContainer(week, weekday, "allday"); - while( typeof (events["allday"][eventnumber]) != "undefined") { - this.addEventLabel(eventcontainer, events['allday'][eventnumber]); - eventnumber++; - } - } - for(var time = 0; time <= 23; time++) { - if( typeof (events[time]) != "undefined") { - var eventnumber = 1; - var eventcontainer = this.current.getEventContainer(week, weekday, time); - while( typeof (events[time][eventnumber]) != "undefined") { - this.addEventLabel(eventcontainer, events[time][eventnumber]); - eventnumber++; - } - } - } - }, - addEventLabel:function(eventcontainer, event){ - var event_holder = this.current.createEventLabel(event) - .addClass('event') - .data('event_info', event) - .hover(this.createEventPopup, - this.hideEventPopup) - .draggable({ - drag: function() { - Calendar.UI.drageventid = event.id; - } - }) - .click(this.editEvent); - var color = this.calendars[event['calendarid']]['color']; - if (color){ - event_holder.css('background-color', color) - .addClass('colored'); - } - eventcontainer.append(event_holder); - }, startEventDialog:function(){ Calendar.UI.lockTime(); $( "#from" ).datepicker({ @@ -232,6 +168,7 @@ Calendar={ var timespan = $.fullCalendar.formatDates(event.start, event.end, t('calendar', "MMMM d[ yyyy]{ '—'[ MMMM][ d] yyyy}")); }else{ var timespan = $.fullCalendar.formatDates(event.start, event.end, t('calendar', "HH:mm[ MMMM d yyyy]{ '—' HH:mm MMMM d yyyy}")); + // Tue 18 October 2011 08:00 - 16:00 } return '' + timespan + '' + ' ' @@ -400,75 +337,172 @@ Calendar={ left: -10000 }); } - }, - List:{ - removeEvents:function(){ - this.eventContainer = $('#listview #events').empty(); - this.startdate = new Date(); - this.enddate = new Date(); - this.enddate.setDate(this.enddate.getDate()); - }, - showEvents:function(){ - this.renderMoreBefore(); - this.renderMoreAfter(); - }, - formatDate:function(date){ - return Calendar.UI.formatDayShort(date.getDay()) - + Calendar.space - + date.getDate() - + Calendar.space - + Calendar.UI.formatMonthShort(date.getMonth()) - + Calendar.space - + date.getFullYear(); - }, - createDay:function(date) { - return $(document.createElement('div')) - .addClass('day') - .html(this.formatDate(date)); - }, - renderMoreBefore:function(){ - var date = Calendar.UI.List.startdate; - for(var i = 0; i <= 13; i++) { - if (Calendar.UI.getEventsForDate(date)) { - Calendar.UI.List.dayContainer=Calendar.UI.List.createDay(date); - Calendar.UI.createEventsForDate(date, 0); - Calendar.UI.List.eventContainer.prepend(Calendar.UI.List.dayContainer); - } - date.setDate(date.getDate()-1); + } + } +} +$.fullCalendar.views.list = ListView; +function ListView(element, calendar) { + var t = this; + + // imports + jQuery.fullCalendar.views.month.call(t, element, calendar); + var opt = t.opt; + var trigger = t.trigger; + var eventElementHandlers = t.eventElementHandlers; + var reportEventElement = t.reportEventElement; + var formatDate = calendar.formatDate; + var formatDates = calendar.formatDates; + var addDays = $.fullCalendar.addDays; + var cloneDate = $.fullCalendar.cloneDate; + function skipWeekend(date, inc, excl) { + inc = inc || 1; + while (!date.getDay() || (excl && date.getDay()==1 || !excl && date.getDay()==6)) { + addDays(date, inc); + } + return date; + } + + // overrides + t.name='list'; + t.render=render; + t.renderEvents=renderEvents; + t.setHeight=setHeight; + t.setWidth=setWidth; + t.clearEvents=clearEvents; + + function setHeight(height, dateChanged) { + } + + function setWidth(width) { + } + + function clearEvents() { + this.reportEventClear(); + } + + // main + function sortEvent(a, b) { + return a.start - b.start; + } + + function render(date, delta) { + if (!t.start){ + t.start = addDays(cloneDate(date, true), -7); + t.end = addDays(cloneDate(date, true), 7); + } + if (delta) { + if (delta < 0){ + addDays(t.start, -7); + if (!opt('weekends')) { + skipWeekend(t.start, delta < 0 ? -1 : 1); } - var start = Calendar.UI.List.formatDate(date); - $('#listview #more_before').html(String(Calendar.UI.more_before).replace('{startdate}', start)); - }, - renderMoreAfter:function(){ - var date = Calendar.UI.List.enddate; - for(var i = 0; i <= 13; i++) { - if (Calendar.UI.getEventsForDate(date)) { - Calendar.UI.List.dayContainer=Calendar.UI.List.createDay(date); - Calendar.UI.createEventsForDate(date, 0); - Calendar.UI.List.eventContainer.append(Calendar.UI.List.dayContainer); - } - date.setDate(date.getDate()+1); + }else{ + addDays(t.end, 7); + if (!opt('weekends')) { + skipWeekend(t.end, delta < 0 ? -1 : 1); } - var end = Calendar.UI.List.formatDate(date); - $('#listview #more_after').html(String(Calendar.UI.more_after).replace('{enddate}', end)); - }, - getEventContainer:function(week, weekday, when){ - return this.dayContainer; - }, - createEventLabel:function(event){ - var time = ''; - if (!event['allday']){ - time = Calendar.UI.formatTime(event['startdate']) + ' - ' + Calendar.UI.formatTime(event['enddate']) + ' '; + } + } + t.title = formatDates( + t.start, + t.end, + opt('titleFormat', 'week') + ); + t.visStart = cloneDate(t.start); + t.visEnd = cloneDate(t.end); + } + + function eventsOfThisDay(events, theDate) { + var start = cloneDate(theDate, true); + var end = addDays(cloneDate(start), 1); + var retArr = new Array(); + for (i in events) { + var event_end = t.eventEnd(events[i]); + if (events[i].start < end && event_end >= start) { + retArr.push(events[i]); + } + } + return retArr; + } + + function renderEvent(event) { + if (event.allDay) { //all day event + var time = opt('allDayText'); + } + else { + var time = formatDates(event.start, event.end, opt('timeFormat', 'agenda')); + } + var classes = ['fc-event', 'fc-list-event']; + classes = classes.concat(event.className); + if (event.source) { + classes = classes.concat(event.source.className || []); + } + var html = '' + + ' ' + + '' + + time + + '' + + ' ' + + '' + + '' + + '' + + event.title + + '' + + '' + + '' + + ''; + return html; + } + + function renderDay(date, events) { + var dayRows = $('' + + '' + + '' + + formatDate(date, opt('titleFormat', 'day')) + + '' + + '' + + ''); + for (i in events) { + var event = events[i]; + var eventElement = $(renderEvent(event)); + triggerRes = trigger('eventRender', event, event, eventElement); + if (triggerRes === false) { + eventElement.remove(); + }else{ + if (triggerRes && triggerRes !== true) { + eventElement.remove(); + eventElement = $(triggerRes); } - return $(document.createElement('p')) - .html(time + event['description']) - }, + $.merge(dayRows, eventElement); + eventElementHandlers(event, eventElement); + reportEventElement(event, eventElement); + } } + return dayRows; + } + + function renderEvents(events, modifiedEventId) { + events = events.sort(sortEvent); + + var table = $('
'); + var total = events.length; + if (total > 0) { + var date = cloneDate(t.visStart); + while (date <= t.visEnd) { + var dayEvents = eventsOfThisDay(events, date); + if (dayEvents.length > 0) { + table.append(renderDay(date, dayEvents)); + } + date=addDays(date, 1); + } + } + + this.element.html(table); } } $(document).ready(function(){ - $('#listview #more_before').click(Calendar.UI.List.renderMoreBefore); - $('#listview #more_after').click(Calendar.UI.List.renderMoreAfter); Calendar.UI.initscroll(); $('#calendar_holder').fullCalendar({ header: false, @@ -479,6 +513,9 @@ $(document).ready(function(){ agenda: 'HH:mm{ - HH:mm}', '': 'HH:mm' }, + titleFormat: { + list: 'yyyy/MMM/d dddd' + }, axisFormat: 'HH:mm', monthNames: monthNames, monthNamesShort: monthNamesShort, @@ -503,7 +540,9 @@ $(document).ready(function(){ $('#onemonthview_radio').click(function(){ $('#calendar_holder').fullCalendar('changeView', 'month'); }); - //$('#listview_radio').click(); + $('#listview_radio').click(function(){ + $('#calendar_holder').fullCalendar('changeView', 'list'); + }); $('#today_input').click(function(){ $('#calendar_holder').fullCalendar('today'); }); -- 2.39.5