My favorites | Sign in
Project Home Issues
New issue   Search
for
  Advanced search   Search tips   Subscriptions
Issue 191: dayRender trigger for modifying a day
31 people starred this issue and may be notified of changes. Back to list
Status:  Released
Owner:  ----
Closed:  Aug 2013


Sign in to add a comment
 
Reported by vytautas...@gmail.com, Nov 16, 2009
Hi.

I'd like to suggest adding fc-fulldate-<date> to the classes of each day cell.

It's easier to traverse through the cells, for instance if I want to color
them depending on intervals.

Attached patch.
Nov 16, 2009
#1 vytautas...@gmail.com
patch
fulcalpatch.txt
1.5 KB   View   Download
Nov 18, 2009
#3 vytautas...@gmail.com
Hi.

In what way is the patch broken for you?

p.s.
Not sure why I don't see your comment here.


Nov 18, 2009
#4 marcin.m...@gmail.com
I deleted it because it works fine now. I just missed one + character :]
Thanks!
Nov 26, 2009
Project Member #5 adamrs...@gmail.com
i like the convenience this affords, but i'd rather have it be part of a trigger
(like eventRender) rather than having people traverse through w/ jquery selectors
(b/c who knows, maybe the markup will change). will probably take this form:

dayRender: function(date, element, view) {
   // can modify 'element' and add a class to it
}

please let me know if you think this is a good idea. thanks
Summary: dayRender trigger for modifying a day
Status: Accepted
Nov 27, 2009
Project Member #6 adamrs...@gmail.com
 Issue 160  has been merged into this issue.
May 26, 2010
#7 victor.m...@gmail.com
Great idea - can't wait to use this function!
Aug 17, 2010
#8 xjpmauri...@gmail.com
"dayRender: function(date, element, view) {", i've been looking for this!!! 
Oct 20, 2010
#9 gdbol...@gmail.com
Please please implement this.  Every new version I have to add the dblClick patch and the regression testing in my projects is a huge PITA. :o)
Nov 21, 2010
#10 bless...@gmail.com
YEs that would be really great.
Mar 1, 2011
#11 Eric.Muy...@gmail.com
Add this already. :-/
Apr 21, 2011
#12 vn17...@gmail.com
Hey Guys, 
i have been working on fullcalendar and i am stuck up at rendering the selected date value in viewDisplay as it always ends up displaying the first day of that view, and not the selected date.
so any suggested solutions?
is the dayRender functionality added or it is yet to be done?
awaiting a reply.
May 31, 2011
#13 v...@bin.bz
Attaching a simple patch which solves the problem for me.
Here's how you might use it:

$("#calendar").fullCalendar({
    dayRender: function(date, element, view){
	if(date.isBefore(Date.today())){
	    $(element).css("background", "beige");
        }
    }
});

BasicView.diff
392 bytes   View   Download
Jun 8, 2011
#14 anssi.ra...@gmail.com
What is the status of this dayRender function, will you add this anytime soon?
Aug 10, 2011
#15 nikola.g...@gmail.com
Any progres with this
Oct 11, 2011
#16 giviu...@gmail.com
any due date on this issue??
Oct 19, 2011
#17 patbue...@gmail.com
Definitely one of the most important events which are missing, especially because this will allow easy creation of custom context menus. I really hope this will find it's place in 1.6
manc...'s simple patch works great for me, thanks a lot
Oct 21, 2011
Project Member #18 althaus.it
Thanks manchev for the code. I tested it and it seems to be fine. I added it to my fork and added a pull request to the main repo.

https://github.com/arshaw/fullcalendar/pull/34
Nov 21, 2011
#19 elamine....@gmail.com
hi,

is the dayRender function ready? could you please include it asap
I'll be gratefull

Thanks & regards
Dec 23, 2011
#20 adityaka...@gmail.com
Hi, I have added a line after line 2305 in my fullcalendar.js to trigger dayRender event.

trigger('dayRender', t, date, cell);

And then written code like this in dayRender

dayRender: function(date, element, view){
				
  var nDate = new Date();
  if(date < nDate ) {
     $(element).css("background", "beige");
  }
}

For current month it works fine. But when i click on Prev or Next button, Same colors applies to current month's color.

Please help me with this..
Dec 23, 2011
#21 giviu...@gmail.com
for my case I wanted to change the colors of the cells if there is at least one event. Instead of modifying the fullcalendar.js file to change colors of day cells, I found a work around that works very well(are least for my project), here go an example.

/// global variable to save the displayed days dates
var dateArr=[]

