FullCalendar ResourceViews is a fork from the great Adam Shaw's FullCalendar jQuery plugin that provides a full-sized, drag & drop calendar like the one below.
It currently provides four different resource views which can be used all together or developer can choose which ones to use.
It is open source and dual licensed under the MIT or GPL Version 2 licenses.

Calendar Demo


FullCalendar ResourceViews in Github
FullCalendar ResourceViews Latest build in compressed ZIP with jQuery and demos


>> 25.11.2013 version -Added largePrev and largeNext buttons to switch days more faster when paginating options are used

>> 11.11.2013 version -eventDropOutside callback which is triggered when event is dropped outside the calendar, added paginateResourceWeek and paginateResourceNextWeeks options which can be used to modify the pagination of these views

>> 25.09.2013 version -Bugfixes

>> 14.05.2013 version Merged with latest Fullcalendar version 1.6.1,
   Fixed issue #29 Resize does not work when event is 1 day and weekends off, Fixed issue #24 single all-day events do not display in resource day view, added resourceRender callback

>> 23.01.2013 -Bug fixes, events loading faster!

>> 04.11.2012 -Bug fixes, added boolean option refetchResources, added boolean option readonly to resource object

>> 21.10.2012 -Bug fixes and Loading callback function returns view object now

>> 10.10.2012 -Dayclick callback returns resource information, fixed event dropping revert function, added version numbering for resource views

>> 09.10.2012 -Better handling for weekend events when using weekends: false. Resource is passed on when using external events and drop function

>> 05.10.2012 -fixed highlight issues

>> 04.10.2012 -added support for weekends false to all views

Old builds


Jarno Kurlin
Contact in Github
Issue tracker in Github
Donate via Paypal

Examples & Documentation

FullCalendar ResourceViews should be fully compatitle with FullCalendar documentation

Here's extra options and documentation for the new views.

Added view names in ResourceViews:

 resourceDay :: Shows a single day in calendar.
 resourceWeek :: Shows a single week in calendar.
 resourceNextWeeks :: Shows ongoing week and 3 weeks after that in same calendar. 
 resourceMonth :: Shows a single month in calendar.

Extra options in ResourceViews:

largePrev and largeNext buttons :: Buttons can be used to change dates faster when paginate options are used
paginateResourceWeek and paginateResourceNextWeeks :: How many days do we paginate? Default: 7
refetchResources :: Determines if resources are refetched every time view changes. Default: false	
numberOfWeeks :: Determines the number of weeks in resourceNextWeeks view. Default: 4

weekPrefix :: Week prefix in resourceNextWeeks view, default: Week

resources :: Introduces available resources to calendar.  
	Resource id links to Event objects resource property. Event objects resource can be also an array!
	This is a basic JSON-array which includes resource name and id. It can also include readonly boolean which sets resource readonly.
	For example:
		resources: [
				name: 'Resource 2',
				id: 'resource2'
				name: 'Resource 1',
				id: 'resource1',
				readonly: true 
		events: [	
				title: 'Long Event',
				start: new Date(y, m, d-5),
				end: new Date(y, m, d-2),
				resource: 'resource1'
				title: 'Meeting',
				start: new Date(y, m, d, 10, 30),
				allDay: false,
				resource: ['resource4','resource2']
You can also insert a URL in the resources option (like in events):
resources: 'http://hostname/jsonresources.php'	

EventDropOutside is triggered every time event is dropped outside the calendar:
eventDropOutside: function( event, ev, ui ) {
	alert('event dropped outside the calendar!');

Weekend headers in different color? :: You can use class fc-weekend to affect to weekend headers and fc-weekend-column for weekend columns for example background color.

A VERY simple way to pass multiple resources to FullCalendar with PHP

// This is a sample array
$resources = array(
		array("name" => "Resource 1", id => "resource1"),
		array("name" => "Resource 2", id => "resource2")

// json_encode encodes array
$resources_JSON_array = json_encode($resources);

//...and then in Fullcalendar JavaScript:
resources: $resources_JSON_array,

A VERY simple way to pass multiple resources to FullCalendar with jQuery ajax

// In Fullcalendar options you provide URL. Fullcalendar will request this page via ajax:
resources: 'getResources.php',

// getResources.php echoes JSON array
$resources = array(
		array("name" => "Resource 1", id => "resource1"),
		array("name" => "Resource 2", id => "resource2")
echo json_encode($resources);

External events and resources example:

When using external events, you can get resource data this way:
drop: function(date, allDay, ev, ui, resource) {
	var resourceId = resource.id; // this is resource id
	var resourceName = resource.name // this is resource name