| Issue 191: | dayRender trigger for modifying a day | |
| 31 people starred this issue and may be notified of changes. | Back to list |
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 18, 2009
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
I deleted it because it works fine now. I just missed one + character :] Thanks!
Nov 26, 2009
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
Issue 160 has been merged into this issue.
May 26, 2010
Great idea - can't wait to use this function!
Aug 17, 2010
"dayRender: function(date, element, view) {", i've been looking for this!!!
Oct 20, 2010
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
YEs that would be really great.
Mar 1, 2011
Add this already. :-/
Apr 21, 2011
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
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");
}
}
});
Jun 8, 2011
What is the status of this dayRender function, will you add this anytime soon?
Aug 10, 2011
Any progres with this
Oct 11, 2011
any due date on this issue??
Oct 19, 2011
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
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
hi, is the dayRender function ready? could you please include it asap I'll be gratefull Thanks & regards
Dec 23, 2011
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
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
Any news?
Jan 9, 2012
Issue 1145 has been merged into this issue.
Jan 9, 2012
Issue 1165 has been merged into this issue.
Jan 31, 2012
gives error `$calEments` is undefined
May 5, 2012
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
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
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
Any updates on this? Timeframe? Seems like something a lot of people want developed. Thanks.
Feb 4, 2013
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
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
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
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
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
@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
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
I need the dayRender for agendaWeek and agendaDay as well!
Jun 28, 2013
i need right clcik event for full calendar please help me cut copy paste data,
Aug 13, 2013
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
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
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 |
1.5 KB View Download