My favorites | Sign in
Project Home Issues
New issue   Search
for
  Advanced search   Search tips   Subscriptions
Issue 144: Background events (or "annotations") like business hours. Different colors
92 people starred this issue and may be notified of changes. Back to list
Status:  Released
Owner:  ----
Closed:  Nov 2014


Sign in to add a comment
 
Reported by stefan.k...@gmx.net, Oct 23, 2009
How about having different background colors for office time (9am to 5pm)
in week and day view.

see image attached
Bild3Fullcalendar.png
15.8 KB   View   Download
Nov 10, 2009
Project Member #1 adamrs...@gmail.com
in an upcoming release, i will provide a way to style this. good idea, thanks
Status: Accepted
Mar 30, 2010
Project Member #2 adamrs...@gmail.com
 Issue 424  has been merged into this issue.
Apr 11, 2010
#3 hinde...@gmail.com
Yes, this would really help me too.  The only thing I would like to add is that it 
would be very useful to be able to specify multiple time ranges per day for the 
different background coloring.  For example if the office is open from 9am-12pm, and 
from 1pm-5pm.  Thanks!
May 25, 2010
#4 nic.bour...@gmail.com
Yes, very useful feature, I actually asked a stackoverflow question about this: 
http://stackoverflow.com/questions/2895077/fullcalendar-change-agendaday-background-
color

Apparently someone else asked the same question and had an answer: "It's definitely 
possible. "
Jun 8, 2010
#5 pierre.p...@gmail.com
I try to do this feature and the problem for the moment is to view columns's borders. I continu and post the solution if I found something
Aug 25, 2010
Project Member #6 adamrs...@gmail.com
 Issue 574  has been merged into this issue.
Aug 25, 2010
Project Member #7 adamrs...@gmail.com
(No comment was entered for this change.)
Summary: different background colors for business hours (or whatever)
Sep 8, 2010
#8 shaziash...@gmail.com
Hi,

Any idea how to show time slots in different colors in v1.4.6?
Sep 8, 2010
#9 golf...@gmail.com
Also, block event adding during those times so that no events can be scheduled outside of business hours
Sep 8, 2010
#10 nic.bour...@gmail.com
Also, would be great if you could use an array (start,stop) so that you can input lunch break etc. Why not use something similar to thé current évent object and be able to havé a JSON feed as well. Of course, thats asking for a lot :) But that would be supreme. +1 for blocking events with a boolean option.

Sorry for accents n Stuff iPhone crap auto correct.
Oct 22, 2010
#11 fred.gasse
Hi,

Any update on whether you are planning to implement this feature? 

BTW, my hat off to you for your hard work on this amazing plugin. For me by far the most useful of all jquery plugins out there.
Nov 10, 2010
#13 vneh...@gmail.com
How would you pass values for the working window ? as an event of a special type? or some other option (or list of working windows?)

i'm looking at passing an event with a special type on it, then in the event render when i see this type i don't render it.  Then i color the background and it sort of works, i don't lock events but you could do this in eventRender.  
Nov 10, 2010
#14 gprod....@gmail.com
Yes we could pass a simple option array with work times or a single work time from/to which would apply to all days for example.
Nov 11, 2010
#15 fred.gasse
In my opinion work/business hours is one of many possible use cases that this enhancement should bring. I don't think it should be restricted to just doing that. 

In an ideal world the calendar's background should be completely customizable in terms of colouring and behaviour. 
It could receive an array of days and times which have a special behaviour and carry the CSS class and a callback action related to those areas. This callback action would be the one deciding whether the area is blocked or triggers a warning for instance.