/// this function builds an array with the displayed days
function  viewCalDisplay(view) {
    var $calE = $('#myCalendar');
    var today = $calE.fullCalendar('getDate');
    var cMonth = today.getMonth();
    var cYear = today.getFullYear();
    var lDay, lMonth, lYear, lDate ;
    var $cal_slots=$j(view.element.find('.fc-day-number'));
    if ($cal_slots!=null) {
            dateArr = [];
            $cal_slots.each(function() {
                lDay = parseInt($j(this).text());
                //check if it is another month date
                if($j(this).parents('td').hasClass('fc-other-month')) {
                    lYear = parseInt(cYear);
                    if(lDay>15) {
                        lMonth = parseInt(cMonth) - 1;
                        lDate = new Date(lYear,lMonth,lDay);
                        dateArr.push(lDate);
                    } else {//belong to the next month
                        lMonth = parseInt(cMonth) + 1;
                        lDate = new Date(lYear,lMonth,lDay);
                        dateArr.push(lDate);
                    }
                } else {
                    lMonth = parseInt(cMonth);
                    lDate = new Date(lYear,lMonth,lDay);
                    dateArr.push(lDate);
                }
            });
     }
}

/// paints the days cells
function onRenderCalDay(event, element, view){
    var $calE = $('#myCalendar');
    if (event.end==null)
            event.end = event.start;

    var daySlots= view.element.find('td')
    for(var i in dateArr){
        aSlot=$j(daySlots[i])

        if((Math.round(dateArr[i].getTime() / 1000) >= Math.round(event.start.getTime() / 1000))&&
           (Math.round(dateArr[i].getTime() / 1000) <= Math.round(event.end.getTime() / 1000))) {
                if (aSlot!=null){
                    aSlot.attr('title',"Click here to see this day's events"); /// adds a hint to the day cell
                    aSlot.addClass("my-css-color-class") ;                      /// colorize the day cell through custom css class
                }
          }
    }
}

