[ 10 posts ]

Jason Purdy

  • Username: purdy
  • Joined: Mon Aug 10, 2009 9:06 am
  • Posts: 5
  • Twitter: jason_purdy
  • GitHub: purdy
  • Gists: purdy
  • IRC: Purdy
  • Offline
  • Profile

Calendar with custom day labels

Post Posted: Thu Jul 15, 2010 5:01 am
+0-
I'm putting together a report that uses YUI 2 Calendar to show a month of e-newsletters that our company publishes. Since it's just a report, I take full advantage of the screen and the calendar is about 700 pixels wide, so you can imagine that the individual date table cells are pretty big.

My question: Is there a way to put in custom labels in the table cell? My current approach is to subscribe to the renderEvent event and get the table cell and it's anchor child and append to its innerHTML, but that blows out the weekday column:

Image

When I look at the underlying HTML code, it doesn't look like it should have that bad of an effect:

Code:
<td class="calcell wd6 d24 selectable calcellright" id="cal1_cell27"><a href="#" class="selector">24 (1)</a></td>


Here's the custom event handler YUI code:

Code:
    var calendar_rendered = function () {
        var d = new Date( 2010, 6, 24 );
        var cell_num = YAHOO.qsrmagazine.calendar.cal1.getCellIndex( d );
        var cell = YAHOO.qsrmagazine.calendar.cal1.cells[cell_num];
        var anchor = YAHOO.util.Dom.getFirstChild( cell );
        anchor.innerHTML = anchor.innerHTML + ' (1)';
    }


So is there a better/more-official way?

Thanks!

Matt Parker

YUI Contributor

  • Username: mattatlamplight
  • Joined: Mon Apr 20, 2009 12:03 pm
  • Posts: 466
  • Location: London UK
  • GitHub: mattparker
  • Gists: mattparker
  • Online
  • Profile

Re: Calendar with custom day labels

Post Posted: Thu Jul 15, 2010 5:54 am
+0-
Hi,

Yes! The renderStack... a beautiful thing once you get your head around it... http://developer.yahoo.com/yui/examples ... ender.html

Matt

(edit: though I've no idea why the display on your screenshot goes so screwy...)

Jason Purdy

  • Username: purdy
  • Joined: Mon Aug 10, 2009 9:06 am
  • Posts: 5
  • Twitter: jason_purdy
  • GitHub: purdy
  • Gists: purdy
  • IRC: Purdy
  • Offline
  • Profile
Tags:

Re: Calendar with custom day labels

Post Posted: Thu Jul 15, 2010 6:07 am
+0-
Hi Matt - thanks for the reply!

I agree, the Render Stack is a cool thing, but when I use it, it seems to be an all-or-nothing thing. Plus I still get crazy column widths. Check out the effects of this custom renderer:

Image


Code:
    var sales_custom_renderer = function ( date, cell ) {
        cell.innerHTML = 'sold';
        return YAHOO.widget.Calendar.STOP_RENDER;
    }


If I don't do the STOP_RENDER, it replaces whatever I've done w/ the YUI default.

Matt Parker

YUI Contributor

  • Username: mattatlamplight
  • Joined: Mon Apr 20, 2009 12:03 pm
  • Posts: 466
  • Location: London UK
  • GitHub: mattparker
  • Gists: mattparker
  • Online
  • Profile
Tags:

Re: Calendar with custom day labels

Post Posted: Thu Jul 15, 2010 6:21 am
+0-
hi Jason,

How do you mean all or nothing? You can pass a date range in as the first argument to addRenderer, and you've got addRenderer, addWeekdayRenderer and addMonthRenderer.

On the layout - don't know. It's ages since I was playing with this on Calendar, but I don't remember that sort of problem. Do you have a live example you could post - my guess would be that there's some other css somehow interfering. Or maybe you need extra css to restrict width and heights...

Matt

Jason Purdy

  • Username: purdy
  • Joined: Mon Aug 10, 2009 9:06 am
  • Posts: 5
  • Twitter: jason_purdy
  • GitHub: purdy
  • Gists: purdy
  • IRC: Purdy
  • Offline
  • Profile

Re: Calendar with custom day labels

Post Posted: Thu Jul 15, 2010 6:48 am
+0-
mattatlamplight wrote:
How do you mean all or nothing?


All being I have to render all of the content (and selectability) within the date cell or nothing, being when I pass control back to YUI to complete the date cell, it replaces whatever I've done.

mattatlamplight wrote:
On the layout - don't know. It's ages since I was playing with this on Calendar, but I don't remember that sort of problem. Do you have a live example you could post - my guess would be that there's some other css somehow interfering. Or maybe you need extra css to restrict width and heights...


I slapped together a quick demo in the Google Code Playground ... let's see if this works:

http://savedbythegoog.appspot.com/?id=06387a866cfafe18029d8225705a646738588d14

Thanks!

Matt Parker

YUI Contributor

  • Username: mattatlamplight
  • Joined: Mon Apr 20, 2009 12:03 pm
  • Posts: 466
  • Location: London UK
  • GitHub: mattparker
  • Gists: mattparker
  • Online
  • Profile
Tags:

Re: Calendar with custom day labels

Post Posted: Thu Jul 15, 2010 7:00 am
+0-
Hi Jason,

OK... it's a bit hacky, but does this work?
Code:
cal1.addRenderer(/*however you do all*/, YAHOO.example.calendar.cal1.renderCellDefault);
cal1.addRenderer(/*..*/, function (date, cell) {
  cell.innerHTML += getMyDataFunctionFromWhereever(date);
  return YAHOO.widget.Calendar.STOP_RENDER;
});


On the styling, looking at your eg in FF on Windows, the header is massive but the columns and rows are evenly spaced. Removing the
Code:
#cal1 {
height:550px;
width:700px;
}
css makes it look like a normal calendar to me; not with the spacing in your screenshots.

