Developer Supported Applications > Jim Coltz - JQuery Calendar

Enlarging the Monthly View and the All Day Event


Hi Jim-

Love the calendar!

Here's a fun question that's probably easy for you, but I could use some guidance. 

I'm using the calendar in a new application for a customer.  They want to show the Monthly View of the calendar on a giant monitor (50") in the office to constantly display their work schedule for the month (typically, they do several jobs each day and the schedule changes, based on weather and other factors).

I had no trouble creating the calendar (great software) and an easy-to-use editor to add/edit events (NOTE: all events are displayed as "All Day Events").   

I've attached a basic calendar that's similar to the one I'm designing (in terms of all-day events, colors, etc.)

Here are my two "easy" questions:

* I'd love more space for the "All Day Events" (e.g 2 lines instead of 1), so that I can add more information, such as customer name, tasks to be completed, etc.).  I know space is limited, but if I could reduce the font size a little and have 2 lines per "All Day Event," then I might be able to get everything they want on a line.  I don't know what "design" options there are or how to access them (IF it's even possible)
* Second, what do you recommend to maximize the overall size of the displayed monthly view (e.g. should I not use the iFrame? Should I display he calendar in its own app that just has this one screen?  The top of the monthly view (including the title, weekdays, "views" options, etc.) takes up ~20% of the total height. Do you have any thoughts on how to reduce that (don't need the title or other "views", but I think we'd need the month-to-month navigator buttons and the "Today" button)?
I'm hope this makes sense to you and I'd really appreciate any thoughts or ideas on how I can enhance what I'm trying to accomplish.

Thanks for your help and a great application.

With appreciation,

OK, I'm getting there (see attached). 

I used html tags to reduce the font size and force a line break (<br>).

That lets me display two jobs per day (+ the designation that there are other jobs) that are two lines each (~28 characters per line).

Anything else you can recommend that might give me more space?

Thanks for your help.


Jim Coltz:
You can ditch the Iframe and run full screen on an .a5w page and that will allow the calendar to size to fit the screen. Just set the calendar height property to none, and uncheck the component must run in iframe checkbox; that will turn on auto-sizing.

You can kill the title by adding some code to the client side onRenderComplete event like this: setTimeout("jQuery(\".cHead\").remove();",500); You may have to play with the timeout value as the final calenar html isn't fully rendered when this event fires.

Jim- That's excellent... I'll try those suggestions later today and let you know how they work.

One more question (I'm not optimistic, but I'll try):  Is there any way I can put data in the blank area next to the date (see attached image).  I'm running out of "real estate" on the calendar and I'm trying to put a "summary data field" somewhere where it won't use up the limited space in each of the blocks.  So, if I can use that space (which, in all likelihood, is hard coded and not accessible), I can steal some blank space to accomplish my goal.

If you notice, in the attached image, for each of the zip codes, I've combined the total number of "Stops" and "$$$" for the day on each line... I did that so that they could always see the "day total" on every line.  BUT, I'd prefer to have a separate line with "day total" and have the purple lines show only that zip code's totals.  I could probably accomplish this with "all day" vs "appointments" differentiation, BUT, since I only get 3 lines to work with (and they'll typically have 6-8 zip codes each day), I didn't want to squander one of the lines with a "day total" line.  If I could use that space to the left of each day, that would be "nirvana".

I'd appreciate any thoughts you have.

Have a great weekend.


Jim Coltz:
Phil that would take some work. The jQuery code takes the calendar data and stuffs it into the appropriate area of the calendar, based on start and end dates/times.


[0] Message Index

Go to full version