$('#myCalendar').fullCalendar({
            eventRender: onRenderCalDay,
            viewDisplay: viewCalDisplay,
            events : function (start, end, eventsCallBack){
                $j.ajax({
                    url: 'http/my_url_to_retrieve_events',
                    data: {
                        start: Math.round(start.getTime() / 1000),
                        end: Math.round(end.getTime() / 1000)
                    },
                    dataType: 'json',
                    success: function(data) {
                        var i, daySlots, arrLen, events = [];
                        if (!data ) {
                            alert('problem while getting calendar events');
                            return;
                        }
                        /// clears days cells colors and hints
                        daySlots=$calElement.find('td');
                        arrLen=daySlots.length;
                        for( i=0; i<arrLen ;i++) {
                            $j(daySlots[i]).attr('title','')    /// removes hint
                            $j(daySlots[i]).removeClass('my-css-color-class'); /// removes custom css class
                        }

                        /// before excetuting the next line, here you can evaluate the events and change its colors, make them invisible, so on.
                        eventsCallBack(data);
                    }
    });
Jan 8, 2012
#22 Indre...@gmail.com
Any news?
Jan 9, 2012
Project Member #23 adamrs...@gmail.com
 Issue 1145  has been merged into this issue.
Jan 9, 2012
Project Member #24 adamrs...@gmail.com
 Issue 1165  has been merged into this issue.
Jan 31, 2012
#25 xkeshav
gives error `$calEments` is undefined
May 5, 2012
#27 lgelliot...@gmail.com
Hello, is there a patch or fix for dayRender as yet?  I am using some code I got offline that allows me to double click a day and it works great on FF and chrome but not on IE8, code below (I added the code to make sure the same day was clicked).

if(doubleClicked != "day"){

	// make sure the same
	// day is double Clicked
	doubleClickDate = _date;
							
	//WAIT FOR ANOTHER "event" CLICK
	doubleClicked = "day";
	setTimeout(function(){alert('timeup');doubleClicked = "";}, 800);
}
else{
	//RESET THE FLAG
	doubleClicked = "";
	
	// Handle double click if both days where cliced
	if(doubleClickDate.getDate() == _date.getDate()){
		// do something
	}
}

IE8 doesn't capture the second click unless I click then let go all the way and click again.  Even doing that doesn't guarantee it will receive the second mouse click.  The eventRender double click works great for IE8 and others but I just can't get the day double click to work reliable.
May 8, 2012
#28 lgelliot...@gmail.com
All, found a temporary solution to the problem.  I am now using the ondblclick event instead of using the calendar click event twice to capture double click.  

http://stackoverflow.com/questions/1546040/how-to-use-both-onclick-and-ondblclick-on-an-element

 I am using the calendar dayClick to capture date and using the ondblclick to capture double click and it's working fine in chrome, FF, and IE

var calendar = document.getElementById('calendar');
		  		
calendar.ondblclick = function() {
   alert(dayClicked); // getting dayClicked from calendar dayClick event
}
May 9, 2012
#29 seanoste...@gmail.com
looking forward to dayrender: your calendar is amazing, but the ability to black out holidays (provided by gcal automatically!) would be the bees knees...
Sep 23, 2012
#30 ja.zinet...@gmail.com
Any updates on this? Timeframe? Seems like something a lot of people want developed.

Thanks. 
Feb 4, 2013
#31 luzm...@gmail.com
I only needed to know the date of each cell to get my context menu working. I changed line 2303 of fullcalendar.js from

cell.find('div.fc-day-number').text(date.getDate());

to 

cell.find('div.fc-day-number').text(date.getDate()).parents("." + tm + "-widget-content").data("date", date);

Now i can get the date of the trigger cell with

var date = cell.data("date");
Hope this helps someone
Mar 3, 2013
Project Member #32 adamrs...@gmail.com
I have fully implemented this feature. It required a little more than just a one-liner trigger call. Now, whenever the view updates, it fully rerenders each day cell, rather than reusing old ones. This was done so that the dayRender callback had a fresh table cell to work with every time, and didn't have to undo any manipulation that was applied in previous dayRender calls. This change will make it into the next release.

If you want to browser the [non-production-ready] source code:
https://github.com/arshaw/fullcalendar/tree/v1.5.5

Download [non-production-ready] build:
https://github.com/arshaw/fullcalendar-component/tree/v1.5.5
Mar 7, 2013
#33 thekiera...@gmail.com
Hi Adam, 

Started looking for exactly this today so this is excellent and convenient timing. Testing the code to add classes on certain dates works well via ajax. 

The only feedback I'd have is that traversing dates re-renders the days (as I expected) but switching views (day -> week -> day) doesn't - in my environment that would be useful, even at an overhead cost. Is this deliberate behaviour?
Mar 7, 2013
#34 thekiera...@gmail.com
Hi Adam,

One further piece of feedback - using the following code, the calendar title disappears, inspection of the dom shows the H2 tag is present but is an empty text node.

    dayRender: function(date, element, view) {
      var random = Math.floor(Math.random()*(4-(-2)+1)+(-2));
      if(random<=0){
        element.addClass('fc-state-resource-under');
        element.find('div').find('div.fc-day-content').addClass('day_hours').text(random);
      }else if(random >=2){
        element.find('div').find('div.fc-day-content').addClass('day_hours').text(random);
      }else{
        element.addClass('fc-state-resource-over');
        element.find('div').find('div.fc-day-content').addClass('day_hours').text(random);
      }
    }
Mar 7, 2013
#35 thekiera...@gmail.com
And, finally, using dayRender appears to interfere with titleFormat - specifically, when using basicWeek/basicDay and switching between, basicDay appears to use the format set explicitly for basicWeek. commenting out dayRender triggers fixes this immediately.

Sorry for the deluge of feedback.
Mar 16, 2013
Project Member #36 adamrs...@gmail.com
@thekierandelaney, in response to your first comment:

There is an optimization in place that simple show/hides the rendered table if it know the date range is the same. Rather than make this a sub-setting of dayRender, I'd rather make this a separate option that controls the level of rendering optimization. But we'll see if enough people want this. A workaround for you could be watching for the viewDisplay event (http://arshaw.com/fullcalendar/docs/display/viewDisplay/) and manually finding the cells you want and manipulating them, since that callback is called *every* time the view displays.

In response to your second question:

The reason your example isn't working is because you are settings the the $().text(), which blows away all inner elements. there is an inside <div> that FC depends upon for rendering (subject to change). So a better way to do this would be to prepend the text, or insert the text into the *inner* div.

Thanks for the feedback.
Apr 4, 2013
#37 anselmch...@gmail.com
Are there any plans to add this to the agenda view as well? That would be useful. I tried fastly adding `trigger('dayRender')` to `AgendaWeekView`, but it seems it's some kind of plugin. Any pointers in the right direction welcome.
Apr 17, 2013
#38 goo...@gobnet.eu
I need the dayRender for agendaWeek and agendaDay as well!
Jun 28, 2013
#39 shrikant...@gmail.com
i need right clcik event for full calendar please help me
cut copy paste data,
Aug 13, 2013
Project Member #40 adamrs...@gmail.com
I forgot to update this thread. this was officially released a little while ago:
http://arshaw.com/fullcalendar/docs/display/dayRender/
Status: Released
Labels: -Type-Defect -Priority-Medium Type-Feature
Oct 3, 2013
#41 yogendra...@gmail.com
by using dayRender i want to change css for same day multiple event.

if in single day multiple event is there then i want to change css.

need help..
Mar 9, 2016
#42 noor...@gmail.com
Hi,
I am New To FullCalendar.js.
i want to display hyper link,how can i do that can any one please help
Sign in to add a comment

Powered by Google Project Hosting