So it must be a browser thing... what are you looking at it in? I'd guess you'll need to fix the width of the td's as well as the overall width...

Matt

Jason Purdy

  • Username: purdy
  • Joined: Mon Aug 10, 2009 9:06 am
  • Posts: 5
  • Twitter: jason_purdy
  • GitHub: purdy
  • Gists: purdy
  • IRC: Purdy
  • Offline
  • Profile

Re: Calendar with custom day labels

Post Posted: Thu Jul 15, 2010 7:31 am
+0-
I'm using Chrome. Wow ... I just pulled it up in Firefox and I see what you mean about the header. I wanted a big calendar - how does one style it properly? It'd be nice if width was a config option to the calendar. I also don't see an option to just turn the header off altogether.

I tried the stack approach (calling default renderer and then my custom renderer, but my custom renderer, even with the +=, is replacing the date cell content.

Matt Parker

YUI Contributor

  • Username: mattatlamplight
  • Joined: Mon Apr 20, 2009 12:03 pm
  • Posts: 466
  • Location: London UK
  • GitHub: mattparker
  • Gists: mattparker
  • Online
  • Profile

Re: Calendar with custom day labels

Post Posted: Thu Jul 15, 2010 7:43 am
+0-
Hi,

I think I gave up playing with Calendar (my first approach to building a diary widget) more or less at the point you're at!

If you've got a YUI datasource (or can fairly easily make your data into one) you could try my Diary widget (http://mattparker.github.com/diary) - it'll consume a datasource and stick it in a Diary. It might be overkill - it's more than you need, but if you used month view, and turned off all the drag-drop stuff, it'd work.

And hopefully the css is obvious enough to override where you need to.

Matt

Jason Purdy

  • Username: purdy
  • Joined: Mon Aug 10, 2009 9:06 am
  • Posts: 5
  • Twitter: jason_purdy
  • GitHub: purdy
  • Gists: purdy
  • IRC: Purdy
  • Offline
  • Profile
Tags:

Re: Calendar with custom day labels

Post Posted: Thu Jul 15, 2010 8:03 am
+0-
That diary widget looks pretty sweet! Do you have an example of what it looks like in the month view? I'll have to give it a check out.

Matt Parker

YUI Contributor

  • Username: mattatlamplight
  • Joined: Mon Apr 20, 2009 12:03 pm
  • Posts: 466
  • Location: London UK
  • GitHub: mattparker
  • Gists: mattparker
  • Online
  • Profile

Re: Calendar with custom day labels

Post Posted: Thu Jul 15, 2010 8:16 am
+0-
Thanks! Click the 1.7.31 button in the top-right (second from right) - I'm not great at icon design...! on any of the examples.

Matt
  [ 10 posts ]
Display posts from previous:  Sort by  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum