jarnokurlin / fullcalendar

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

FullCalendar ResourceViews - Full-sized drag & drop event calendar with resource views

This document describes how to modify or contribute to the FullCalendar project. If you are looking for end-developer documentation, please visit the [project homepage](http://arshaw.com/fullcalendar/ and http://tux.fi/~jarnok/fullcalendar-resourceviews/)

Getting Set Up

You will need Git, Node, and NPM installed. For clarification, please view the jQuery readme, which requires a similar setup.

Also, you will need the grunt-cli and bower packages installed globally (-g) on your system:

npm install -g grunt-cli bower

Then, clone FullCalendar's git repo:

git clone git://github.com/jarnokurlin/fullcalendar.git

Enter the directory and install FullCalendar's development dependencies:

cd fullcalendar && npm install

Development Workflow

After you make code changes, you'll want to compile the JS/CSS so that it can be previewed from the tests and demos. You can either manually rebuild each time you make a change:

grunt dev

Or, you can run a script that automatically rebuilds whenever you save a source file:

./build/watch

You can optionally add the --sourceMap flag to output source maps for debugging.

When you are finished, run the following command to write the distributable files into the ./build/out/ and ./build/dist/ directories:

grunt

If you want to clean up the generated files, run:

grunt clean

Writing Tests

When fixing a bug or writing a feature, please make a corresponding HTML file in the ./tests/ directory to visually demonstrate your work. If the test requires user intervention to prove its point, please write instructions for the user to follow. Explore the existing tests for more info.

fullcalendar's Issues

axisFormat option

hi,
would be great to be able to set an axisFormat option just like FullCalendar. If you set a slotMinutes option to 15, the display start being.... not perfect :)

AddResourceSource/RemoveResourceSource ? Dynamic resources changes

Hi !

I wordered how can I change the "resourceSource" using "resources" option, based on JSON that I get from socket.io (I change the calendar with a dropdown list).

I've seen that we can do it with events (http://stackoverflow.com/questions/10940182/change-fullcalendar-event-source-after-load#answer-10941552) but I don't retrieve this functions for resources.

Have you a good way to do it with the resource view or do I need to make a custom mod ?

The package is unusable with bower

Dear developer,

when I'm using bower it downloads fullcalendar instead of fullcalendar-resourceviews. This is the line of my bower.json file:

"fullcalendar-resourceviews": "https://github.com/jarnokurlin/fullcalendar.git#*",

Including compiled version of the package will be a good idea also.

Incompatible Versioning

Using npm install doesn't work with the version ("1.6.4.1") provided in the package.json. NPM uses semantic versions with just 3 parts.
Chnaging back to "1.6.4" made it work for me.

Crash at Resource View for certain time slots

When you set these options at a Resource View it crashes at HorizontalPositionCache with an error "Cannot read property 'left' of undefined"

minTime: "8:20",
snapMinutes:40, //or slotMinutes as well
maxTime:17

The combination of the time slots could be different as well.

I need only the resource view

How to integrate only the resource view into my full calendar

skipWeekend not defined

Hi,

When i set weekends: false, fullcalendar returns error:

skipWeekend is not defined

I cant find this function in src

Poor performance when resources number increases

I'm using the resource month view and when the number of resources is increased, let's say, about 400, the performance is quite poor when drawing the calendar and rendering the events. Is there any way to improve the performance when the resources number is so high?

Feature Request: Selective Column Background Highlighting

Hi Jarno,

Many thanks for creating the ResourceView fullCalendar.

It will be great to have column background highlighting based on dates, just like the today() column is highlighted.

For example, in my case, I want all the National Holiday's to have a different background colour. My idea is to have an Object/Array which can be filled with dates, or include a boolean field in the eventObject. Here is the same issue discussed for the original fullCalendar project : https://code.google.com/p/fullcalendar/issues/detail?id=144

