jquery - FullCalendar AllDaySlot replacement -
i'm using fc in webapp plan employeeshifts. users add slot , assign 1 or several employees slot (or themself). works charm.
now i've been asked new feature - "counter" placed in top of each day (basicweek,agendaweek,agendaday should have this).
this counter should show how many hours have been planned date , other similar information.
my problem how either add new tr in thead - 1 each day - or use alldayslot visually be. add menu top of each day in agendaweek andbasicweek using code below, i've tried add placeholder in loop, no luck.
looking forward intelligent input on :d
if (view.name === 'agendaweek' || view.name === 'basicweek') { // add "dropdowns" day headers var $headers = $('.fc-widget-header.fc-sun, .fc-widget-header.fc-mon, .fc-widget-header.fc-tue, .fc-widget-header.fc-wed, .fc-widget-header.fc-thu, .fc-widget-header.fc-fri, .fc-widget-header.fc-sat, .fc-day-header.fc-sun, .fc-day-header.fc-mon, .fc-day-header.fc-tue, .fc-day-header.fc-wed, .fc-day-header.fc-thu, .fc-day-header.fc-fri, .fc-day-header.fc-sat'); $headers.css('position', 'relative'); $headers.each( function(){ var _d = $(this).html().substring(4); $(this).prepend("<div class='topdropdown' style='position: absolute; left: 0;' onmouseover='showdaymenu(\""+ _d +"\",this);'><span class='icon12 icomoon-icon-grid-view-2'></span></div>"); var _date = $(this).attr("class").match("fc-col[0-9]")); //$(this).parent().find(".fc-widget-content").html("<div class='topcounter' style='position: absolute; left: 0;'>"+ _date +"</div>"); } ); }
edit 2013-08-14: tried add new tr thead , result was... not quite expected :) added new tr thead , inserted orange bordered div placeholder, rows below didn't "move down" - forced alter css fc ? http://img5.imageshack.us/img5/7743/31fv.png
really hope 1 of guys have answer :?
best regards,mark
this isn't direct answer question, rather work-around used accomplish same task:
in case, returned json array of elements wanted add fullcalendar start time end time title etc, needed daily hour values @ top (in day slot preferrable).
i iterated through each day within month range , added new array object event object total hours day , start time along common attribute distinguish these daily counters such vs. actual event.
when rendering events calendar, set allday true along locking them up, e.g:
{ 'title': item.summary, 'start': item.start, 'allday': true,'starteditable': false, 'description': 'counter' }
the item.summary string hour count server ("hrs: [#]").
item.start set midnight on day of counter.
this makes them non-draggable, small, , @ top of each day (regardless of view, naturally). populate array object these counter objects first ensure rendered @ top of page.
again, doesn't directly address question, allow result you're looking for.
(i spent couple of hours getting figured out/set - first stack overflow post!)
Comments
Post a Comment