I have attached an illustration of how it could look on our own version of the calendar wihtout any events.
calendar background coloured.png
102 KB   View   Download
Nov 25, 2010
#16 2ben.da...@gmail.com
Hi all, any news on this matter ? Fred.gasse, could you provide a patch of your code ? That would really be appreciated :)
Jan 29, 2011
#17 contact%...@gtempaccount.com
My suggestion would be to first recognise that business hours are a set of recurring events. I think recurring events should be handled server side (refer to  Issue 116  - https://code.google.com/p/fullcalendar/issues/detail?id=116). However, even if these recurring events were handled server side it would still be necessary, IMO, to extend the fullcalendar event object to accept a custom 'business hours' feed. I will argue/demonstrate this with an example.

In the simplest case, a business may be open 9-5 Monday-Friday. However, a more complex use-case may be one where you want the flexibility to represent the hours that individual staff members working; i.e. their roster. In such a case, a person may not be a full time employee; they may work Tuesday, Wednesday, and Thursdays. On Tuesday they could work in the morning, 9-12. On Wednesday they may work in the afternoon, 1-5. On Thursday they may work all day with a lunch break, 9-12 and 1-5. This is getting complicated quickly.

However, if these 'opening hours' are treated as a special kind of event which disables/greys out/etc the time period in which that event takes place, it means that the code to generate these recurring events can be delegated to the server. Then, the event object of fullcalendar could be extended to accept an array/json feed representing business hours. Something like this:

$('#calendar').fullCalendar({
    events: [{
      feed: "/myfeed",
      type: "business_hours"
    }]
});

By specifying a special 'type' parameter fullcalendar could recognise that this feed represents business hours, and instead of placing the events as per usual on the calendar, it disables/greys out/etc the appropriate time periods.

As I mentioned in  Issue 116 , the best ruby gem I have found for this task is https://github.com/seejohnrun/ice_cube. Per my above example, an object representing the recurring event I made up above could be created by:

schedule = IceCube::Schedule.new(Time.now, :duration => 3600)
schedule.add_recurrence_rule IceCube::Rule.hourly.day(:tuesday).hour_of_day(9,10,11)
schedule.add_recurrence_rule IceCube::Rule.hourly.day(:tuesday).hour_of_day(13,14,15,16,17)
schedule.add_recurrence_rule IceCube::Rule.hourly.day(:tuesday).hour_of_day(9,10,11,13,14,15,16,17)

schedule.to_s # "Hourly on the 9th, 10th, and 11th hours of the day on Tuesdays / Hourly on the 13th, 14th, 15th, 16th, and 17th hours of the day on Tuesdays / Hourly on the 9th, 10th, 11th, 13th, 14th, 15th, 16th, and 17th hours of the day on Tuesdays"

This could can be serialized and stored in the database via schedule.to_yaml. Then it would, presumably, not be difficult to create a JSON feed from this, to be consumed by fullcalendar per my above example.
Jan 29, 2011
#18 contact%...@gtempaccount.com
See http://sai.perchard.com/post/3007717977/ruby-rails-calendars-recurring-events-and-business for a blog post I wrote about this. It is basically a re-hash of my comment above. I look forward to feedback!

Also, slight error in my above comment; the code was supposed to be :tuesday, :wednesday, :thursday.
May 21, 2011
#20 lcrodrig...@gmail.com
I could make it work with the Day view which is simpler. But it's not so easy with the week view as we don't have separate cells there. It will probably need some more extra refactoring like having the corresponding cells in the table so we could be able to customize the colors. I will give a try later on.

I have modified the demos/agenda-views.html to show how it works. Needs a lot of refactoring and simplify the inputs but at least the hours are marked correctly.

This is just visual changes, there is no restriction to drag or any events.

Hope this helps someone else.

You may grab the code here: https://github.com/lcrodriguez/fullcalendar
Jun 10, 2011
#23 rexinma...@gmail.com
I just implemented your business hours logic in a fullcalendar inside my project. Is there any chance to get this work with different values within one week? My first try was to insert seven divs inside one row to differ between the days, but the performance is really bad. Any ideas?
Jun 10, 2011
#24 pchig...@gmail.com
Simple way to get buisness hours highlight (diff for fullcalendar-1.4.11).
You should define "worktime" css class somewhere (for example - .worktime { background-color: green !important; opacity: 0.2; }).
Start/End hours can be changed by "firstBHour"/"lastBHour" options.
bhours-patch.diff
1.2 KB   View   Download
Jul 26, 2011
#25 jegathe...@navigateitsolutions.com
Hi, I posted a quick and dirty solution here at stack overflow as an answer.
http://stackoverflow.com/questions/2895077/fullcalendar-change-agendaday-background-color/6835222#6835222

Anybody interested can use this solution till an official fix comes.
calendar-preview.png
142 KB   View   Download
Dec 2, 2011
#26 victo...@gmail.com
Hello, any other words on this matter? Is it possible to have the background calendar colored just like Fred said back in 2010?
  
Dec 14, 2011
#27 gugli...@gmail.com
Any news about this feature?
Jul 3, 2012
#30 blanco...@gmail.com
Hi,

I've done a little hack that could help. That's work for me beceause I need to do request to my server for get informations about hours to put in different colors. So what I've done is to create classes that inform me which element to change. So I always use the callback "viewDisplay" to remove the class on all elements and after that do the request and change the background color of the element that I want.


So here is the code :

function buildSkeleton() {
		var headerClass = tm + "-widget-header";
		var contentClass = tm + "-widget-content";
		var s;
		var i;
		var d;
		var maxd;
		var minutes;
		var slotNormal = opt('slotMinutes') % 15 == 0;
		
		s =
			"<table style='width:100%' class='fc-agenda-days fc-border-separate' cellspacing='0'>" +
			"<thead>" +
			"<tr>" +
			"<th class='fc-agenda-axis " + headerClass + "'>&nbsp;</th>";
		for (i=0; i<colCnt; i++) {
			s +=
				"<th class='fc- fc-col" + i + ' ' + headerClass + "'/>"; // fc- needed for setDayID
		}
		s +=
			"<th class='fc-agenda-gutter " + headerClass + "'>&nbsp;</th>" +
			"</tr>" +
			"</thead>" +
			"<tbody>" +
			"<tr>" +
			"<th class='fc-agenda-axis " + headerClass + "'>&nbsp;</th>";
		for (i=0; i<colCnt; i++) {
			s +=
				"<td class='fc- fc-col" + i + ' ' + contentClass + "'>" + // fc- needed for setDayID
				"<div>" +
				"<div class='fc-day-content'>" +
				"<div style='position:relative'>&nbsp;</div>" +
				"</div>" +
				"</div>" +
				"</td>";
		}
		s +=
			"<td class='fc-agenda-gutter " + contentClass + "'>&nbsp;</td>" +
			"</tr>" +
			"</tbody>" +
			"</table>";
		dayTable = $(s).appendTo(element);
		dayHead = dayTable.find('thead');
		dayHeadCells = dayHead.find('th').slice(1, -1);
		dayBody = dayTable.find('tbody');
		dayBodyCells = dayBody.find('td').slice(0, -1);
		dayBodyCellInners = dayBodyCells.find('div.fc-day-content div');
		dayBodyFirstCell = dayBodyCells.eq(0);
		dayBodyFirstCellStretcher = dayBodyFirstCell.find('> div');
		
		markFirstLast(dayHead.add(dayHead.find('tr')));
		markFirstLast(dayBody.add(dayBody.find('tr')));
		
		axisFirstCells = dayHead.find('th:first');
		gutterCells = dayTable.find('.fc-agenda-gutter');
		
		slotLayer =
			$("<div style='position:absolute;z-index:2;left:0;width:100%'/>")
				.appendTo(element);
				
		if (opt('allDaySlot')) {
		
			daySegmentContainer =
				$("<div style='position:absolute;z-index:8;top:0;left:0'/>")
					.appendTo(slotLayer);
		
			s =
				"<table style='width:100%' class='fc-agenda-allday' cellspacing='0'>" +
				"<tr>" +
				"<th class='" + headerClass + " fc-agenda-axis'>" + opt('allDayText') + "</th>" +
				"<td>" +
				"<div class='fc-day-content'><div style='position:relative'/></div>" +
				"</td>" +
				"<th class='" + headerClass + " fc-agenda-gutter'>&nbsp;</th>" +
				"</tr>" +
				"</table>";
			allDayTable = $(s).appendTo(slotLayer);
			allDayRow = allDayTable.find('tr');
			
			dayBind(allDayRow.find('td'));
			
			axisFirstCells = axisFirstCells.add(allDayTable.find('th:first'));
			gutterCells = gutterCells.add(allDayTable.find('th.fc-agenda-gutter'));
			
			slotLayer.append(
				"<div class='fc-agenda-divider " + headerClass + "'>" +
				"<div class='fc-agenda-divider-inner'/>" +
				"</div>"
			);
			
		}else{
		
			daySegmentContainer = $([]); // in jQuery 1.4, we can just do $()
		
		}
		
		slotScroller =
			$("<div style='position:absolute;width:100%;overflow-x:hidden;overflow-y:auto'/>")
				.appendTo(slotLayer);
				
		slotContent =
			$("<div style='position:relative;width:100%;overflow:hidden'/>")
				.appendTo(slotScroller);
				
		slotSegmentContainer =
			$("<div style='position:absolute;z-index:8;top:0;left:0'/>")
				.appendTo(slotContent);
		
		s =
			"<table class='fc-agenda-slots' style='width:100%' cellspacing='0'>" +
			"<tbody>";
		d = zeroDate();
		maxd = addMinutes(cloneDate(d), maxMinute);
		addMinutes(d, minMinute);
		slotCnt = 0;
		var tmp = t.getColCnt();
		for (i=0; d < maxd; i++) {
			minutes = d.getMinutes();
			
			s += "<tr class='fc-slot" + i + ' ' + (!minutes ? '' : 'fc-minor') + "'><th class='fc-agenda-axis " + headerClass + "'>" + ((!slotNormal || !minutes) ? formatDate(d, opt('axisFormat')) : '&nbsp;') + "</th>";
			
			for(var hello = 1;hello<=tmp;hello++){
				s += "<td class=\"" + contentClass + "\"><div class=\"CellHack fc-cell_"+d.getHours()+"_"+minutes+"_"+hello+"\" style=\"position:relative\">&nbsp;</div></td>";
			}
			
			s += "</tr>";
			/*s +=
				"<tr class='fc-slot" + i + ' ' + (!minutes ? '' : 'fc-minor') + "'>" +
				"<th class='fc-agenda-axis " + headerClass + "'>" +
				((!slotNormal || !minutes) ? formatDate(d, opt('axisFormat')) : '&nbsp;') +
				"</th>" +
				"<td class='" + contentClass + "'>" +
				"<div style='position:relative'>&nbsp;</div>" +
				"</td>" +
				"</tr>";*/
			addMinutes(d, opt('slotMinutes'));
			slotCnt++;
		}
		s +=
			"</tbody>" +
			"</table>";
		slotTable = $(s).appendTo(slotContent);
		slotTableFirstInner = slotTable.find('div:first');
		
		slotBind(slotTable.find('td'));
		
		axisFirstCells = axisFirstCells.add(slotTable.find('th:first'));
	}

So when the callback "viewDisplay" is called, I do :

$('.CellHack').removeClass('MyClass');

and then :

if(view.name=='agendaWeek'){
									$('.fc-cell_0_0_2').addClass('ToTest');
								}else{
									if(view.name=='agendaDay'){
										$('.fc-cell_0_0_1').addClass('ToTest');
									}
								}

So, the class is in reality : ".fc-cell_"+hour+"_"+minutes+"_"+ColNumber

So in the week view, ColNumber = 1 to 7 and on the DayView ColNumber = 1 always.

That's work very well. I've done a little hack to for the monthView. I can post-it if somebody need it.

Give me your impression about this ^^ I don't know if it's the best way to do it, but at least it works well for me :)