I am not a newbie to javascript but I am also not a professional as you guys. I figured out that the background colour can be applied in the updateCells function. My problem is, I am not able to understand how to supply the dates and then check for them in the updateCells function.

I think this will be a really cool feature and lot of people would love to have it. I would be glad to help you in this, but would need some guidance.

Best,
Ankit

scrolling

gotoDate do not work for resourceDay, resourceWeek, resourceNextWeeks

but it works for resourceMonth.
Similar issie was already exists : #12
The fix is the same :
remove date = new Date();
in calss ResourceNextWeeksView, ResourceWeekView, ResourceDayView function render into else case

Feature request : horizontal scroll

Hi!

I needed a ressource timeline view for a day organization and I found your fork of fullcalendar. It was perfect but no possibility to scroll horizontally. First I added the following css :

// Modified
.fc-view {
    width: 100%; /* needed for view switching (when view is absolute) */
    overflow: hidden;
    overflow-x: scroll; // Here is the interesting line
    }

// Added at the end
#yourSelector table { table-layout: fixed; }
// In order to have a fixed width and a padding in head cells, not required
table.fc-border-separate, table.fc-border-separate.fc td, .fc th {
width: 100px !important;
padding: 5px 3px;
}

So I worked on the production javascript and I modified the following function like this (line 4948) :

function buildSkeleton(maxRowCnt, showNumbers) {
    [...]
    s =
        "<div style='position: relative; margin-top: -10px;'>" +
        "<table class='fc-border-separate' style='width:100%' cellspacing='0'>" +
            [...]
        "</table>" +
        "</div>";

I just added a div which wrap the table, and put a -10px margin-top to make the events displayed correctly. And now events set or created out of the "normal" display frame (I mean with scrolling to see them) are displayed correctly.

(Sorry If I don't post in the right place, I don't really know GitHub. Fell free to indicate me where it should be and how my comments would me the most helpful to you. I also want to add that it might be a bad solution, but it seems to work as I expect)

Feature Request: Produce 2.0 build

2.0 beta is now available on the upstream repository. It has a rewritten core to handle timezones through moment.

It might be a good idea to get this branch inline as well.

Grunt does nothing

Can't compile this. Grunt doesn't even give an error. Nothing happens.

Resource view span 2 days?

Can a resource view display from noon on day 1 until noon on day 2? Any hints on creating this view? Thanks.

"weekends:false" breaks rendering in ResourceNextWeeksView

In the current 1.6.1 flavour version, while "weekends:false" correctly displays the grid by omitting Sat/Sun, the Event Renderer does not handle this. The dateCell function has a "TODO: handle weekends" note, so I presume this is a known issue.

In any case the result is either events displayed incorrectly offset, or halted JavaScript execution if a non-existent column is passed into the HorizontalPositionCache.

I note that the latest code is starting to migrate to a 1.6.4 basis, and I'm happy to assist in the effort.

Good stuff so far otherwise, saved me a ton of time - so thanks!

Inconsistent resource coloring between months.

In my implementation, the resource is identified by the REGION of my event:

But as I change month views, the event color changes, even though the resource remains the same:

I would expect the resource coloring to remain constant from month-to-month.

Element clash on resourceDay view

If an element spans multiple days and maxTime is not set (or set to default value 24), the elements miss the "top:" css property and are displayed stacked on top of the hours.

Here is a demonstration of the problem :
http://jsfiddle.net/rdoursenaud/qefB2/embedded/result

switching from week view to month view offsets events

Switching from week view to month view renders the events offseted one day back. When you switch month back / forth, then it's rendered properly.

addRessource feature not working

i'm trying to programmaticaly add a resource according to this : http://fullcalendar.io/docs/resource_data/addResource/

but it's not working on my week resource view.

additional .data-Field for Ressource-TD

to make the ressource-name clickable it would be helpful to add a data-field to the TD (around Line 4972: ...td data-id='" + id + "' class='fc-resourceName'...)