seankenny / fullcalendar

Full-sized drag & drop event calendar (jQuery plugin)

#FORK INFO This fork adds a vertical resource view to FullCalendar. Some details on usage, etc are available here: http://www.seankenny.me/blog/2013/08/14/fullcalendar-with-a-resource-day-view/ http://www.seankenny.me/blog/2014/07/24/resource-fullcalendar-dragging-and-clicking/ http://www.seankenny.me/blog/2014/08/11/fullcalendar-with-a-resource-day-view-v2-0-2/

plunkr demo.

FullCalendar

A full-sized drag & drop event calendar (jQuery plugin).

• Project website and demos
• Documentation
• Support
• Changelog
• License

For contributors:

• Ways to contribute
• General coding guidelines
• Contributing features
• Contributing bugfixes

fullcalendar's Issues

revertFunc() not reverting event to original resource column #27

Hello,
This is the same issue with #27 .
As of today, revertFunc seems not working when we drag to different resource.

Tried to dive into source but was not able to make it works.
Any help is appreciated,
Regards.

Horizontal scrollbar

Hi,
I just found your calendar and am thinking about using it in a project,
I was wondering if there is any possibility to add horizontal scrollbars to the
resourceDay view?
Best Regards
Daniela

How to display a Resource View day when there are no resources for that day

PR 3f75a1d highlighted an issue where the Resource view fails to render correctly when there are no resources for that day. See the PR history for a commentary on the causes.

All day events are not being correctly rendered for the event day

Where we have an all day event for a resource, then navigate to the previous or following day, the all day event is still shown.

External events

Hi,
I was just wondering if there was someway to drop external events like in this demo: http://fullcalendar.io/js/fullcalendar-2.3.1/demos/external-dragging.html
I'm currently using this fork to organise staff and would like to drop events into a resource column.
Thanks

v2 does not accept resourceDay view

How do I start developing with the current v2 branch? Is its API different than the master's one?

Using the defaultView: 'resourceDay' proposed on the documentation throws an exception in fullcalendar.js:705:17 since resourceDay is not present in fcViews (which only contains month, basicWeek, basicDay, agendaWeek and agendaDay)

It would be even nicer to have a demos/resource-view.html to run a test.

Multi-day events on Resource Day view

Events that span multiple days do not seem to show up on the Resource Day view (say an event that begins 9am Tuesday and ends 5pm Wednesday) but does show on all other views

Resource Day day click incrementing date v2.0

When you click on the 1st resource column in a day slot, you get the day date return that you are on. But when you click other columns, you get an incremented date (like you would get in agendaWeek view). I changed line 6444 in the fullcalendar.js file to 'var date = cellToDate(0, 0);', so it would give me the same day for each resource column. It is the 3rd line in the slotClick(ev) function. You might have a better solution/fix, but just thought you would want to know that one. Great work :)

Resource id on select

Just like the drop, would be nice to get the resource id when selecting time slots to create an event. To really use it like an agenda.

Resource Time Unavailable

Is there a way grey out a time for a resource when they are unavailable?

Dynamically add resource

Hi, just migrated to this fork to get resources. I'm looking to add resources dynamically, I coundn't find any add function to make this happen. Is there a way to do this or do I have to code it myself?

Different color per resource

I'm trying to have different colors in events according to the resources. When I use fullcalendar it renders colors OK but with your plugin doesn't.

Any idea what I am doing wrong?

Thanks

Impossible to drag events between resources in 2.1

I found the problem but I didn't find the best way to fix this yet. Maybe you could have a look?
And if you create a unit test with the commit, I would be able to see what has to be done to fix a bug :)

Repro:

resources:[{id:"1", name:"Bob"}, {id:"2", name: "Joe"}],
events: [
        {
          title: "Title 1",
          start: moment(),
          end: moment(moment() + 3600 * 2 * 1000),
          resources: ['1']
        },
]