Cheers

RB
Sep 26, 2012
#31 burkhard...@gmail.com
Is this project still under active development? 3 years after this feature request, there's still no satisfactory solution :(
Sep 27, 2012
#32 jonathan...@gmail.com
Would be great to hear if anyone has come up with a working solution and is willing to share!?
Oct 8, 2012
#33 jonathan...@gmail.com
Hi Adam ,
Any news for this enhancement?
Oct 10, 2012
#34 merme...@gmail.com
Really nice job RB !
Nov 21, 2012
#35 apre...@gmail.com
Thank you RB !
Nov 26, 2012
#36 mikael.l...@vincit.fi
Hi all,

I just wrote some simple annotation support to do this kind of feature, it can be found in 

https://github.com/elhigu/fullcalendar 

and hopefully gets to merged to official branch. 

In my approach annotations are added somewhat same way than the events (but they does not currently support any other ways, but to be given as table of maps). 

		$('#calendar').fullCalendar({
                        ....
			events: [
				{
					title: 'All Day Event',
					start: new Date(y, m, 1)
				}
			],
			annotations: [{
					start: new Date(y, m, d, 13, 0),
					end: new Date(y, m, d, 15, 30),
					title: 'My 1st annotation', // optional
					cls: 'open', // optional
					color: '#777777', // optional
					background: '#eeeeff' // optional
				}]		
		});
		
	})

There is an example how to use the feature in:

https://github.com/elhigu/fullcalendar/blob/master/demos/annotations.html

And a screenshot:

http://screencast.com/t/3XzcyYOOzal

Any feedback is appreciated!

Cheers, Mikael Lepistö

Nov 27, 2012
#37 gprod....@gmail.com
Wow that seems very handy !
Thank you Mikael, I'm certainly going to try this out
Dec 12, 2012
#38 r.k.p.pi...@gmail.com
Thanks RB, it works like a charm! It would be really great if this would be supported out of the box though. :-)
Dec 13, 2012
#39 jonathan...@gmail.com
Hi guys, sorry to have to ask but could anyone send me the ready-to-use js files for either Mikael's extension or RB's hack? I am pretty new to this and don't know how to build a release myself.
Dec 16, 2012
#40 drm...@clearhealthmedia.com
Thanks Mikael, this works well.  It was just what I needed.  I have managed to fiddle your code to work with Ike Lin's resource view.  You add the same code that you have in AgendaView.js to ResourceView.js except instead of this in the Render annotations function:

var left = colContentLeft(dayIndex) - 2;
var right = colContentRight(dayIndex) + 3;
var width = right - left;

replace with:

	if (!ann.resourceId) {
                var left = colContentLeft(dayIndex) - 2;
		var right = colContentRight(dayIndex) + 3;
		var width = right - left;
         } else {
                   var leftCol = ann.resourceId-1; //use the -1 if your resource numbering starts at 1
                    var rightCol = ann.resourceId-1; //use the -1 if your resource numbering starts at 1
                    var left = colContentLeft(leftCol) - 2;
                    var right = colContentRight(rightCol) + 3;
                    var width = right - left;
          }

Each annotation must have a resourceId as well as start and end, otherwise it will be rendered in the first column of the resource view by default. 

My question is though, can this be tied anyway to a json feed.  I can access a feed using viewDisplay, but I have no idea how to link that to the annotations.  This is the main limitation of your great implementation.

Thanks,

Matt
Feb 21, 2013
#41 austin.w...@gmail.com
Thank you Mikael && Matt!
Mar 22, 2013
#42 stowaway...@gmail.com
I would also like to see a way to implement this by means of a json feed.

Thanks to all those who have contributed to FullCalendar!
Mar 22, 2013
#43 floriandegenhardt85
Hy, it looks nice, hvae you a compile fullcalendar.js for us, which we can Download?

Thx
Mar 22, 2013
#44 mikael.l...@vincit.fi
Stowaway: yeah would be nice to set these as versatile ways that the normal events. floriandegenhardt I'll committed compiled version to github: https://github.com/elhigu/fullcalendar/blob/master/build/fullcalendar.zip
Mar 24, 2013
#45 floriandegenhardt85
Thanks a lot @mikael
Mar 25, 2013
#46 floriandegenhardt85
var width = right - left;

Better adding Borderwidth of the columns

var width = right - left-1;
Apr 15, 2013
#48 goo...@gobnet.eu
@Mikael: Thanks, great annotations plugin.

But how can i load my annotations by ajax? as i do for the events.

Thanks
Apr 30, 2013
#49 mikael.l...@vincit.fi
I updated my fork to the latest fullcalendar version and now precompiled version is in  https://github.com/elhigu/fullcalendar/blob/master/dist/fullcalendar-1.6.1.zip

@goo...@gobnet.eu: There is no support yet for reading annotations from feed.
Jun 11, 2013
#52 t.shoj...@gmail.com
How to add annotations when user click a prev/next button??
Jun 12, 2013
#53 HafiziNo...@gmail.com
i make sure rule how to change @ use different background colors by time range..
It work fine but take time to load because each for td @ tr need to add class

Code :
============================================================================
  $('.fc-agenda-slots tr').each(function() {
                var $tds = $(this).find('td');
                if($tds.length != 0) {
                    var newClass = '.fc-slot' + count;
                    $(newClass + ' th').each(function() {
                        var theValue = $(this).eq(0).text();
                        var theDate = Date.parse(theValue);
                        var rangeTimeFrom = Date.parse("19:00");
                        var rangeTimeTo = Date.parse("23:00");
                        if(theDate >= rangeTimeFrom && theDate <= rangeTimeTo){
                            $tds.addClass("editWorking");
                        }
                    });
                    count = count + 1;
                }
            });
============================================================================
CSS 
.editWorking{ 
	background-color : #9F85E5 !important;
}
Aug 1, 2013
#54 deividso...@gmail.com
I managed to make annotations from Mikael work with data from the database. After obtaining the information I formatted the data to suit the plugin. So I passed the information to the view, inserting inside the javascript.
Not an elegant solution, but it works.
Aug 13, 2013
Project Member #55 adamrs...@gmail.com
(No comment was entered for this change.)
Summary: Different background colors for business hours (or whatever) (was: different background colors for business hours (or whatever))
Labels: -Type-Defect -Priority-Medium Type-Feature
Aug 25, 2013
Project Member #56 adamrs...@gmail.com
 Issue 1952  has been merged into this issue.
Sep 9, 2013
#57 margalit...@gmail.com
Deivid - can you post a working example of what you did?
Oct 22, 2013
#58 burkhard...@gmail.com
@Mikael @Adam: I had a look into your code and merged it into 1.6.4 at https://github.com/hardchor/fullcalendar . Looking through how event data is being fetched and handled, I found that in order to achieve the same functionality for annotations (e.g. fetch from JSON feed, gcal, callback) we'd have to duplicate a lot of existing code. Rather than that (or trying to refactor the fetch mechanism), why don't we just extend the existing event model with a "isAnnotation" flag and then use your method to render them in the view? 

P.S.: Anyone mind moving this conversation over to github since that's where most of the development seems to be going on and it's easier to ping people etc.?
Oct 22, 2013
#59 mikael.l...@vincit.fi
@burkhard, Great to hear that and I'm sorry about my branch being a bit messy from some rebase mess I made and never fixed... 

About the implementing fetching annotations I agree completely. I also examined few months ago how to implement it and indeed there would be lots of duplication and event fetching functionality should be reused. 

Instead of using event object I've been just planning to extend event fetching functionality to support also fetching annotations, however your idea seems to be even easier to implement. I like it.

+1 for moving discussion to github. 

