dayRender trigger for modifying a day

[arshaw]

Originally reported on Google Code with ID 191

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.

Reported by vytautas.civilis on 2009-11-16 08:54:10

[arshaw]

patch

Reported by vytautas.civilis on 2009-11-16 12:06:57

---

- _Attachment: [fulcalpatch.txt](https://storage.googleapis.com/google-code-attachments/fullcalendar/issue-191/comment-1/fulcalpatch.txt)_

[arshaw]

Hi.

In what way is the patch broken for you?

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

Reported by vytautas.civilis on 2009-11-18 11:19:35

[arshaw]

I deleted it because it works fine now. I just missed one + character :]
Thanks!

Reported by marcin.milinski on 2009-11-18 11:27:09

[arshaw]

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

Reported by adamrshaw on 2009-11-27 06:42:26

• Status changed: Accepted

[arshaw]

Issue 431 has been merged into this issue.

Reported by adamrshaw on 2009-11-27 23:01:26

[arshaw]

Great idea - can't wait to use this function!

Reported by victor.macko1 on 2010-05-27 04:19:51

[arshaw]

"dayRender: function(date, element, view) {", i've been looking for this!!! 

Reported by xjpmauricio on 2010-08-17 13:33:28

[arshaw]

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)

Reported by gdboling on 2010-10-20 13:58:48

[arshaw]

YEs that would be really great.

Reported by blessenm on 2010-11-22 05:35:38

[arshaw]

Add this already. :-/

Reported by Eric.Muyser on 2011-03-01 18:32:06

[arshaw]

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.

Reported by vn17887 on 2011-04-22 06:38:42

[arshaw]

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");
        }
    }
});

Reported by manchev@bin.bz on 2011-06-01 01:38:29

---

- _Attachment: [BasicView.diff](https://storage.googleapis.com/google-code-attachments/fullcalendar/issue-191/comment-13/BasicView.diff)_

[arshaw]

What is the status of this dayRender function, will you add this anytime soon?

Reported by anssi.rajakallio on 2011-06-08 10:30:56

[arshaw]

Any progres with this

Reported by nikola.gaic on 2011-08-10 15:42:24

[arshaw]

any due date on this issue??

Reported by givius24 on 2011-10-11 20:07:09

[arshaw]

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

Reported by patbuergi on 2011-10-19 09:46:16

[arshaw]

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

Reported by althaus.it on 2011-10-21 10:35:57

[arshaw]

hi,

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

Thanks & regards

Reported by elamine.saad on 2011-11-21 20:14:29

[arshaw]

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..

Reported by adityakanitkar on 2011-12-23 11:10:39

[arshaw]

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);
                    }
    });

Reported by givius24 on 2011-12-23 16:35:05

[arshaw]

Any news?

Reported by IndrekJu on 2012-01-08 20:47:49

[arshaw]

Issue 1412 has been merged into this issue.

Reported by adamrshaw on 2012-01-10 07:32:47

[arshaw]

Issue 1432 has been merged into this issue.

Reported by adamrshaw on 2012-01-10 07:46:39

[arshaw]

gives error `$calEments` is undefined

Reported by xkeshav on 2012-01-31 08:18:38

[arshaw]

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.

Reported by lgelliott77 on 2012-05-05 15:06:18

[arshaw]

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
}

Reported by lgelliott77 on 2012-05-09 00:24:56

[arshaw]

looking forward to dayrender: your calendar is amazing, but the ability to black out
holidays (provided by gcal automatically!) would be the bees knees...

Reported by seanostephens on 2012-05-10 00:40:38

[arshaw]

Any updates on this? Timeframe? Seems like something a lot of people want developed.

Thanks. 

Reported by ja.zineteam on 2012-09-24 05:35:54

[arshaw]

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

Reported by luzmaun on 2013-02-05 03:30:30

[arshaw]

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

Reported by adamrshaw on 2013-03-04 02:36:27

[arshaw]

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?

Reported by thekierandelaney on 2013-03-07 14:28:30

[arshaw]

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);
      }
    }

Reported by thekierandelaney on 2013-03-07 14:58:02

[arshaw]

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.

Reported by thekierandelaney on 2013-03-07 15:43:26

[arshaw]

@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.

Reported by adamrshaw on 2013-03-17 00:21:15

[arshaw]

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.

Reported by anselmchristophersen on 2013-04-04 17:15:02

[arshaw]

I need the dayRender for agendaWeek and agendaDay as well!

Reported by google@gobnet.eu on 2013-04-17 08:18:15

[arshaw]

i need right clcik event for full calendar please help me
cut copy paste data,

Reported by shrikantvsnv on 2013-06-29 05:28:56

[arshaw]

I forgot to update this thread. this was officially released a little while ago:
http://arshaw.com/fullcalendar/docs/display/dayRender/

Reported by adamrshaw on 2013-08-14 01:58:08

• Status changed: Released
• Labels added: Type-Feature
• Labels removed: Type-Defect, Priority-Medium

[arshaw]

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..

Reported by yogendrapayasi62 on 2013-10-03 11:28:55