The bug is in the following method:
rangeToSegs: function(rangeStart, rangeEnd, resourceIds) {
resourcesIds here is not what is being dragged but contains the original event. So the rangeToSegs basically will not display the drag properly, it will only display the resources where it is originating from.

If we compare to v2.0, you used to check the left position of the mouse event to calculate the delta column.
You could do something similar in 2.1, but going up the stack, I can't find any ui event information. The only information I find is here:
cellOver: function(cell, date) {
which contains the column number. That would be where we would get the info. But that's super far in the stack. So maybe the only way I see is to re-implement segDragMousedown ?

Also, just to keep in mind, I think you would like to keep the functionality of dragging an event present in 2+ resources, they all should move along.

Re-init with angular not rendering (and a thank you)

Probably not the best place for this but I'm doing it anyways.

I am using fullcalendar for my app but I really needed to be able to separate events by location -- your fork did a tremendous job of doing this for me! And just in time as the site will be in full use next week. I just want to thank you profusely for putting in the work to make this view a reality! Here's my implementation of your fork if you wanted to see.

Now, for the actual issue, I don't think this is entirely related to your code and it's definitely not it's intended use but I thought i'd report it anyways.

I'm using your fork with angular-ui's ui-calendar. Here's what happens:

• ui-calendar calls scope.init which in turns invokes the function scope.calendar.fullCalendar(options)
• fullcalendar does it's thang and your code runs. If, in my resources option objects, I do not include a cssName: [] property then your code automatically adds the empty property.
• ui-calendar has a $watch on a function that returns the attributes from ui-calendar. When it registers the changes (adding the cssName prop) it calls
  • scope.destroy which is basically just scope.calendar = scope.$parent[attrs.calendar] = elm.html('');
  • then scope.init again

Now ui-calendar does this with the regular fullcalendar in use too. However with the regular calendar it just inits again and renders on the page. When using your fork though, even though it goes through init, the calendar never renders.

I haven't figured out why it doesn't render however I did bandage the bug by including className:[] on my resources options initially rather than letting your code add them later and this stops the $watch trigger and the calendar renders normally.

Thanks again for making this fork! You're awesome.

Changing event source does not always update dom

Hello,
My Event object is something like:
function CalendarEvent(booking) {

            this.id         = booking.id;
            this.title      = booking.label ? booking.label : '';
            this.start      = moment(booking.timeFrom, 'YYYY-MM-DD[T]HH:mm:ss.SSS').toDate();
            this.end        = moment(booking.timeTo,   'YYYY-MM-DD[T]HH:mm:ss.SSS').toDate();
            this.resourceId = booking.locationId;
            this.resources = [booking.locationId];

}

var eventSource1 = [ new CalendarEvent(booking1), new Calendar Event(booking2)];
var eventSource2 = [ new CalendarEvent(booking3), new Calendar Event(booking4)];
So my eventSource is = [ eventSource1 ];
If I remove eventSource1 and add eventSource2 and then remove eventSource2-add eventSource1 , events are not removed from dom.
isSourcesEqual(src, source) returns false because my events are CalendarEvent but sources are plain object.
I may post some examples if this is not clear.

Highlighting of the current day for resource view only sets first resource column

As per title.

Open the resource view and navigate to today's date. Only the first resource column will be highlighted yellow. Should highlight all.

External Dragging into resourceDay not sticking

I am trying to use the example from external-dragging.html together with the resource-view example.

However the events are not sticking to the resource-view when I drop it. It works for the agendaDay and sticks in the calendar.

I am using the line:

$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

Ability to put HTML in resource.name

Why is the resource.name escaped ? I think it would be a good idea to allow HTML content there or a callback rendering function.

Drag a date over multiple resources

Hi,

thank you for your work! In our case we have rooms as resources that can be connected, e.g. room A and room B. Is it possible to drag en event over multiple columns? If it's not possible, what do you think how much effort it would be add support for that?

Thank you!

Regards, Wolfram

Cannot read property 'id' of undefined when dragging out-of-bounds

Hi. I'm currently working on a project and I used this fork from Demo 2.0.2.

I'm having an error that says "Uncaught TypeError: Cannot read property 'id' of undefined" when I try to drag an event outside the calendar. To be specific, on the right side where the scrollbar is located. Normally, it would just go back to where it was placed before dragging if it is not placed properly on a column. But the event will disappear and will only re-appear when you drag/resize the other events.

I noticed that it happens on the demo too. Try moving a card to "Resource 3" then move the card towards the scrollbar. You'll notice that the event will disappear.

I think this happens to everyone except that they never encountered it before.

If anyone can clarify this for me that would be great. This is a great plugin. Looking forward for more improvements/features.

Thank you!

How to fixed width resource column and horizontal scrolling

Hi @seankenny ,

Is there any way to fixed width of resources column?

I want to fixed width of each resource and can be scroll resources horizontally

Fetch Resources

Hi guys,
I am giving a try to this version of fullcalendar because of the resourceView.
Seems to work fine. Also the json events fetching is working well.
But I wonder how do you fetch dynamically resources? Avoiding empty resources columns?

Dragging/Resizing not working

Great extension to an already fantastic jquery plugin man just what i needed for my project!

I seem to be having a javascript error though, i am grabbing event and resource data with an Ajax pull as well as updating whenever an event is resized or moved. But events do not move at all and in console i am given this:

Uncaught TypeError: eventElement.draggable is not a function - fullcalendar.js:7469

I've tried removing the eventDrop option completely.. at first i didn't have jquery-ui linked but then I enabled it and still nothing.. bit confused to be honest. Any ideas? If code snippets are required please let me know

When adding event to another resource, date is pushed by 1 day

Hi, i don't know, if this is intended functionality, but when i select a field in another resource than the first one, the date that is returned from select callback is larger by one day. e.g.
I have two resources and date in calendar is 2014-07-02, when i select slots in resource no. 2, the date returned from select callback is 2014-07-03. Is there some workaround or configuration option that I could use? Thanks in advance.

Dragging event makes event disappear

My events are loaded via an ajax call. When I drag an event and release it, it immediately disappears. Strangely, when I use the events array from your demo, this doesn't happen.

Probably something broken by commit 099351a.

Resource filter being called way too many times

The fetchResources function gets called in a loop every time the calendar renders. The resourceFilter function is called one time for every resource each time the fetchResources function is called.

Here's a plunkr demonstrating the issue: http://plnkr.co/edit/u0rk9s6TWTgZSKO7udT7?p=preview. The counter is reset every time the view renders.

In this particular example, the function is being called up to 33 times, despite there only being 3 resources. Not a big deal. But, when I was using about 20 resources the function was being called up to 860 times on every render, which brought the UI to a complete freeze for a few seconds.

Exception when the resources are obtained via URL

When the calendar is used via:

$('#calendar').fullCalendar({
  defaultView: 'resourceDay',
  resources:'/resources,
  events: [
  {
    title: 'R1-R2: Lunch 14.00-15.00',
    start: '2013-08-21T14:00:00.000Z',
    end: '2013-08-21T15:00:00.000Z',
    resources: ['r1','r2']
  }
});

then an exception is thrown:

ReferenceError: resources is not defined
    at addResourceSources (http://localhost:6297/Scripts/fullcalendar/fullcalendar.js:1332:17)
    at Calendar.ResourceManager (http://localhost:6297/Scripts/fullcalendar/fullcalendar.js:1316:9)
    at new Calendar (http://localhost:6297/Scripts/fullcalendar/fullcalendar.js:222:25)
    at HTMLDivElement.<anonymous> (http://localhost:6297/Scripts/fullcalendar/fullcalendar.js:166:28)
    at Function.jQuery.extend.each (http://localhost:6297/Scripts/jquery-1.10.2.js:657:23)
    at jQuery.fn.jQuery.each (http://localhost:6297/Scripts/jquery-1.10.2.js:266:17)
    at $.fn.fullCalendar (http://localhost:6297/Scripts/fullcalendar/fullcalendar.js:164:14)

Any plans to move to v2.1.1

There are some nice functionality of drag-n-drop in that version that I would benefit. Like dragging an event outside the calendar.
Do you have any plans to get this done? Since it's your repo, it makes more sense if you do it since you know the file system better.

new work on resourceView-2.1

Hi @seankenny !

I have seen around (#28) that you won't be able to update it to v2.1.x soon and I am really needing it asap.
So, I started doing it by myself = )

I forked the arshaw's v2.1.1, diffed from your implementation and added part of your code there. The result can be seen at kirkeweb/fullcalendar#resourceView-2.1.

With a few lines of code changes, due to the new OOP structure, I have been able to have a quite functional and stable result. There are still some issues, specially when the user start clicking and dragging around, but we already have something presentable (check the demo at demos / resource-views.html)

Now I am starting to test it, and I am inviting you and the community here to consider merging our efforts to continue to work from that branch.

Let me know your thoughts on that.

Repeating events do not appear in the correct day column

Overlay is highlighting incorrect resource column

When the 'selectHelper' option is not true, the highlighting of the area selected by the user is always defaulting to the first resource column.

Issue is in ResourceView.cs in renderSlotOverlay.

Multiple Resource drag and drop support issue v2.0

When you have an event with 3 resources assigned to it and drag one of them to a new resource, it removes the other 2. I wrote a fix to replace the original value with the new value in the array instead.

In the element draggable stop event (line 7544 for me)

I replaced this:

resources = [getResources()[origCell.col + resourceDelta].id];

With:

var newid = getResources()[origCell.col + resourceDelta].id;

                        if ($.inArray(newid, resources) == -1) {
                            for (var i = 0; i < resources.length; i++) {
                                if (getResources()[origCell.col].id == resources[i])
                                    resources[i] = newid;
                            }
                        }

refresh resources

how can i refresh the resources from the view?
Thanks

Destroy and Recreate Resource header when changing date

Hi Sean
We are considering using your fork of the FullCalendar for an upcoming project that requires a "resource" view for days. The only issue which is holding us back is the following requirement:
The "resources" are members of staff who have a start and end date to their employment, when using the previous, next or date setting functions of the day view we will need to re-get and re-render the resource headers.
We considered amending the fetchAndRenderEvents function to call fetchResources, however the fetchResources function is not available (defined) at this scope.
We are also not sure of the sequence of calls to make to re-render the table header once new resources are retrieved.
We are quite willing to do the donkey work and give back if you can point us in the right direction, failing that would you consider completing the above change for a fee?
All the best
Matt

Horizontal resources

There is an older project which does horizontal resources https://github.com/jarnokurlin/fullcalendar

It would be nice if this supported horizontal resources as well as vertical resources.

problem with multiple allday events

When there are defined multiple allday event for 2-nd and next resource, there is only first visible,
Also allday event for 2-nd and next resource are not aligned with first resource allday event.

Regards

How to load and display events by ajax in resourceDay

My source code:

        jQuery('#tennis-calendar').fullCalendar({
            lang: 'en',
            height: 550,
            header: {
                left: 'title',
                center: '',
                right: 'prev,next,today agendaWeek,agendaDay,resourceDay'
            },
            defaultView: 'resourceDay',
            aspectRatio: 3,
            selectable: true,
            selectHelper: true,
            theme: false,
            editable: false,
            axisFormat: 'HH:mm',
            timeFormat: {
                agenda: 'H:mm'
            },
            allDaySlot: false,
            minTime: '07:00:00',
            maxTime: '18:00:00',
            forceEventDuration: true,
            droppable: false,
            hiddenDays: [],
            slotDuration: '00:30:00',
            resources: [{"name":"Court #6","id":"res6"},{"name":"Court #7","id":"res7"}],
            events: {
                url: 'http://tennis.dev/tennis/getDatas?type=event&show=2',
                success: function(data) {
                    console.log(data);
                }
            }
        });

It means, events will be get by Ajax when change date or clicks next, previous ...

But it does not working when loading events by ajax. How can display it?

Thanks,

Add the set a resource thead and tbody cssclass

It would be ideal to be able to specify a cssclass in the resource object to allow for things like colour coding the resource column, etc.

Should work the same as 'className' in the event object to maintain consistency.

Resource Week View

Any plans on a week view version? Or any advice on a starting point if I wanted to try this myself?

can't change language

I need to change language of calendar. I load all language js.
When i use base version of fullcalendar it works perfectly but when i use this fork it don't.
i set language in option

lang: 'it',

can anyone help me?

date time format for events

hello,
as documentation of the trunk using the following syntax to specify the properties of the start and end of an event

"start": "2014-09-03T09: 00"
"end": "2014-09-03T10: 00"

This solution works with all views except with the view resourceDay

the resource day only works if I use the syntax

  new Date (y, m, d, 9, 0)

events are retrieved using ajax / php

There is no way to solve?

freeze pane with horizontal scroll

Hi,
I want to freeze some columns (resource columns) to be freeze and rest other are scrollable horizontally.
is it possible? I am stuck with this.
Please help me out.

When fetching resources with a URL, the URL is hit too many times

The method buildDayTableHeadHTML uses code like this:
var resource = resources()[col];
which loops over each columns.

This makes a call per column to the server.

Add delete icon to events

Add an option 'delete' that will result in a delete icon or similar to appear on the top right of the event.

label of resourceDay button when simple day button is showed

Hallo,
i need to show either button day and resourceDay button
i proved to change label in this way

buttonText: {
prev: '<<',
next: '>>',
prevYear: ' << ',
nextYear: ' >> ',
today: 'oggi',
month: 'mese',
week: 'settimana',
day: 'giorno2',
resoureDay: 'risorsa'
},

but the label of resourceDay button is giorno2.

thanks

eventdrop in resourceday is modifying the day of the event

when we drag an recsource to another resource it is changing the day of the evetn as if it was in week view

revertFunc() not reverting event to original resource column - V2.0

Sean,
Thanks for this work.
I have noticed that if an event is dragged from one resource to another resource column then it is not reverting back to original resource column, on calling revertFunc() from eventDrop callback. Rather it is showing up in new column with the original start and end time.

Thanks,
Sudheer

Not able to get resource ID

When I drop a event in to the calendar. I expect to get some resource information.
The only info I seem to get is all resources when I call the view object.

See my SO question for lot more info:

http://stackoverflow.com/questions/22939239/fullcalendar-get-position-or-get-get-resource

This is fixed by the new update. super thanks! Can be closed!

Selecting the DayResourceView causes an undefined exception.

Refers to DayEventRendered.buildSegments().

Select time-range in multiple Resources in resourceDayView

Is there any way how I can do this?