Btw. would be great to have some community branch of full calendar, where community could decide which features should be merged in (of course after reviews and good testing). (Actually I wouldn't vote e.g. for my version of this feature being added to main before having  more clean and complete implementation and proper tests included)
Oct 28, 2013
#61 burkhard...@gmail.com
Right everyone, I've extended https://github.com/MESHMD/fullcalendar/tree/background-events partly with code from Mikael's solution. This allows to define events (from any source) as "isBackground: true".

The branch is at https://github.com/hardchor/fullcalendar and the built package at https://github.com/hardchor/fullcalendar/raw/master/dist/fullcalendar-1.6.4.zip
Jan 21, 2014
#62 etn...@gmail.com
Hey guys, anyone have news about this update? I saw 2 "unofficial" versions here. @adamrshaw how about merge this into the official project?
Feb 6, 2014
#63 burkhard...@gmail.com
There's an open PR in https://github.com/arshaw/fullcalendar/pull/78 . Be worth following that.
Jun 7, 2014
Project Member #64 adamrs...@gmail.com
 Issue 2067  has been merged into this issue.
Jun 7, 2014
Project Member #65 adamrs...@gmail.com
 Issue 2067  brings up the question of what to do for "all-day" "background" events. like holidays. shade in the entire all-day cell? what about when timed events reside in a cell in month view? should that shade the entire day too?
Jun 12, 2014
Project Member #66 adamrs...@gmail.com
 Issue 2183  brings up that one might want every *slot* that a background event covers to have a specific piece of text. (see attached TIFF). Maybe this should just be implemented with multiple single background events.
Jun 21, 2014
#67 gprod....@gmail.com
IMHO "background events" can't be displayed on month view and so shouldn't if they are "allday" either.

About the events covered by background events, this seems to me a little bit too specific and can be managed by the server.
Jun 30, 2014
#69 Kris.Dep...@gmail.com
@adam and others: great work.
As i love the work and design, i'm trying to use the plugin is some vb.net MVC projects. But to do that I realy need the annotation blocks. Reading all of the above, I deside to modify the 2.02 to meet my needs. 
The event object can be used to hold annotations so I use (copy) or modified (generalized, renaming vars) the methods for the event sources and added an AgendaAnnotationRenderer based on the AgendaEventRenderer. Unfortunualy I didn’t get npm packages to download and install nicely on my win 8.1 so I just put it all in the merged js and it worked with json feeds. 
I’ll attach the file but note that I’m not really familiar with jquery.

fullcalendar.js
244 KB   View   Download
Jul 16, 2014
#70 sacuiu.a...@gmail.com
Is there any way to use the select method over the "isBackground:true" ?
Jul 25, 2014
#71 remi...@gmail.com
@Kris, can you attach some demo file how to use annotations with your fullcallendar? I mean something like https://github.com/elhigu/fullcalendar/blob/master/demos/annotations.html this one?
Aug 4, 2014
#72 edisones...@gmail.com
Hi!. Does anybody have version 2.0.2 working with annotations? Kris.Dep's didn't work for me :(. Thank you in advance.
Aug 8, 2014
#73 Kris.Dep...@gmail.com
hmmm, my version needs some work. The annotations only work with a JSON feed (what I needed :) )

working JSON example: http://jsfiddle.net/hwb2yxx4/
Aug 15, 2014
#75 marie.we...@gmail.com
I modified Kris's file, it is not finished and not perfect, but it works.

This is my annotations array : 
annotations : [
	{
		start: moment('2014-08-12 08:30:00'),
		end: moment('2014-08-12 15:30:00'),
		title: 'My 1st annotation',
		cls: 'open', 
		color: '#777777', // optional
		background: '#aa3939' // optional
	},{
		start: moment('2014-08-13 15:30:00'),
		end: moment('2014-08-13 16:45:00'),
		title: 'On vacations',
		cls: 'vacation', 
		color: '#777777',
		background: '#aa3939' // optional
	},{
		start: moment('2014-08-14 06:00:00'),
		end: moment('2014-08-14 16:00:00'),
		title: 'Overlapping annotation',
		cls: 'open', 
		color: '#777777', // optional
		background: '#aa3939' // optional
	}
]
fullcalendar_with_annotations_2.0.2_modified.js
197 KB   View   Download
Aug 18, 2014
#76 da...@dabrill.com
I ran into the same requirement and solved it with some CSS work.  You have to discover which classes correspond with the table rows that you want to highlight based on the minTime and maxTime that you are using but it works better for me than any of the other suggestions in this thread.  Here is the style that I am using:

    <style type="text/css">
        .fc-slot2, .fc-slot3, .fc-slot4, .fc-slot5, .fc-slot6, .fc-slot7, .fc-slot8, .fc-slot9, .fc-slot10, .fc-slot11, .fc-slot12, .fc-slot13, .fc-slot14, .fc-slot15, .fc-slot16, .fc-slot17, .fc-slot18, .fc-slot19 {background-color:#eeeebb;}
    </style>

Aug 18, 2014
#77 da...@dabrill.com
Oh, more details on what I put above, I have this minTime and maxTime:

            minTime: "07:00:00",
            maxTime: "19:00:00",

and my goal was to highlight 8:00 AM to 5:00 PM in the agenda view.  
Aug 21, 2014
#78 edisones...@gmail.com
Thank you Marie!. That worked for me while on the 'week' and 'day' views. 
Month still gives me a JS error. I appreciate any hint or help on where to tweak to avoid annotation rendering on Month view.
Aug 22, 2014
#79 DoverAu...@gmail.com
@marie.we...

I seem to have gotten the altered file to work somewhat, but the titles of the annotations are not appearing. Any suggestions as to why this may be. I could not get the earlier version of kris' edit to work at all. The blocks appear fine in the background, but there are no errors thrown against the annotations code, so i'm not sure where to start.
Aug 22, 2014
#80 DoverAu...@gmail.com
i worked a bit with the titles issue. my main concern is on the fly json injection? anybody have tips on getting that to work right? I have it working great with events but i cannot seem to get it to render an annotation dynamically. I have manually entered an array in the instantiation code, but i'm doing terribly with the json feed option.  
Aug 23, 2014
#81 danialte...@gmail.com
can I feed annotation with json?
Aug 25, 2014
#82 zerobo...@gmail.com
I like this plug-inn calendar! I used the css to mark as unavailable some periods of time (week and day views). After I've done an update to 2.1.0 beta 3, the .fc-slots is no longer working. Any idea how to make this working? What js files do I need to use the annotations?
Aug 25, 2014
#83 marie.we...@gmail.com
@DoverAu.. Actually, I didn't work on the title, but I think it is in the renderAnnotations function. 
I'll try take a few minutes to make it works. 
Aug 25, 2014
#84 batistao...@gmail.com
This functionality has been suggested for almost 5 years! 
Is evident that it would be useful and necessary for many people. 

It would be so much better and simpler if Adam was more open and accept that the community can help the plugin to be much better and faster. I understand that is not productive only one person working on a project with so many demands. It is already an open source project, but missing it be collaborative. In fact, no such false collaboration he does. 

Adam threatens to happen with the project it has already happened with several others. The community is tired of being held hostage and creates a fork that ends up becoming more popular and swallows the original.
Aug 25, 2014
#85 es...@inspired.no
To #84. Adam has put down a lot of work into this plugin and has recently released a new version with some great new developments - including commits from members of this community who has spent time to contribute to the project. I suggest you are more respective to people who spends a lot of their free time to develop a *free* plugin for users such as yourself. There is no need for that attitude or those choice of words.

This project has, as you can see in this forum and with the pull requests, many suggestions. Deciding which features to implement and how to do so is not a trivial task.

For this functionality there are already many suggestion on how to handle it that can easily be implemented in your own project.

I also hope to see some type of annotation to handle business hours but so far I haven't seen a great flexibe solution in the pull requests (while they are workable). I'm sure Adam would accept your pull request if write a great flexible solution for this issue.
Aug 25, 2014
#86 batistao...@gmail.com
#85, You are mistaken. 

I in no way meant to disrespect or belittle the work of Adam. 

I did exactly the opposite. I told him he did and he does an excellent job. But he is hardly alone. 

I am very active in collaborative projects for free. I use my spare to help improve the design time. Often even use my work schedule to help in projects, leaving aside the MY JOB, it pays my bills. 

Take the example of framework Yii2. Probably one of the best PHP frameworks available today. 
https://github.com/yiisoft/yii2 

Are 278 contributors. 
46 contributors with over 10 commits. 
I have over 40 commits. 
We know who "owns" the project, but he does not care about that. He does not care to centralize all decisions. The community is interested in helping more because the project is receptive to our help, unlike Adam. 
I have also sent some PR for Adam, but the answer is standard. In more polished form, but the meaning is this: do not care about your opinion and your code. The only thing I allow you to do is open an issue on Google. 

Honestly, you really believe that this is a collaborative project?
Aug 25, 2014
#87 DoverAu...@gmail.com
@marie 
I did resolve the titling issue, I had to fiddle a bit with the javascript, but issues getting a newline to stick in there. 
MY major issue now is loading the annotations in the same way as I load events, from an ajax event which delivers a parsed json stream.
(call php with ajax, receive back json)
Aug 25, 2014
#88 DoverAu...@gmail.com
in regards to the titling issue, i ended up just merging the time and title for now, and separating them with a <br />. You have to assign it using .HTML instead of .text though.
<code>
eventElement.find('div.fc-annotation-time').html( time +"<br />"+  event.title);
</code>
Aug 26, 2014
#89 marie.we...@gmail.com
@Dover, I will do the same thing, my result comes from a webservice. 

Just take out the annotations array from the json result, parse it to a new one, with a good format for the dates, and in the fullcalendar declaration : 

annotations : your_array, //here use a variable instead of the array directly
Aug 26, 2014
#91 DoverAu...@gmail.com
I've been close a couple of times. I'm still unable to generate them as easily as events. I've been able to assign a variable and a function, though both were resulting from the same array, copied from the original location. What i'd like to do is send an annotation directly to the renderer, similar to an event. It won't seem to handle that though.
Aug 26, 2014
#92 es...@inspired.no
#91 see https://gist.github.com/espen/4be0d6f43eb0328230a3

This is roughly what I use in my app. I didn't test this exact code but the main code is there to be able to re-render annotations based on an external request. It is based on one of the pull requests.
Aug 27, 2014
#93 DoverAu...@gmail.com
I'll see if i can get it to work... this seems ridiculous at this point, I understand the project has been under major bugfixing, but the ability to render an event in the background seems like a primary feature for a calendar. I do it on my paper one....

Aug 27, 2014
#94 DoverAu...@gmail.com
I didn't mean your snippt btw espen, I just mean the effort put forth by all these people, and still i'm not able to get much success from any of the code posted here. 
Aug 28, 2014
#95 woakes07...@gmail.com
@espen i have been trying to get this to work aswell and havent had much success in usingt the code from your gist. could you maybe demistrate adding a view to the gist. 
Aug 28, 2014
#96 es...@inspired.no
#95 'view' is the view object from FullCalendar. See http://arshaw.com/fullcalendar/docs/views/View_Object/.

See updated gist for example with render callback. https://gist.github.com/espen/4be0d6f43eb0328230a3#file-calendar-js
Aug 29, 2014
#97 edisones...@gmail.com
Hi @espen. I gave your code a try and it's giving me a javascript error at "view.timePosition is not a function". I'm working with FullCalendar v2.0.2 ans the view Object doesn't seem to have that "timePosition" function anymore. Do you know is there is a replacement or another way to achieve what this function did in v2.0.2?. Thanks.
Sep 2, 2014
Project Member #98 adamrs...@gmail.com
 Issue 496  has been merged into this issue.
Sep 2, 2014
Project Member #99 adamrs...@gmail.com
This will be part of the next big milestone, "annotation", which will also contain related features.

BTW-  issue 396  deals with constraining/excluding other events from these background events
Summary: Background events (or "annotations") for different colors in day-cells/slots (was: Different background colors for business hours (or whatever))
Labels: milestone-annotation
Sep 2, 2014
Project Member #100 adamrs...@gmail.com
(No comment was entered for this change.)
Summary: Background events (or "annotations") like business hours. Different colors (was: Background events (or "annotations") for different colors in day-cells/slots)
Sep 3, 2014
#101 es...@inspired.no
Adam: From what I have seen for pull requests and comments for this feature these annotations seems to mean different things to different people. Any basic details on the usage for it? Like for example in my case I want to use annotations when a calendar is 'closed' (non-working hours): 00.00-09.00 (working hours) 15:00-24.00.
Sep 3, 2014
#103 infothro...@gmail.com
Thank's @Mikael
I tried it, but it works for current week only. What i needed is it has to be applied for atleast for one year. I make a try it works fine for week-view but doesn't for day.
Please help me for day view...
Sep 3, 2014
#104 muditdug...@gmail.com
Hi @espen: I tried your code at https://gist.github.com/espen/4be0d6f43eb0328230a3#file-calendar-js but its not working with current version of fullcalendar.js....Can you please update the code (funtions like view.timePosition)
Sep 3, 2014
Project Member #105 adamrs...@gmail.com
Hi @espen. I've read through all the comments on all the related issues and hopefully I am close to coming up with a good API for it. An event will have 2 new ways of being rendered: as a "background" event (will take up whole cells in Agenda view, or if all-day, will take up the entire day cell in month view), or "invisible" (no rendering at all). Each event will have an "overlap" property (which will prevent any events from intersecting with it) as well as a "constraint" property (which will require the event to be in a certain date range). These new behaviors will be available on each Event Object, or on each Event Source, or globally. Still trying to flesh out option names and other minor details out. Stay tuned.
Sep 11, 2014
#106 zerobo...@gmail.com
Hello Adam. Wonderful project, congratulations! From your thoughts I understand it'll also be possible to define an enabled/disabled periods throughout the calendar.
Could be possible to start by defining a full default-state (like disabled, and offer available slots by the means of events)?
Sep 17, 2014
#107 zerobo...@gmail.com
I also stay tuned, but because I have to display the "annotations" in a very short time, I have tried to research how to display it in the last fullcalendar version (2.1.1). I have succeeded to put some colors like this: 
 $('tr:has(td:contains("08"))').css("background", "#808080");
or for specific time, like this:
 $('tr:has(td:contains("10:10"))').css("background", "#808080");
However, in the day view, works fine. Yet in the weekview, I am able to display it only in uniform way (same way for all/or some days)
Does anyone have any idea how to make it on specific days for the weekview (I don't want to display 7 fullcalendars and hide the other 6 days for each). The contents of the days are display in 7 TDs, with specific css classes. How do I know the width of the columns? or is it already done with some css class?

Sep 22, 2014
#108 spsandy....@gmail.com
Hi @espen,
How can I drag and select one full row (same time all day of week).
Sep 30, 2014
#109 develope...@gmail.com
I have 2 big problems. 
first is this topic (annotations). 
and second, how I can repeat an event every Friday or every Monday ... etc?.
please help me. 1 week for deliver project
Sep 30, 2014
#110 zerobo...@gmail.com
hi #109! I think for the first topic, the fastes way to display annotations are to go into eventAfterAllRender and call same jquery functions like I do (see above examples). In the fullcalendar.js I've also found some utilities functions that can help to identify the days/cells (still under research for me too), etc. for example search for "TRANSFORMATIONS: date -> day offset -> cell offset -> cell". For the second issue I think the best way to deal it, is by creating some server side events (maybe with the same id) marked with a property as repeted-event. As an alternative would be to pray to God that someone better then me would give a better solution. I hope it helps you (if not the 1st advice, maybe the 2nd)
Oct 1, 2014
#111 develope...@gmail.com
zerobo...@gmail.com: thanks for your quick response ... your solution to score touchdowns with css is very good, but would apply in all cases; for example, if you mark the time for 15 minutes (10, 10:15, 10:30 ...) and I want to start an 'annotation' 10:17 to 10:24, could not do it. 
I will try to do everything server side ... then I tell you how I was. 
It is a pity that no longer exists the possibility of annotations. 
excuse my English, I speak Spanish
Oct 1, 2014
#112 zerobo...@gmail.com
#111. There are the exact pixels at the beggining of every slat (except last, for which is the bottom) in view.timeGrid.slatTops. Inside the div of this class: .fc-content-skeleton, there are 7 tds (8 with axis) for days of the week. Append with some jquery a div of class fc-event-container, that has another div of class fc-bg inside it. Have a style like this style="left:0px; right:-4px; top: 0px; bottom:-200px; z-index:3; opacity:0.25; background-color:red;" for the div class="fc-bg".
http://jsfiddle.net/WlmShk/6xgvs1h6/5/
I avoided to put this in the allDaySlot.
Oct 2, 2014
#113 efi...@gmail.com
Hello all!

We're working on a project and heavily leveraging the week view of FullCalendar v2.1.0. I just tried @espen's code (thanks!) at https://gist.github.com/espen/4be0d6f43eb0328230a3#file-calendar-js, and hardcoded this annotation:

annotations.push( {
    start: '2014-10-02T13:00:00.000Z',
    end: '2014-10-02T16:00:00.000Z',
    cls: 'closed'
    color: '#777777',
    background: '#aa3939' // optional
  }

However, nothing appears to be rendering. I did some digging and noticed that in the line:

var container = $(view.element).find('.fc-agenda-slots').parent();

there appears to be no element with class '.fc-agenda-slots'. Is there a new class that we should be using with FullCalendar v2.1.0?

Thanks,
Joe
Oct 2, 2014
#114 develope...@gmail.com
#112. thanks for your wonderful answer, it is really smart; however it is not applicable in my case, since users have the possibility to vary greatly the time slot ... I've already done all using server-side events. hopefully soon optimal solution is lightweight and has ... I will continue pending
Oct 10, 2014
#115 ajp...@gmail.com
Hi,

If someone want only to set the background of some hours of the day, for example say the stores is closes from 18h to 09h and you want only have the background changed, you can add this to css (in week view):

div.fc-slats table tbody tr:nth-child(-n+18) td.ui-widget-content:nth-child(2), div.fc-slats table tbody tr:nth-last-child(-n+12) td.ui-widget-content:nth-child(2){
	background: rgba(198, 198, 198, 0.16) !important;
}

Oct 15, 2014
#116 min2l...@gmail.com
#115 Nice CSS, some fix:

div.fc-slats table tbody tr:nth-child(-n+18) td:nth-child(2), 
div.fc-slats table tbody tr:nth-last-child(-n+12) td:nth-child(2){
    background: rgba(198, 198, 198, 0.16) !important;
}
Oct 29, 2014
#117 technoso...@gmail.com
Thanks for the css from the post #116. It really works and I'm using it for highlighting the working hours, ie: from 8:00 to 17:00.

For the holidays, I found another way of doing it:

I added a "holiday" attribute to my holiday events and set it to true, ie:
[{"title":"New year","start":"2014-01-01 00:00:00","end":"2014-01-02 00:00:00","allDay":false, "holiday":true}]

Then I'm using the eventRender as follows:

eventRender: function(event, element) {
    if (event.holiday)
    {
        //The event will be transparent
        element.css("opacity", "0.4");
        //I did this because I want to create new
        //elements as in the "Selecting time ranges" example
        element.css("pointer-events", "none");
    }
}

The only think the code doesn't have is that if you set a parallel event to your holiday, then your holiday and the new event will be rendered as overlapping events. I think the solutions with the "annotations" or the "background events" are much better, but they are only compatible with versions older than 2.1.x :-(

I'm not really skilled with css, but I think that it may be also possible to send somehow the "element div" to render in the background of other events and not just overlap them. Does anybody know which css attribute to set here?
Oct 30, 2014
#118 technoso...@gmail.com
Right know, I managed to give the holidays the same width of the day row in the agendaday view like this:

eventRender: function(event, element) {
    if (event.holiday)
    {
        element.css("opacity", "0.4");
        element.css("pointer-events", "none");
        element.css("width", "100%");
    }
}

If you see my screenshot, you will see that with the first holiday, which starts at 1pm, will be moved to the right. However, the second event, which last the whole day, will remain in the background.

I think this situation could be solved without adding a new array of annotations. You could either reset some css attribute that causes event to behave like that or another solution I can think about is just to remove the event classes from the holidays and add a newer class that force it to remain on the background of the table column, like this:

element.removeClass("<relevant_event_class>");
element.addClass("<your_background_event_class");

However, I don't seem to know either the attribute to reset, the classes to remove, or how the new class should look like.

Does somebody have any idea here?
holidays.png
33.2 KB   View   Download
Oct 30, 2014
#119 tatu.ter...@gmail.com
I can't check the code now, but I think it's a bit more complicated than a css-class. If I recall correctly, there was a bunch of code related to how to draw the segments in AgendaEventRenderer or some file like that.

Might be that there's some on/off class you can find in there and use that to disable that offsetting of the event. I would start looking there.
Oct 30, 2014
#120 technoso...@gmail.com
Yes, I'm looking at the code right now and as you said, it isn't just a class. The events are organized by levels according to its overlapping. So, I guess the only way here is modifying the code so that the holidays are ignored or as other people has done it: add a new element to fullcalendar called annotations.
Oct 30, 2014
#121 technoso...@gmail.com
Finally I solved it by modifying the code a little bit. The solution still has some problems (see the screenshot), but I can live with those. Here is what I did:

1) For each holiday, I defined a custom event attribute called "holiday" and set it to true, ie:
{ title: 'Sunday',
  start: '2014-05-04 00:00:00',
  end: '2014-05-05 00:00:00',
  //Optional colors to differentiate holidays from normal events 
  color: "#00FF00",
  textColor: "#000000",
  holiday: true
}
2) I changed the lines 6375 till 6382 from the fullcalendar.js file (Version 2.1.1) from:
if (isRTL) {
  left = 1 - forwardCoord;
  right = backwardCoord;
}
else {
  left = backwardCoord;
  right = 1 - forwardCoord;
}

by:
if (isRTL) {
  left = 1 - forwardCoord;
  right = backwardCoord;
			
  //TODO: Add the proper lines for RTL calendars.
  //      This fix is only working for non RTL
}
else {
  left = backwardCoord;

  //If this event has the holiday attribute set to true
  if (seg.event.holiday)
  {
    //Put it on the left, do not indent it
    left = 0;
    //its width should have the 100% of the day column
    props.width = "100%";
    //Element is half transparent to differentiate it
    //from normal events
    props.opacity = "0.3";
    //Removing mouse event in order to disable the
    //deletions of holiday events
    props["pointer-events"] = "none";
  }
  right = 1 - forwardCoord;
}

Note: It is only working for not RTL calendars. I don't know how to do it for RTL.

This is a working Fiddle: http://jsfiddle.net/94rwz9nn

You can add new events by clicking on the desired time slot and releasing it. You can also delete them by clicking on the desired event.

If somebody has a better solution for FullCalendar 2.1.1, then I would like to see it.

Some question I still have: In some programming languages, you can replace the defined function by your own:
object.function = my_function(...){

}

I would like to do this rather than modifying the original JavaScript.

Best regards
Josef
holidays.png
49.1 KB   View   Download
Oct 30, 2014
#122 technoso...@gmail.com
Just a small correction to my fiddle:
http://jsfiddle.net/94rwz9nn/1

I needed to add event ids so that event deletion works.
Nov 1, 2014
#123 technoso...@gmail.com
Ok, finally I solved the problem for the FullCalendar v.2.1.1 as follows (Patch included as an attachment):

1) Segment levels for all the holidays will be always zero (In the main code of FullCalendar, levels are calculated based on the event collisions) -> Function buildSlotSegLevels, change lines between 6460 and 6467 by:

  //Holidays will be always assigned to level 0
  if (seg.holiday)
  {
    j = 0;
    seg.level = 0;
  }
  else
  {
    // 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;
      }
    }

    seg.level = j;
  }

2) Holidays won't be collide other events -> Function computeSlotSegCollisions, change lines between 6576 and 6578 by:

  //Holiday won't collide with other events
  if (!otherSegs[i].event.holiday) {
    if (isSlotSegCollision(seg, otherSegs[i])) {
      results.push(otherSegs[i]);
    }
  }

3) Finally holidays will be rendered with a transparent color, they will occupy the full table cell (width: 100% and marginLeft = marginRight = 0), the left and right coordinates won't be assigned (left = right = 0), and the mouse events will be forwarded to the other events (pointer-events = none), add the following after line 6383:

  //holidays will be rendered with a transparent color,
  //they will occupy the whole table cell, mouse events
  //will be forwarded to the other events, and they won't
  //overlap other events
  if (seg.event.holiday){
    left = 0;
    right = 0;
    props.width = "100%";
    props.opacity = "0.5";
    props["pointer-events"] = "none";
  }

Then change lines between 6388 and 6391 by:
  //This margins won't be needed by the holidays, they will
  //always occupy the whole table cell
  if (!seg.event.holiday){
    if (shouldOverlap && seg.forwardPressure) {
      // add padding to the edge so that forward stacked events don't cover the resizer's icon
      props[isRTL ? 'marginLeft' : 'marginRight'] = 10 * 2; // 10 is a guesstimate of the icon's width 
    }
  }

