wassname/fullcalendar
1
0
Fork 0
mirror of https://github.com/wassname/fullcalendar.git synced 2026-06-27 16:10:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

working on getting the resources back on the events with the v2 changes

Browse Source
This commit is contained in:
sean kenny
2014-08-08 17:17:12 +01:00
parent 5d75e0aeba
commit f426d9db56
6 changed files with 805 additions and 528 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/EventManager.js
+7 -7
View File
@@ -515,13 +515,13 @@ function EventManager(options) { // assumed to be a calendar
out.className = [];
}
// if (event.resources) {
// if (typeof event.resources == 'string') {
// event.resources = event.resources.split(/\s+/);
// }
// }else{
// event.resources = [];
// }
if (out.resources) {
if (typeof out.resources == 'string') {
out.resources = out.resources.split(/\s+/);
}
}else{
out.resources = [];
}
out.allDay = allDay;
out.start = start;
src/common/DayEventRenderer.js
+27 -43
View File
@@ -166,60 +166,44 @@ function DayEventRenderer() {
// Generate an array of "segments" for all events.
function buildSegments(events) {
// var resources = t.getResources();
// if (typeof resources === 'undefined'){
// return buildSegmentsTEMP(events); // TEMP!
// } else {
// var segments = [];
// for (var i=0; i<resources.length; i++) {
// var resourceEvents = eventsForResource(resources[i], events);
// for (var j=0; j<resourceEvents.length; j++) {
// var eventSegments = buildSegmentsForEvent(resourceEvents[j], i);
// segments.push.apply(segments, eventSegments); // append an array to an array
// }
// }
// return segments;
// }
// }
// // TODO - move this into more generic area as is a duplicate
// //Generate an array of "segments" for all events.
// function eventsForResource(resource, events) {
// var resourceEvents = [];
// for (var i = 0; i < events.length; i++) {
// if (events[i].resources && $.inArray(resource.id, events[i].resources) >= 0) {
// resourceEvents.push(events[i])
// }
// }
// return resourceEvents;
// }
// // Generate an array of "segments" for all events.
// function buildSegmentsTEMP(events) {
var resources = t.getResources;
var segments = [];
for (var i=0; i<events.length; i++) {
var eventSegments = buildSegmentsForEvent(events[i]);
segments.push.apply(segments, eventSegments); // append an array to an array
if (typeof resources === 'undefined'){
for (var i=0; i<events.length; i++) {
var eventSegments = buildSegmentsForEvent(events[i]);
segments.push.apply(segments, eventSegments); // append an array to an array
}
} else {
for (var i=0; i<resources().length; i++) {
var resourceEvents = eventsForResource(resources()[i], events);
for (var j=0; j<resourceEvents.length; j++) {
var eventSegments = buildSegmentsForEvent(resourceEvents[j], i);
segments.push.apply(segments, eventSegments); // append an array to an array
}
}
}
return segments;
}
function eventsForResource(resource, events) {
var resourceEvents = [];
for (var i = 0; i < events.length; i++) {
if (events[i].resources && $.inArray(resource.id, events[i].resources) >= 0) {
resourceEvents.push(events[i])
}
}
return resourceEvents;
}
// Generate an array of segments for a single event.
// A "segment" is the same data structure that View.rangeToSegments produces,
// with the addition of the `event` property being set to reference the original event.
function buildSegmentsForEvent(event) { //, col) {
var segments = rangeToSegments(event.start, getEventEnd(event));
for (var i=0; i<segments.length; i++) {
//TEMP
// if (typeof col !== 'undefined'){
// segments[i].leftCol = col;
// segments[i].rightCol = col;
// }
// TEMP
segments[i].event = event;
}
return segments;
src/resource/ResourceDayView.js
+1 -1
View File
@@ -28,7 +28,7 @@ function ResourceDayView(element, calendar) { // TODO: make a DayView mixin
t.title = calendar.formatDate(t.start, t.opt('titleFormat'));
t.renderResource(getResources.length);
t.renderResource(getResources().length);
}
src/resource/ResourceEventRenderer.js
+368 -174
View File
@@ -15,25 +15,20 @@ function ResourceEventRenderer() {
var trigger = t.trigger;
var isEventDraggable = t.isEventDraggable;
var isEventResizable = t.isEventResizable;
var eventEnd = t.eventEnd;
var eventElementHandlers = t.eventElementHandlers;
var setHeight = t.setHeight;
var getDaySegmentContainer = t.getDaySegmentContainer;
var getSlotSegmentContainer = t.getSlotSegmentContainer;
var getHoverListener = t.getHoverListener;
var computeDateTop = t.computeDateTop;
var getMaxMinute = t.getMaxMinute;
var getMinMinute = t.getMinMinute;
var timePosition = t.timePosition;
var getIsCellAllDay = t.getIsCellAllDay;
var colContentLeft = t.colContentLeft;
var colContentRight = t.colContentRight;
var cellToDate = t.cellToDate;
var segmentCompare = t.segmentCompare;
var getColCnt = t.getColCnt;
var getColWidth = t.getColWidth;
var getSnapHeight = t.getSnapHeight;
var getSnapMinutes = t.getSnapMinutes;
var getSnapDuration = t.getSnapDuration;
var getSlotHeight = t.getSlotHeight;
var getSlotDuration = t.getSlotDuration;
var getSlotContainer = t.getSlotContainer;
@@ -45,11 +40,13 @@ function ResourceEventRenderer() {
var renderDayOverlay = t.renderDayOverlay;
var clearOverlays = t.clearOverlays;
var renderDayEvents = t.renderDayEvents;
var getMinTime = t.getMinTime;
var getMaxTime = t.getMaxTime;
var calendar = t.calendar;
var formatDate = calendar.formatDate;
var formatDates = calendar.formatDates;
var resources = t.getResources;
var getEventEnd = calendar.getEventEnd;
var resources = t.getResources;
// overrides
t.draggableDayEvent = draggableDayEvent;
@@ -88,101 +85,107 @@ function ResourceEventRenderer() {
function compileSlotSegs(events) {
var colCnt = getColCnt(),
minMinute = getMinMinute(),
maxMinute = getMaxMinute(),
d,
visEventEnds,
i, col,
j, level,
k, seg,
segs = [];
var colCnt = getColCnt(),
minTime = getMinTime(),
maxTime = getMaxTime(),
cellDate,
i,
j, seg,
colSegs,
segs = []; //,
//col;
//new
for (i=0; i<colCnt; i++) {
cellDate = cellToDate(0, 0); // updated
d = t.intervalStart.clone();
d.add('m', minMinute);
var resourceEvents = eventsForResource(resources()[i], events);
visEventEnds = $.map(resourceEvents, slotEventEnd);
col = stackAgendaSegs(
sliceSegs(
resourceEvents,
visEventEnds,
d,
d.clone().add('m', maxMinute-minMinute)
)
colSegs = sliceSegs(
events,
cellDate.clone().time(minTime),
cellDate.clone().time(maxTime)
);
countForwardSegs(col);
for (j=0; j<col.length; j++) {
level = col[j];
for (k=0; k<level.length; k++) {
seg = level[k];
seg.col = i;
seg.level = j;
segs.push(seg);
}
colSegs = placeSlotSegs(colSegs); // returns a new order
for (j=0; j<colSegs.length; j++) {
seg = colSegs[j];
seg.col = i;
segs.push(seg);
}
}
return segs;
}
function sliceSegs(events, visEventEnds, start, end) {
function sliceSegs(events, rangeStart, rangeEnd) {
// normalize, because all dates will be compared w/o zones
rangeStart = rangeStart.clone().stripZone();
rangeEnd = rangeEnd.clone().stripZone();
var segs = [],
i, len=events.length, event,
eventStart, eventEnd,
segStart, segEnd,
isStart, isEnd;
for (i=0; i<len; i++) {
event = events[i];
eventStart = event.start;
eventEnd = visEventEnds[i];
if (eventEnd > start && eventStart < end) {
if (eventStart < start) {
segStart = start.clone();
// get dates, make copies, then strip zone to normalize
eventStart = event.start.clone().stripZone();
eventEnd = getEventEnd(event).stripZone();
if (eventEnd > rangeStart && eventStart < rangeEnd) {
if (eventStart < rangeStart) {
segStart = rangeStart.clone();
isStart = false;
}else{
}
else {
segStart = eventStart;
isStart = true;
}
if (eventEnd > end) {
segEnd = end.clone();
if (eventEnd > rangeEnd) {
segEnd = rangeEnd.clone();
isEnd = false;
}else{
}
else {
segEnd = eventEnd;
isEnd = true;
}
segs.push({
event: event,
start: segStart,
end: segEnd,
isStart: isStart,
isEnd: isEnd,
msLength: segEnd - segStart
isEnd: isEnd
});
}
}
return segs.sort(segmentCompare);
return segs.sort(compareSlotSegs);
}
function eventsForResource(resource, events) {
var resourceEvents = [];
for (var i = 0; i < events.length; i++) {
if (events[i].resources && $.inArray(resource.id, events[i].resources) >= 0) {
resourceEvents.push(events[i]);
}
}
return resourceEvents;
}
// function eventsForResource(resource, events) {
// var resourceEvents = [];
// for (var i = 0; i < events.length; i++) {
// if (events[i].resources && $.inArray(resource.id, events[i].resources) >= 0) {
// resourceEvents.push(events[i]);
// }
// }
// return resourceEvents;
// }
function slotEventEnd(event) {
if (event.end) {
return event.end.clone();
}else{
return event.start.clone().add('m', opt('defaultEventMinutes'));
}
}
// function slotEventEnd(event) {
// if (event.end) {
// return event.end.clone();
// }else{
// return event.start.clone().add('m', opt('defaultEventMinutes'));
// }
// }
// renders events in the 'time slots' at the bottom
@@ -405,75 +408,98 @@ function ResourceEventRenderer() {
var revert;
var allDay = true;
var dayDelta;
var hoverListener = getHoverListener();
var colWidth = getColWidth();
var minTime = getMinTime();
var slotDuration = getSlotDuration();
var slotHeight = getSlotHeight();
var snapDuration = getSnapDuration();
var snapHeight = getSnapHeight();
var snapMinutes = getSnapMinutes();
var minMinute = getMinMinute();
eventElement.draggable({
opacity: opt('dragOpacity', 'month'), // use whatever the month view was using
revertDuration: opt('dragRevertDuration'),
start: function(ev, ui) {
trigger('eventDragStart', eventElement, event, ev, ui);
trigger('eventDragStart', eventElement[0], event, ev, ui);
hideEvents(event, eventElement);
origWidth = eventElement.width();
hoverListener.start(function(cell, origCell) {
clearOverlays();
if (cell) {
revert = false;
var origDate = cellToDate(0, origCell.col);
var date = cellToDate(0, cell.col);
dayDelta = date.diff(origDate, 'days');
if (!cell.row) {
// on full-days
if (!cell.row) { // on full-days
renderDayOverlay(
event.start.clone().add('d', dayDelta),
getEventEnd(event).add('d', dayDelta)
event.start.clone().add('days', dayDelta),
getEventEnd(event).add('days', dayDelta)
);
resetElement();
}else{
// mouse is over bottom slots
}
else { // mouse is over bottom slots
if (isStart) {
if (allDay) {
// convert event to temporary slot-event
eventElement.width(colWidth - 10); // don't use entire width
setOuterHeight(eventElement, calendar.defaultTimedEventDuration / slotDuration * slotHeight); // the default height
eventElement.draggable('option', 'grid', [colWidth, 1]);
eventElement.draggable('option', 'grid', [ colWidth, 1 ]);
allDay = false;
}
}else{
}
else {
revert = true;
}
}
revert = revert || (allDay && !dayDelta);
}else{
}
else {
resetElement();
revert = true;
}
eventElement.draggable('option', 'revert', revert);
}, ev, 'drag');
},
stop: function(ev, ui) {
hoverListener.stop();
clearOverlays();
trigger('eventDragStop', eventElement, event, ev, ui);
if (revert) {
// hasn't moved or is out of bounds (draggable has already reverted)
trigger('eventDragStop', eventElement[0], event, ev, ui);
if (revert) { // hasn't moved or is out of bounds (draggable has already reverted)
resetElement();
eventElement.css('filter', ''); // clear IE opacity side-effects
showEvents(event, eventElement);
}else{
// changed!
var minuteDelta = 0;
}
else { // changed!
var eventStart = event.start.clone().add('days', dayDelta); // already assumed to have a stripped time
var snapTime;
var snapIndex;
if (!allDay) {
minuteDelta = Math.round((eventElement.offset().top - getSlotContainer().offset().top) / snapHeight) *
snapMinutes +
minMinute -
(event.start.getHours() * 60 + event.start.getMinutes());
snapIndex = Math.round((eventElement.offset().top - getSlotContainer().offset().top) / snapHeight); // why not use ui.offset.top?
snapTime = moment.duration(minTime + snapIndex * snapDuration);
eventStart = calendar.rezoneDate(eventStart.clone().time(snapTime));
}
eventDrop(this, event, dayDelta, minuteDelta, allDay, ev, ui);
eventDrop(
eventElement[0],
event,
eventStart,
ev,
ui
);
}
}
});
@@ -496,7 +522,7 @@ function ResourceEventRenderer() {
var colCnt = getColCnt();
var colWidth = getColWidth();
var snapHeight = getSnapHeight();
var snapMinutes = getSnapMinutes();
var snapDuration = getSnapDuration();
// states
var origPosition; // original position of the element, not the mouse
@@ -506,7 +532,10 @@ function ResourceEventRenderer() {
var colDelta, prevColDelta;
var dayDelta; // derived from colDelta
var resourceDelta; // derived from colDelta
var minuteDelta, prevMinuteDelta;
var snapDelta, prevSnapDelta; // the number of snaps away from the original position
// newly computed
var eventStart, eventEnd;
eventElement.draggable({
scroll: false,
@@ -516,7 +545,7 @@ function ResourceEventRenderer() {
revertDuration: opt('dragRevertDuration'),
start: function(ev, ui) {
trigger('eventDragStart', eventElement, event, ev, ui);
trigger('eventDragStart', eventElement[0], event, ev, ui);
hideEvents(event, eventElement);
coordinateGrid.build();
@@ -528,9 +557,11 @@ function ResourceEventRenderer() {
isAllDay = prevIsAllDay = getIsCellAllDay(origCell);
colDelta = prevColDelta = 0;
dayDelta = 0;
resourceDelta = 0;
minuteDelta = prevMinuteDelta = 0;
resourceDelta = 0;
snapDelta = prevSnapDelta = 0;
eventStart = null;
eventEnd = null;
},
drag: function(ev, ui) {
@@ -555,14 +586,13 @@ function ResourceEventRenderer() {
//var col = origCell.col + colDelta;
//col = Math.max(0, col);
//col = Math.min(colCnt-1, col);
//var date = cellToDate(0, col);
//dayDelta = 0; //dayDiff(date, origDate);
resourceDelta = colDelta;
resourceDelta = colDelta;
}
// calculate minute delta (only if over slots)
if (!isAllDay) {
minuteDelta = Math.round((ui.position.top - origPosition.top) / snapHeight) * snapMinutes;
snapDelta = Math.round((ui.position.top - origPosition.top) / snapHeight);
}
}
@@ -571,16 +601,26 @@ function ResourceEventRenderer() {
isInBounds != prevIsInBounds ||
isAllDay != prevIsAllDay ||
colDelta != prevColDelta ||
minuteDelta != prevMinuteDelta
snapDelta != prevSnapDelta
) {
// compute new dates
if (isAllDay) {
eventStart = event.start.clone().stripTime().add('days', dayDelta);
eventEnd = eventStart.clone().add(calendar.defaultAllDayEventDuration);
}
else {
eventStart = event.start.clone().add(snapDelta * snapDuration).add('days', dayDelta);
eventEnd = getEventEnd(event).add(snapDelta * snapDuration).add('days', dayDelta);
}
updateUI();
// update previous states for next time
prevIsInBounds = isInBounds;
prevIsAllDay = isAllDay;
prevColDelta = colDelta;
prevMinuteDelta = minuteDelta;
prevSnapDelta = snapDelta;
}
// if out-of-bounds, revert when done, and vice versa.
@@ -592,10 +632,15 @@ function ResourceEventRenderer() {
clearOverlays();
trigger('eventDragStop', eventElement, event, ev, ui);
//if (isInBounds && (isAllDay || dayDelta || minuteDelta)) { // changed!
if (isInBounds && (isAllDay || resourceDelta || minuteDelta)) { // changed!
event.resources = resources()[origCell.col + resourceDelta].id;
eventDrop(this, event, dayDelta, isAllDay ? 0 : minuteDelta, isAllDay, ev, ui);
if (isInBounds && (isAllDay || resourceDelta || snapDelta)) { // changed!
event.resources = resources()[origCell.col + resourceDelta].id;
eventDrop(
eventElement[0],
event,
eventStart,
ev,
ui
);
}
else { // either no change or out-of-bounds (draggable has already reverted)
@@ -604,7 +649,7 @@ function ResourceEventRenderer() {
isAllDay = false;
colDelta = 0;
dayDelta = 0;
minuteDelta = 0;
snapDelta = 0;
updateUI();
eventElement.css('filter', ''); // clear IE opacity side-effects
@@ -625,13 +670,10 @@ function ResourceEventRenderer() {
if (isAllDay) {
timeElement.hide();
eventElement.draggable('option', 'grid', null); // disable grid snapping
renderDayOverlay(
event.start.clone().add('d', dayDelta),
getEventEnd(event).add('d', dayDelta)
);
renderDayOverlay(eventStart, eventEnd);
}
else {
updateTimeText(minuteDelta);
updateTimeText();
timeElement.css('display', ''); // show() was causing display=inline
eventElement.draggable('option', 'grid', [colWidth, snapHeight]); // re-enable grid snapping
}
@@ -659,7 +701,9 @@ function ResourceEventRenderer() {
function resizableSlotEvent(event, eventElement, timeElement) {
var snapDelta, prevSnapDelta;
var snapHeight = getSnapHeight();
var snapMinutes = getSnapMinutes();
var snapDuration = getSnapDuration();
var eventEnd;
eventElement.resizable({
handles: {
s: '.ui-resizable-handle'
@@ -668,28 +712,36 @@ function ResourceEventRenderer() {
start: function(ev, ui) {
snapDelta = prevSnapDelta = 0;
hideEvents(event, eventElement);
trigger('eventResizeStart', this, event, ev, ui);
trigger('eventResizeStart', eventElement[0], event, ev, ui);
},
resize: function(ev, ui) {
// don't rely on ui.size.height, doesn't take grid into account
snapDelta = Math.round((Math.max(snapHeight, eventElement.height()) - ui.originalSize.height) / snapHeight);
if (snapDelta != prevSnapDelta) {
timeElement.text(
formatDates(
event.start,
(!snapDelta && !event.end) ? null : // no change, so don't display time range
eventEnd(event).add('m', snapMinutes*snapDelta),
opt('timeFormat')
)
);
eventEnd = getEventEnd(event).add(snapDuration * snapDelta);
var text;
if (snapDelta) { // has there been a change?
text = t.getEventTimeText(event.start, eventEnd);
}
else {
text = t.getEventTimeText(event); // the original time text
}
timeElement.text(text);
prevSnapDelta = snapDelta;
}
},
stop: function(ev, ui) {
trigger('eventResizeStop', this, event, ev, ui);
if (snapDelta) {
eventResize(this, event, 0, snapMinutes*snapDelta, ev, ui);
}else{
eventResize(
eventElement[0],
event,
eventEnd,
ev,
ui
);
}
else {
showEvents(event, eventElement);
// BUG: if event was really short, need to put title back in span
}
@@ -702,62 +754,204 @@ function ResourceEventRenderer() {
/* Agenda Event Segment Utilities
-----------------------------------------------------------------------------*/
// TODO: maybe somehow consolidate this with DayEventRenderer's segment system
// /* Agenda Event Segment Utilities
// -----------------------------------------------------------------------------*/
// // Sets the seg.backwardCoord and seg.forwardCoord on each segment and returns a new
// // list in the order they should be placed into the DOM (an implicit z-index).
// function placeSlotSegs(segs) {
// var levels = buildSlotSegLevels(segs);
// var level0 = levels[0];
// var i;
// computeForwardSlotSegs(levels);
// if (level0) {
// for (i=0; i<level0.length; i++) {
// computeSlotSegPressures(level0[i]);
// }
// for (i=0; i<level0.length; i++) {
// computeSlotSegCoords(level0[i], 0, 0);
// }
// }
// return flattenSlotSegLevels(levels);
// }
function stackAgendaSegs(segs) {
var levels = [],
i, len = segs.length, seg,
j, collide, k;
for (i=0; i<len; i++) {
seg = segs[i];
j = 0; // the level index where seg should belong
while (true) {
collide = false;
if (levels[j]) {
for (k=0; k<levels[j].length; k++) {
if (agendaSegsCollide(levels[j][k], seg)) {
collide = true;
break;
}
}
}
if (collide) {
j++;
}else{
break;
}
}
if (levels[j]) {
levels[j].push(seg);
}else{
levels[j] = [seg];
}
}
return levels;
}
// // Builds an array of segments "levels". The first level will be the leftmost tier of segments
// // if the calendar is left-to-right, or the rightmost if the calendar is right-to-left.
// function buildSlotSegLevels(segs) {
// var levels = [];
// var i, seg;
// var j;
// for (i=0; i<segs.length; i++) {
// seg = segs[i];
// // go through all the levels and stop on the first level where there are no collisions
// for (j=0; j<levels.length; j++) {
// if (!computeSlotSegCollisions(seg, levels[j]).length) {
// break;
// }
// }
// (levels[j] || (levels[j] = [])).push(seg);
// }
// return levels;
// }
function countForwardSegs(levels) {
var i, j, k, level, segForward, segBack;
for (i=levels.length-1; i>0; i--) {
level = levels[i];
for (j=0; j<level.length; j++) {
segForward = level[j];
for (k=0; k<levels[i-1].length; k++) {
segBack = levels[i-1][k];
if (agendaSegsCollide(segForward, segBack)) {
segBack.forward = Math.max(segBack.forward||0, (segForward.forward||0)+1);
}
}
}
}
}
// // For every segment, figure out the other segments that are in subsequent
// // levels that also occupy the same vertical space. Accumulate in seg.forwardSegs
// function computeForwardSlotSegs(levels) {
// var i, level;
// var j, seg;
// var k;
// for (i=0; i<levels.length; i++) {
// level = levels[i];
// for (j=0; j<level.length; j++) {
// seg = level[j];
// seg.forwardSegs = [];
// for (k=i+1; k<levels.length; k++) {
// computeSlotSegCollisions(seg, levels[k], seg.forwardSegs);
// }
// }
// }
// }
function agendaSegsCollide(seg1, seg2) {
return seg1.end > seg2.start && seg1.start < seg2.end;
}
// // Figure out which path forward (via seg.forwardSegs) results in the longest path until
// // the furthest edge is reached. The number of segments in this path will be seg.forwardPressure
// function computeSlotSegPressures(seg) {
// var forwardSegs = seg.forwardSegs;
// var forwardPressure = 0;
// var i, forwardSeg;
// if (seg.forwardPressure === undefined) { // not already computed
// for (i=0; i<forwardSegs.length; i++) {
// forwardSeg = forwardSegs[i];
// // figure out the child's maximum forward path
// computeSlotSegPressures(forwardSeg);
// // either use the existing maximum, or use the child's forward pressure
// // plus one (for the forwardSeg itself)
// forwardPressure = Math.max(
// forwardPressure,
// 1 + forwardSeg.forwardPressure
// );
// }
// seg.forwardPressure = forwardPressure;
// }
// }
// // Calculate seg.forwardCoord and seg.backwardCoord for the segment, where both values range
// // from 0 to 1. If the calendar is left-to-right, the seg.backwardCoord maps to "left" and
// // seg.forwardCoord maps to "right" (via percentage). Vice-versa if the calendar is right-to-left.
// //
// // The segment might be part of a "series", which means consecutive segments with the same pressure
// // who's width is unknown until an edge has been hit. `seriesBackwardPressure` is the number of
// // segments behind this one in the current series, and `seriesBackwardCoord` is the starting
// // coordinate of the first segment in the series.
// function computeSlotSegCoords(seg, seriesBackwardPressure, seriesBackwardCoord) {
// var forwardSegs = seg.forwardSegs;
// var i;
// if (seg.forwardCoord === undefined) { // not already computed
// if (!forwardSegs.length) {
// // if there are no forward segments, this segment should butt up against the edge
// seg.forwardCoord = 1;
// }
// else {
// // sort highest pressure first
// forwardSegs.sort(compareForwardSlotSegs);
// // this segment's forwardCoord will be calculated from the backwardCoord of the
// // highest-pressure forward segment.
// computeSlotSegCoords(forwardSegs[0], seriesBackwardPressure + 1, seriesBackwardCoord);
// seg.forwardCoord = forwardSegs[0].backwardCoord;
// }
// // calculate the backwardCoord from the forwardCoord. consider the series
// seg.backwardCoord = seg.forwardCoord -
// (seg.forwardCoord - seriesBackwardCoord) / // available width for series
// (seriesBackwardPressure + 1); // # of segments in the series
// // use this segment's coordinates to computed the coordinates of the less-pressurized
// // forward segments
// for (i=0; i<forwardSegs.length; i++) {
// computeSlotSegCoords(forwardSegs[i], 0, seg.forwardCoord);
// }
// }
// }
// // Outputs a flat array of segments, from lowest to highest level
// function flattenSlotSegLevels(levels) {
// var segs = [];
// var i, level;
// var j;
// for (i=0; i<levels.length; i++) {
// level = levels[i];
// for (j=0; j<level.length; j++) {
// segs.push(level[j]);
// }
// }
// return segs;
// }
// // Find all the segments in `otherSegs` that vertically collide with `seg`.
// // Append into an optionally-supplied `results` array and return.
// function computeSlotSegCollisions(seg, otherSegs, results) {
// results = results || [];
// for (var i=0; i<otherSegs.length; i++) {
// if (isSlotSegCollision(seg, otherSegs[i])) {
// results.push(otherSegs[i]);
// }
// }
// return results;
// }
// // Do these segments occupy the same vertical space?
// function isSlotSegCollision(seg1, seg2) {
// return seg1.end > seg2.start && seg1.start < seg2.end;
// }
// // A cmp function for determining which forward segment to rely on more when computing coordinates.
// function compareForwardSlotSegs(seg1, seg2) {
// // put higher-pressure first
// return seg2.forwardPressure - seg1.forwardPressure ||
// // put segments that are closer to initial edge first (and favor ones with no coords yet)
// (seg1.backwardCoord || 0) - (seg2.backwardCoord || 0) ||
// // do normal sorting...
// compareSlotSegs(seg1, seg2);
// }
// // A cmp function for determining which segment should be closer to the initial edge
// // (the left edge on a left-to-right calendar).
// function compareSlotSegs(seg1, seg2) {
// return seg1.start - seg2.start || // earlier start time goes first
// (seg2.end - seg2.start) - (seg1.end - seg1.start) || // tie? longer-duration goes first
// (seg1.event.title || '').localeCompare(seg2.event.title); // tie? alphabetically by title
// }
src/resource/ResourceView.js
+216 -82
View File
@@ -47,16 +47,50 @@ function ResourceView(element, calendar, viewName) {
// exports
// t.renderResource = renderResource;
// t.setWidth = setWidth;
// t.setHeight = setHeight;
// t.afterRender = afterRender;
// t.computeDateTop = computeDateTop;
// //t.defaultEventEnd = defaultEventEnd;
// //t.timePosition = timePosition;
// t.getIsCellAllDay = getIsCellAllDay;
// t.allDayRow = function() { return allDayRow; }; // badly named
// //t.allDayRow = getAllDayRow;
// t.getCoordinateGrid = function() { return coordinateGrid; }; // specifically for AgendaEventRenderer
// t.getHoverListener = function() { return hoverListener; };
// t.colLeft = colLeft;
// t.colRight = colRight;
// t.colContentLeft = colContentLeft;
// t.colContentRight = colContentRight;
// t.getDaySegmentContainer = function() { return daySegmentContainer; };
// t.getSlotSegmentContainer = function() { return slotSegmentContainer; };
// // t.getMinMinute = function() { return minMinute; };
// // t.getMaxMinute = function() { return maxMinute; };
// t.getMinTime = function() { return minTime; };
// t.getMaxTime = function() { return maxTime; };
// t.getSlotContainer = function() { return slotContainer; };
// t.getRowCnt = function() { return 1; };
// t.getColCnt = function() { return colCnt; };
// t.getColWidth = function() { return colWidth; };
// t.getSnapHeight = function() { return snapHeight; };
// t.getSnapMinutes = function() { return snapMinutes; };
// t.defaultSelectionEnd = defaultSelectionEnd;
// t.renderDayOverlay = renderDayOverlay;
// t.renderSelection = renderSelection;
// t.clearSelection = clearSelection;
// t.reportDayClick = reportDayClick; // selection mousedown hack
// t.dragStart = dragStart;
// t.dragStop = dragStop;
//t.renderAgenda = renderAgenda;
t.renderResource = renderResource;
t.setWidth = setWidth;
t.setHeight = setHeight;
t.afterRender = afterRender;
t.computeDateTop = computeDateTop;
//t.defaultEventEnd = defaultEventEnd;
//t.timePosition = timePosition;
t.getIsCellAllDay = getIsCellAllDay;
t.allDayRow = function() { return allDayRow; }; // badly named
//t.allDayRow = getAllDayRow;
t.getCoordinateGrid = function() { return coordinateGrid; }; // specifically for AgendaEventRenderer
t.getHoverListener = function() { return hoverListener; };
t.colLeft = colLeft;
@@ -65,14 +99,16 @@ function ResourceView(element, calendar, viewName) {
t.colContentRight = colContentRight;
t.getDaySegmentContainer = function() { return daySegmentContainer; };
t.getSlotSegmentContainer = function() { return slotSegmentContainer; };
t.getMinMinute = function() { return minMinute; };
t.getMaxMinute = function() { return maxMinute; };
t.getSlotContainer = function() { return slotContainer; };
t.getRowCnt = function() { return 1; };
t.getColCnt = function() { return colCnt; };
t.getColWidth = function() { return colWidth; };
t.getSnapHeight = function() { return snapHeight; };
t.getSnapMinutes = function() { return snapMinutes; };
t.getSnapDuration = function() { return snapDuration; };
t.getSlotHeight = function() { return slotHeight; };
t.getSlotDuration = function() { return slotDuration; };
t.getMinTime = function() { return minTime; };
t.getMaxTime = function() { return maxTime; };
t.defaultSelectionEnd = defaultSelectionEnd;
t.renderDayOverlay = renderDayOverlay;
t.renderSelection = renderSelection;
@@ -93,11 +129,29 @@ function ResourceView(element, calendar, viewName) {
var clearOverlays = t.clearOverlays;
var reportSelection = t.reportSelection;
var unselect = t.unselect;
//var daySelectionMousedown = t.daySelectionMousedown; // overridden
var slotSegHtml = t.slotSegHtml;
var cellToDate = t.cellToDate;
var dateToCell = t.dateToCell;
// var rangeToSegments = t.rangeToSegments;
var rangeToSegments = t.rangeToSegments;
var formatDate = calendar.formatDate;
var calculateWeekNumber = calendar.calculateWeekNumber;
// View.call(t, element, calendar, viewName);
// OverlayManager.call(t);
// SelectionManager.call(t);
// ResourceEventRenderer.call(t);
// var opt = t.opt;
// var trigger = t.trigger;
// var renderOverlay = t.renderOverlay;
// var clearOverlays = t.clearOverlays;
// var reportSelection = t.reportSelection;
// var unselect = t.unselect;
// var slotSegHtml = t.slotSegHtml;
// var cellToDate = t.cellToDate;
// var dateToCell = t.dateToCell;
// // var rangeToSegments = t.rangeToSegments;
// var formatDate = calendar.formatDate;
// locals
@@ -119,7 +173,6 @@ function ResourceView(element, calendar, viewName) {
var slotContainer;
var slotSegmentContainer;
var slotTable;
var slotTableFirstInner;
var selectionHelper;
var viewWidth;
@@ -127,9 +180,11 @@ function ResourceView(element, calendar, viewName) {
var axisWidth;
var colWidth;
var gutterWidth;
var slotDuration;
var slotHeight; // TODO: what if slotHeight changes? (see issue 650)
var snapMinutes;
var snapDuration;
var snapRatio; // ratio of number of "selection" slots to normal slots. (ex: 1, 2, 4)
var snapHeight; // holds the pixel hight of a "selection" slot
@@ -140,16 +195,62 @@ function ResourceView(element, calendar, viewName) {
var colPositions;
var colContentPositions;
var slotTopCache = {};
var slotDuration;
var tm;
var rtl;
var minMinute, maxMinute;
var minTime;
var maxTime;
var colFormat;
var showWeekNumbers;
var weekNumberTitle;
var weekNumberFormat;
var resources = t.getResources;
// var dayTable;
// var dayHead;
// var dayHeadCells;
// var dayBody;
// var dayBodyCells;
// var dayBodyCellInners;
// var dayBodyCellContentInners;
// var dayBodyFirstCell;
// var dayBodyFirstCellStretcher;
// var slotLayer;
// var daySegmentContainer;
// var allDayTable;
// var allDayRow;
// var slotScroller;
// var slotContainer;
// var slotSegmentContainer;
// var slotTable;
// var slotTableFirstInner;
// var selectionHelper;
// var viewWidth;
// var viewHeight;
// var axisWidth;
// var colWidth;
// var gutterWidth;
// var slotHeight; // TODO: what if slotHeight changes? (see issue 650)
// var snapMinutes;
// var snapRatio; // ratio of number of "selection" slots to normal slots. (ex: 1, 2, 4)
// var snapHeight; // holds the pixel hight of a "selection" slot
// var colCnt;
// var slotCnt;
// var coordinateGrid;
// var hoverListener;
// var colPositions;
// var colContentPositions;
// var slotTopCache = {};
// var slotDuration;
// var tm;
// var rtl;
// var minMinute, maxMinute;
// var colFormat;
// var showWeekNumbers;
// var weekNumberTitle;
// var weekNumberFormat;
// var resources = t.getResources;
// var minTime;
// var maxTime;
/* Rendering
-----------------------------------------------------------------------------*/
@@ -158,8 +259,8 @@ function ResourceView(element, calendar, viewName) {
disableTextSelection(element.addClass('fc-agenda'));
function renderResource(c) {
colCnt = c;
function renderResource(resourceColumnsCnt) {
colCnt = resourceColumnsCnt;
updateOptions();
if (!dayTable) { // first time rendering?
@@ -178,22 +279,10 @@ function ResourceView(element, calendar, viewName) {
minTime = moment.duration(opt('minTime'));
maxTime = moment.duration(opt('maxTime'));
minMinute = moment.duration(opt('minTime'));
maxMinute = moment.duration(opt('maxTime'));
slotDuration = moment.duration(opt('slotDuration'));
// week # options. (TODO: bad, logic also in other views)
showWeekNumbers = opt('weekNumbers');
weekNumberTitle = opt('weekNumberTitle');
if (opt('weekNumberCalculation') != 'iso') {
weekNumberFormat = "w";
}
else {
weekNumberFormat = "W";
}
snapMinutes = opt('snapMinutes') || opt('slotMinutes');
snapDuration = opt('snapDuration');
snapDuration = snapDuration ? moment.duration(snapDuration) : slotDuration;
}
@@ -203,13 +292,13 @@ function ResourceView(element, calendar, viewName) {
function buildSkeleton() {
var s;
var headerClass = tm + "-widget-header";
var contentClass = tm + "-widget-content";
var s;
var minutes;
var slotTime;
var slotDate;
var slotNormal = opt('slotMinutes') % 15 === 0;
var minutes;
var slotNormal = slotDuration.asMinutes() % 15 === 0;
buildDayTable();
@@ -271,9 +360,9 @@ function ResourceView(element, calendar, viewName) {
"<table class='fc-agenda-slots' style='width:100%' cellspacing='0'>" +
"<tbody>";
slotTime = moment.duration(+minMinute);
slotTime = moment.duration(+minTime); // i wish there was .clone() for durations
slotCnt = 0;
while (slotTime < maxMinute) {
while (slotTime < maxTime) {
slotDate = t.start.clone().time(slotTime); // will be in UTC but that's good. to avoid DST issues
minutes = slotDate.minutes();
s +=
@@ -295,9 +384,10 @@ function ResourceView(element, calendar, viewName) {
s +=
"</tbody>" +
"</table>";
// slotTable = $(s).appendTo(slotContainer);
// slotTableFirstInner = slotTable.find('div:first');
slotTable = $(s).appendTo(slotContainer);
slotTableFirstInner = slotTable.find('div:first');
slotBind(slotTable.find('td'));
}
@@ -354,13 +444,14 @@ function ResourceView(element, calendar, viewName) {
"<thead>" +
"<tr>";
if (showWeekNumbers) {
weekText = formatDate(date, weekNumberFormat);
if (opt('weekNumbers')) {
date = cellToDate(0, 0);
weekText = calculateWeekNumber(date);
if (rtl) {
weekText += weekNumberTitle;
weekText += opt('weekNumberTitle');
}
else {
weekText = weekNumberTitle + weekText;
weekText = opt('weekNumberTitle') + weekText;
}
html +=
"<th class='fc-agenda-axis fc-week-number " + headerClass + "'>" +
@@ -372,16 +463,18 @@ function ResourceView(element, calendar, viewName) {
}
for (col=0; col<colCnt; col++) {
var classNames = [
'fc-col' + col,
resources()[col].className,
headerClass
];
var resource = resources()[col];
html +=
"<th class='" + classNames.join(' ') + "'>" +
htmlEscape(resources()[col].name) +
"</th>";
var classNames = [ // added
'fc-col' + col,
resource.className instanceof Array ? resource.className.join(' ') : resource.className,
headerClass
];
html +=
"<th class='" + classNames.join(' ') + "'>" +
htmlEscape(resource.name) +
"</th>";
}
html +=
@@ -412,12 +505,12 @@ function ResourceView(element, calendar, viewName) {
cellsHTML = '';
for (col=0; col<colCnt; col++) {
var resource = resources()[col];
date = t.intervalStart.clone();
classNames = [
'fc-col' + col,
resources()[col].className,
resource.className instanceof Array ? resource.className.join(' ') : resource.className,
contentClass
];
if (+date == +today) {
@@ -484,10 +577,20 @@ function ResourceView(element, calendar, viewName) {
slotScroller.height(bodyHeight - allDayHeight - 1);
slotHeight = slotTableFirstInner.height() + 1; // +1 for border
// the stylesheet guarantees that the first row has no border.
// this allows .height() to work well cross-browser.
var slotHeight0 = slotTable.find('tr:first').height() + 1; // +1 for bottom border
var slotHeight1 = slotTable.find('tr:eq(1)').height();
// HACK: i forget why we do this, but i think a cross-browser issue
slotHeight = (slotHeight0 + slotHeight1) / 2;
snapRatio = opt('slotMinutes') / snapMinutes;
snapRatio = slotDuration / snapDuration;
snapHeight = slotHeight / snapRatio;
// slotHeight = slotTableFirstInner.height() + 1; // +1 for border
// snapRatio = opt('slotMinutes') / snapMinutes;
// snapHeight = slotHeight / snapRatio;
}
@@ -543,7 +646,7 @@ function ResourceView(element, calendar, viewName) {
-----------------------------------------------------------------------*/
function resetScroll() {
function resetScroll() {
var top = computeTimeTop(
moment.duration(opt('scrollTime'))
) + 1; // +1 for the border
@@ -578,27 +681,35 @@ function ResourceView(element, calendar, viewName) {
.mousedown(slotSelectionMousedown);
}
function slotClick(ev) {
if (!opt('selectable')) { // if selectable, SelectionManager will worry about dayClick
var col = Math.min(colCnt-1, Math.floor((ev.pageX - dayTable.offset().left - axisWidth) / colWidth));
var date = cellToDate(0, 0);
var rowMatch = this.parentNode.className.match(/fc-slot(\d+)/); // TODO: maybe use data
var date = cellToDate(0, col);
var match = this.parentNode.className.match(/fc-slot(\d+)/); // TODO: maybe use data
ev.data = resources()[col];
ev.data = resources()[col]; // added
if (rowMatch) {
var mins = parseInt(rowMatch[1], 10) * opt('slotMinutes');
var hours = Math.floor(mins/60);
date.hour(hours);
date.setMinutes(mins%60 + minMinute);
trigger('dayClick', dayBodyCells[col], date, false, ev);
if (match) {
var slotIndex = parseInt(match[1], 10);
date.add(minTime + slotIndex * slotDuration);
date = calendar.rezoneDate(date);
trigger(
'dayClick',
dayBodyCells[col],
date,
ev
);
}else{
trigger('dayClick', dayBodyCells[col], date, true, ev);
trigger(
'dayClick',
dayBodyCells[col],
date,
ev
);
}
}
}
/* Semi-transparent Overlay Helpers
@@ -607,12 +718,30 @@ function ResourceView(element, calendar, viewName) {
function renderDayOverlay(overlayStart, overlayEnd, refreshCoordinateGrid, col) { // overlayEnd is exclusive
var allDayRow = 0;
if (refreshCoordinateGrid) {
coordinateGrid.build();
}
dayBind(renderCellOverlay(allDayRow, col, allDayRow, col));
var segments = rangeToSegments(overlayStart, overlayEnd);
for (var i=0; i<segments.length; i++) {
var segment = segments[i];
dayBind(
renderCellOverlay(
segment.row,
col, //segment.leftCol,
segment.row,
col //segment.rightCol
)
);
}
// var allDayRow = 0;
// if (refreshCoordinateGrid) {
// coordinateGrid.build();
// }
// dayBind(renderCellOverlay(allDayRow, col, allDayRow, col));
}
@@ -739,16 +868,21 @@ function ResourceView(element, calendar, viewName) {
function realCellToDate(cell) { // ugh "real" ... but blame it on our abuse of the "cell" system
var d = cellToDate(0, 0);
var slotIndex = cell.row;
var date = cellToDate(0, 0); // updated
var snapIndex = cell.row;
if (opt('allDaySlot')) {
slotIndex--;
snapIndex--;
}
if (slotIndex >= 0) {
d.add('m', minMinute + slotIndex * snapMinutes);
if (snapIndex >= 0) {
date.time(moment.duration(minTime + snapIndex * snapDuration));
date = calendar.rezoneDate(date);
}
return d;
return date;
}
function computeDateTop(date, startOfDayDate) {
return computeTimeTop(
@@ -863,8 +997,8 @@ function ResourceView(element, calendar, viewName) {
col = col || dateToCell(startDate).col;
if (col >= 0 && col < colCnt) { // only works when times are on same day
var rect = coordinateGrid.rect(0, col, 0, col, slotContainer); // only for horizontal coords
var top = timePosition(startDate, startDate);
var bottom = timePosition(startDate, endDate);
var top = computeDateTop(startDate, startDate);
var bottom = computeDateTop(startDate, endDate);
if (bottom > top) { // protect against selections that are entirely before or after visible range
rect.top = top;
rect.height = bottom - top;
@@ -962,11 +1096,11 @@ function ResourceView(element, calendar, viewName) {
var d2 = realCellToDate(cell);
dates = [
d1,
d1.clone().add('m', snapMinutes), // calculate minutes depending on selection slot minutes
d1.clone().add(snapDuration), // calculate minutes depending on selection slot minutes
d2,
d2.clone().add('m', snapMinutes)
d2.clone().add(snapDuration)
].sort(dateCompare);
renderSlotSelection(dates[0], dates[3], cell.col);
renderSlotSelection(dates[0], dates[3], cell.col); // updated
}else{
dates = null;
}
@@ -977,7 +1111,7 @@ function ResourceView(element, calendar, viewName) {
if (+dates[0] == +dates[1]) {
reportDayClick(dates[0], false, ev);
}
ev.data = resources()[col];
ev.data = resources()[col]; // added
reportSelection(dates[0], dates[3], false, ev);
}
});
tests/resourceDayView.html
+186 -221
View File
@@ -1,235 +1,200 @@
<!DOCTYPE html>
<html>
<head>
<link href='../dist/fullcalendar.css' rel='stylesheet' />
<link href='../dist/fullcalendar.print.css' rel='stylesheet' media='print' />
<style>
button {
font-size: 11px;
}
</style>
<link href='../dist/fullcalendar.css' rel='stylesheet' />
<link href='../dist/fullcalendar.print.css' rel='stylesheet' media='print' />
<style>
button {
font-size: 11px;
}
</style>
</head>
<body style='font-size:12px'>
<p>
<p>
<button onclick="cal.fullCalendar('prev')">prev</button>
<button onclick="cal.fullCalendar('next')">next</button>
<button onclick="cal.fullCalendar('today')">today</button>
<button onclick="cal.fullCalendar('gotoDate', 1999, 9, 31)">Oct 31 1999</button>
<button onclick="cal.fullCalendar('gotoDate', new Date(1999, 9, 30))">Oct 30 1999 (Date)</button>
<button onclick="cal.fullCalendar('incrementDate', 1, 1, 1)">+1 +1 +1</button>
<button onclick="cal.fullCalendar('incrementDate', -1, -1, -1)">-1 -1 -1</button>
<button onclick="updateEventStart()">update event start</button>
<button onclick="updateRepeatingEvent()">update repeating event</button>
<button onclick="renderEvent(false)">render new event</button>
<button onclick="renderEvent(true)">render new sticky event</button>
<br />
<button onclick="cal.fullCalendar('removeEvents')">remove all</button>
<button onclick="cal.fullCalendar('removeEvents', 999)">remove repeating events</button>
<button onclick="cal.fullCalendar('removeEvents', function(e){return !e.allDay})">remove timed events</button>
<button onclick="console.log(cal.fullCalendar('clientEvents'))">log events</button>
<button onclick="console.log(cal.fullCalendar('clientEvents', '999'))">log repeating events</button>
<button onclick="console.log(cal.fullCalendar('clientEvents', function(e){return e.allDay}))">log all-day events</button>
<br />
<button onclick="cal.fullCalendar('addEventSource', staticEvents)">+ static events</button>
<button onclick="cal.fullCalendar('removeEventSource', staticEvents)">- static events</button>
<button onclick="cal.fullCalendar('addEventSource', gcalFeed)">+ gcal</button>
<button onclick="cal.fullCalendar('removeEventSource', gcalFeed)">- gcal</button>
<button onclick="cal.fullCalendar('addEventSource', jsonFeed)">+ json</button>
<button onclick="cal.fullCalendar('removeEventSource', jsonFeed)">- json</button>
<button onclick="cal.fullCalendar('rerenderEvents')">rerender events</button>
<button onclick="cal.fullCalendar('refetchEvents')">refetch events</button>
<br />
<button onclick="cal.fullCalendar('changeView', 'month')">change to month</button>
<button onclick="cal.fullCalendar('changeView', 'basicWeek')">change to basicWeek</button>
<button onclick="cal.fullCalendar('changeView', 'basicDay')">change to basicDay</button>
<button onclick="getView()">getView</button>
<button onclick="getDate()">getDate</button>
<button onclick="optionGetter()">option getter</button>
<button onclick="cal.width(1100)">change width (passive)</button>
<button onclick="cal.fullCalendar('render')">render</button>
<button onclick="cal.fullCalendar('option', 'height', 1000)">change height</button>
</p>
<button onclick="cal.fullCalendar('prev')">prev</button>
<button onclick="cal.fullCalendar('next')">next</button>
<button onclick="cal.fullCalendar('today')">today</button>
<button onclick="cal.fullCalendar('gotoDate', 1999, 9, 31)">Oct 31 1999</button>
<button onclick="cal.fullCalendar('gotoDate', new Date(1999, 9, 30))">Oct 30 1999 (Date)</button>
<button onclick="cal.fullCalendar('incrementDate', 1, 1, 1)">+1 +1 +1</button>
<button onclick="cal.fullCalendar('incrementDate', -1, -1, -1)">-1 -1 -1</button>
<!-- <div id='loading' style='position:absolute;display:none'>loading...</div>-->
<div id='calendar' style='width:70%;margin:20px auto 0;font-family:arial'></div>
<script src='../lib/jquery/dist/jquery.js'></script>
<script src='../lib/jquery-ui/ui/jquery-ui.js'></script>
<script src='../lib/moment/moment.js'></script>
<!-- <script src='../src/intro.js'></script> -->
<script src='../src/defaults.js'></script>
<script src='../src/main.js'></script>
<script src='../src/lang.js'></script>
<script src='../src/Calendar.js'></script>
<script src='../src/Header.js'></script>
<script src='../src/EventManager.js'></script>
<script src='../src/ResourceManager.js'></script>
<script src='../src/util.js'></script>
<script src='../src/moment-ext.js'></script>
<script src='../src/date-formatting.js'></script>
<script src='../src/basic/MonthView.js'></script>
<script src='../src/basic/BasicWeekView.js'></script>
<script src='../src/basic/BasicDayView.js'></script>
<script src='../src/basic/BasicView.js'></script>
<script src='../src/basic/BasicEventRenderer.js'></script>
<script src='../src/agenda/AgendaWeekView.js'></script>
<script src='../src/agenda/AgendaDayView.js'></script>
<script src='../src/agenda/AgendaView.js'></script>
<script src='../src/agenda/AgendaEventRenderer.js'></script>
<script src='../src/resource/ResourceDayView.js'></script>
<script src='../src/resource/ResourceView.js'></script>
<script src='../src/resource/ResourceEventRenderer.js'></script>
<script src='../src/common/View.js'></script>
<script src='../src/common/DayEventRenderer.js'></script>
<script src='../src/common/SelectionManager.js'></script>
<script src='../src/common/OverlayManager.js'></script>
<script src='../src/common/CoordinateGrid.js'></script>
<script src='../src/common/HoverListener.js'></script>
<script src='../src/common/HorizontalPositionCache.js'></script>
<!-- <script src='../src/outro.js'></script> -->
<script src='../dist/gcal.js'></script>
<script>
function showModal(a, b, c) {
$('#newAppointment').modal('show');
}
<button onclick="updateEventStart()">update event start</button>
<button onclick="updateRepeatingEvent()">update repeating event</button>
<button onclick="renderEvent(false)">render new event</button>
<button onclick="renderEvent(true)">render new sticky event</button>
<br />
var cal, staticEvents;
<button onclick="cal.fullCalendar('removeEvents')">remove all</button>
<button onclick="cal.fullCalendar('removeEvents', 999)">remove repeating events</button>
<button onclick="cal.fullCalendar('removeEvents', function(e){return !e.allDay})">remove timed events</button>
<button onclick="console.log(cal.fullCalendar('clientEvents'))">log events</button>
<button onclick="console.log(cal.fullCalendar('clientEvents', '999'))">log repeating events</button>
<button onclick="console.log(cal.fullCalendar('clientEvents', function(e){return e.allDay}))">log all-day events</button>
<br />
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
<button onclick="cal.fullCalendar('addEventSource', staticEvents)">+ static events</button>
<button onclick="cal.fullCalendar('removeEventSource', staticEvents)">- static events</button>
<button onclick="cal.fullCalendar('addEventSource', gcalFeed)">+ gcal</button>
<button onclick="cal.fullCalendar('removeEventSource', gcalFeed)">- gcal</button>
<button onclick="cal.fullCalendar('addEventSource', jsonFeed)">+ json</button>
<button onclick="cal.fullCalendar('removeEventSource', jsonFeed)">- json</button>
$(document).ready(function () {
cal = $('#calendar').fullCalendar({
eventClick: function (event) {
showModal(event.apId, event.patId, event.provisoryId);
},
editable: true,
// weekends: false,
header: {
left: 'prev,next today',
center: 'title',
right: 'resourceDay,agendaDay'
},
defaultView: 'resourceDay',
resources: [
{ 'id': 'resource1', 'name': 'Resource 1', 'className': 'css-class-as-string' },
{ 'id': 'resource2', 'name': 'Resource 2', 'className': ['green', 'another-css-class-name'] },
{ 'id': 'resource3', 'name': 'Resource 3' }],
events: [
{
title: 'R1: All day',
allDay: true,
resources: 'resource1'
},
{
title: 'R2: All Day',
allDay: true,
resources: 'resource2'
},
{
title: 'R1/R2: 12-14',
start: new Date(y, m, d, 12, 0),
end: new Date(y, m, d, 14, 0),
allDay: false,
resources: ['resource1', 'resource2']
},
{
id: 777,
title: 'R1: 14:30-16',
start: new Date(y, m, d, 14, 30),
end: new Date(y, m, d, 16, 0),
allDay: false,
resources: ['resource1']
}
]
});
});
<button onclick="cal.fullCalendar('rerenderEvents')">rerender events</button>
<button onclick="cal.fullCalendar('refetchEvents')">refetch events</button>
<br />
function updateEventStart() {
var event = cal.fullCalendar('clientEvents', 777)[0];
event.start = new Date(y, m, d, 13, 30);
event.end = new Date(y, m, d, 14, 50);
//event.start = new Date(y, m, 25, 10, 30); // move big days
//event.end = new Date(y, m, 26);
//event.allDay = true;
cal.fullCalendar('updateEvent', event);
}
<button onclick="cal.fullCalendar('changeView', 'month')">change to month</button>
<button onclick="cal.fullCalendar('changeView', 'basicWeek')">change to basicWeek</button>
<button onclick="cal.fullCalendar('changeView', 'basicDay')">change to basicDay</button>
<button onclick="getView()">getView</button>
<button onclick="getDate()">getDate</button>
<button onclick="optionGetter()">option getter</button>
<button onclick="cal.width(1100)">change width (passive)</button>
<button onclick="cal.fullCalendar('render')">render</button>
<button onclick="cal.fullCalendar('option', 'height', 1000)">change height</button>
</p>
<!-- <div id='loading' style='position:absolute;display:none'>loading...</div>-->
<div id='calendar' style='width:70%;margin:20px auto 0;font-family:arial'></div>
function updateRepeatingEvent() {
var event = cal.fullCalendar('clientEvents', 999)[0];
event.start = new Date(y, m, 4, 13, 30);
event.end = new Date(y, m, 5, 2, 0);
event.allDay = true;
event.title = "repeat yo";
//event.editable = false;
event.url = "http://google.com/";
event.color = 'red';
event.textColor = 'green';
cal.fullCalendar('updateEvent', event);
//console.log(cal.fullCalendar('clientEvents', 2));
}
function renderEvent(stick) {
cal.fullCalendar('renderEvent', {
start: new Date(y, m, 17),
title: 'heyman'
}, stick);
}
function getView() {
var view = cal.fullCalendar('getView');
console.log(view.start + ' --- ' + view.end + ' "' + view.title + '"');
}
function getDate() {
console.log(cal.fullCalendar('getDate'));
}
function optionGetter() {
console.log(cal.fullCalendar('option', 'editable'));
}
var gcalFeed = $.fullCalendar.gcalFeed("http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic");
var jsonFeed = "../demos/json-events.php";
<script src='../lib/jquery/dist/jquery.js'></script>
<script src='../lib/jquery-ui/ui/jquery-ui.js'></script>
<script src='../lib/moment/moment.js'></script>
<!-- <script src='../src/intro.js'></script> -->
<script src='../src/defaults.js'></script>
<script src='../src/main.js'></script>
<script src='../src/lang.js'></script>
<script src='../src/Calendar.js'></script>
<script src='../src/Header.js'></script>
<script src='../src/EventManager.js'></script>
<script src='../src/ResourceManager.js'></script>
<script src='../src/util.js'></script>
<script src='../src/moment-ext.js'></script>
<script src='../src/date-formatting.js'></script>
<script src='../src/basic/MonthView.js'></script>
<script src='../src/basic/BasicWeekView.js'></script>
<script src='../src/basic/BasicDayView.js'></script>
<script src='../src/basic/BasicView.js'></script>
<script src='../src/basic/BasicEventRenderer.js'></script>
<script src='../src/agenda/AgendaWeekView.js'></script>
<script src='../src/agenda/AgendaDayView.js'></script>
<script src='../src/agenda/AgendaView.js'></script>
<script src='../src/agenda/AgendaEventRenderer.js'></script>
<script src='../src/resource/ResourceDayView.js'></script>
<script src='../src/resource/ResourceView.js'></script>
<script src='../src/resource/ResourceEventRenderer.js'></script>
<script src='../src/common/View.js'></script>
<script src='../src/common/DayEventRenderer.js'></script>
<script src='../src/common/SelectionManager.js'></script>
<script src='../src/common/OverlayManager.js'></script>
<script src='../src/common/CoordinateGrid.js'></script>
<script src='../src/common/HoverListener.js'></script>
<script src='../src/common/HorizontalPositionCache.js'></script>
<!-- <script src='../src/outro.js'></script> -->
<script src='../dist/gcal.js'></script>
<script>
function showModal(a, b, c) {
$('#newAppointment').modal('show');
}
var cal, staticEvents;
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$(document).ready(function() {
cal = $('#calendar').fullCalendar({
eventClick: function(event) {
showModal(event.apId, event.patId, event.provisoryId);
},
editable: true,
// weekends: false,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,basicWeek,agendaDay,basicDay,resourceDay'
},
//defaultView: 'resourceDay',
resources: [{'id':'resource1','name':'Resource 1', 'className': 'css-class-as-string'},{'id':'resource2', 'name':'Resource 2', 'className': ['green', 'another-css-class-name']},{'id':'resource3', 'name':'Resource 3'}],
events: [
// {
// title: 'R1-R2: Lunch 12.15-14.45',
// start: new Date(y, m, d, 12, 15),
// end: new Date(y, m, d, 14, 45),
// allDay: false,
// resources: ['resource1','resource2']
// },
{
title: 'R1: All day',
// start: new Date(y, m, d, 10, 30),
// end: new Date(y, m, d, 11, 00),
allDay: true,
resources: 'resource1'
},
{
title: 'R2: All Day',
//start: new Date(y, m, d, 11, 00),
allDay: true,
resources: 'resource2'
},
{
title: 'R1/R2: 12-14',
start: new Date(y, m, d, 12, 0),
end: new Date(y, m, d, 14, 0),
allDay: false,
resources: ['resource1','resource2']
},
{
id: 777,
title: 'R1: 14:30-16',
start: new Date(y, m, d, 14, 30),
end: new Date(y, m, d, 16, 0),
allDay: false,
resources: ['resource1']
},
// {
// id: 999,
// title: 'Repeating Event',
// start: new Date(y, m, d-3, 16, 0),
// allDay: false,
// resources: 'resource2'
// },
// {
// id: 999,
// title: 'Repeating Event',
// start: new Date(y, m, d+4, 16, 0),
// allDay: false,
// resources: 'resource2'
// }
]
});
});
function updateEventStart() {
var event = cal.fullCalendar('clientEvents', 777)[0];
event.start = new Date(y, m, d, 13, 30);
event.end = new Date(y, m, d, 14, 50);
//event.start = new Date(y, m, 25, 10, 30); // move big days
//event.end = new Date(y, m, 26);
//event.allDay = true;
cal.fullCalendar('updateEvent', event);
}
function updateRepeatingEvent() {
var event = cal.fullCalendar('clientEvents', 999)[0];
event.start = new Date(y, m, 4, 13, 30);
event.end = new Date(y, m, 5, 2, 0);
event.allDay = true;
event.title = "repeat yo";
//event.editable = false;
event.url = "http://google.com/";
event.color = 'red';
event.textColor = 'green';
cal.fullCalendar('updateEvent', event);
//console.log(cal.fullCalendar('clientEvents', 2));
}
function renderEvent(stick) {
cal.fullCalendar('renderEvent', {
start: new Date(y, m, 17),
title: 'heyman'
}, stick);
}
function getView() {
var view = cal.fullCalendar('getView');
console.log(view.start + ' --- ' + view.end + ' "' + view.title + '"');
}
function getDate() {
console.log(cal.fullCalendar('getDate'));
}
function optionGetter() {
console.log(cal.fullCalendar('option', 'editable'));
}
var gcalFeed = $.fullCalendar.gcalFeed("http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic");
var jsonFeed = "../demos/json-events.php";
</script>
</script>
</body>
</html>
</html>