4) Add a custom attribute called "holiday" and set it to true, ie:
{ title: 'Sunday',
  start: '2014-05-04 00:00:00',
  end: '2014-05-05 00:00:00',
  //Optional colors to differentiate holidays from normal events 
  color: "#00FF00",
  textColor: "#000000",
  holiday: true
}

I already updated the external sources of my fiddle:
http://jsfiddle.net/94rwz9nn/1

It is working also for RTL calendars.

Best regards
Josef
FullCalendar-2.1.1-JMe.patch
2.5 KB   Download
Nov 1, 2014
#124 technoso...@gmail.com
Hi

I updated the fiddle and added more events:
http://jsfiddle.net/94rwz9nn/2

There I noticed the following: if you see the events on Mon 4/28, the area between: 1 and 2p.m., you will see that the "Half holiday" is on the top of the other events. On the contrary, you will see that the events on Sat 5/3 between 9:30 and 12:00 are on the top of the holiday event called "Saturday" (Green event). I tried to modify the "z-index" property for the background events by doing this on the generateSegPositionCss function:

if (seg.event.holiday){
  //... Some code here
  props["z-index"] = "100";
}

However this doesn't appear to affect the holiday events. Does somebody knows how to either send the holiday to the background or to the front of the other events?
Nov 1, 2014
#125 technoso...@gmail.com
Ok, I figured it out:
The line I added before was overwritten as follows:

if (seg.event.holiday){
  //... Some code here
  props["z-index"] = "100";
}

//... Some code
props.zIndex = seg.level + 1; // convert from 0-base to 1-based

So, I moved that line before:

props.zIndex = seg.level + 1; // convert from 0-base to 1-based
if (seg.event.holiday){
  //... Some code here
  props["z-index"] = "100";
}

I updated the patch file and the fiddle:
http://jsfiddle.net/94rwz9nn/3

In order to control the appearance of the holiday events, I added the custom attribute: "sendTop", which by default will be false, ie:

{ title: 'Sunday',
  start: '2014-05-04 00:00:00',
  end: '2014-05-05 00:00:00',
  //Optional colors to differentiate holidays from normal events 
  color: "#00FF00",
  textColor: "#000000",
  holiday: true,
  sendTop: true
}

Now it does what I need.
FullCalendar-2.1.1-JMe.patch
2.6 KB   Download
Nov 4, 2014
#126 Boldoo1...@gmail.com
Is this feature added in latest version?
Nov 4, 2014
#127 technoso...@gmail.com
No, at least in version 2.1.1, which is the last released version at the moment of writing.

The author is indeed planning to include this on a future release, see post #99:
https://code.google.com/p/fullcalendar/issues/detail?id=144#c99

I wrote a patch for version 2.1.1 to do this; however, I guess it will be obsolete as soon as the author include the annotations feature. I will use for now my patch, but as soon as this gets officially implemented, I will switch it.
Nov 4, 2014
#128 Kris.Dep...@gmail.com
thanks for the patch, works like a charm.

however, I did rename holiday to annotation and changed the place of the text when rendering as annotation. Your info told me where to look :)

thank you Josef
thank you Adam

FullCalendar2.1.1PatchJosef.PNG
30.3 KB   View   Download
Nov 5, 2014
#129 technoso...@gmail.com
Hi Kris

Your screenshot looks nice. Could you please share your version? I really like how you solved the problem with the annotation text by leaving an extra margin on the right and rendering the text vertically.

Best regards
Josef
Nov 14, 2014
Project Member #130 adamrs...@gmail.com
this has been officially implemented and released!

http://blog.arshaw.com/1/post/2014/11/fullcalendar-220-released.html
http://fullcalendar.io/docs/event_rendering/Background_Events/
http://fullcalendar.io/docs/display/businessHours/

thanks for helping out and being patient.
Status: Released
Jan 2, 2015
#132 DoverAu...@gmail.com
Thank you so much Adam! This feature is truly priceless, only digital calendar i am aware of with such flexibility!

I'm hoping it's possible to use multiple constraints on select? I need to overlap background events to create exclusive areas for adding in appointments, ie, only when both parties are available. hoping this will go ... otherwise, i may add a new feature request. ...

Jan 19, 2016
#133 webTechi...@gmail.com
Hi 
How to disable the particular date to not to allow user to add event for the disabled date in full calendar
Untitled.png
142 KB   View   Download
Sign in to add a comment

Powered by Google Project Hosting