|
| 1 | +<!-- |
| 2 | +//============================================================================= |
| 3 | +// Resource Calendar Usage Example |
| 4 | +// ------------------------------- |
| 5 | +// |
| 6 | +// One Calendar may have multiple resources, and events (bookings) |
| 7 | +// can be freely dragged between those resources. This example shows |
| 8 | +// a "calendar-week" for each of three resources, in this case rooms. |
| 9 | +// |
| 10 | +// It would also be possible to show a single "calendar-day" with all |
| 11 | +// the resources side by side, or a month per resource could be shown. |
| 12 | +// |
| 13 | +// To accomplish this, different rendering templates for rendering a |
| 14 | +// calendar and for rendering an event would be required, and the |
| 15 | +// default "render" and "render_event" options would be overridden |
| 16 | +// when instantiating the rc_calendar. |
| 17 | +// |
| 18 | +// This file contains: |
| 19 | +// * Minimal page layout code |
| 20 | +// * Resource declarations with parameters that can be used for |
| 21 | +// automatic sanity-checking of booking placement (for example, |
| 22 | +// ensuring that a 250 person conference is not booked into a |
| 23 | +// room with a 10 person capacity) |
| 24 | +// * A (hidden) form that is used as the template for the popup |
| 25 | +// booking-editing form when a booking is clicked |
| 26 | +// * Example templates. These are embedded within <script> tags; |
| 27 | +// I'd have prefered to keep them out of the html page, but |
| 28 | +// alternative options have other issues (javascript "HereDoc" |
| 29 | +// implementations not being cross-browser compatible & so on). |
| 30 | +// * Javascript functions for validating event placement, and |
| 31 | +// managing persistent storage. These would be application- |
| 32 | +// specific in a real system, so I have kept them separate from |
| 33 | +// the Resource Calendar javascript files. |
| 34 | +// * rc_calendar instantiation example in the document ready function |
| 35 | +// |
| 36 | +//============================================================================= |
| 37 | +// Author : Peter Maloy, August 2013 |
| 38 | +// Repository: https://github.com/geekbrit/ResCal |
| 39 | +//============================================================================= |
| 40 | +--> |
1 | 41 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
2 | 42 | <html> |
3 | 43 | <head> |
|
11 | 51 | <body> |
12 | 52 | <div class='header'> |
13 | 53 | <h1>Resource Calendar Demo Page</h1> |
14 | | - <p>Rendering of calendars and events has been abstracted out to a javascript template file that |
15 | | - uses the "doT.js" templating system [<a href='http://olado.github.io/doT/'>http://olado.github.io/doT/</a>]. |
16 | | - This layout is just one possible way to use the Resource Calendar system; it is fully customizable.</p> |
| 54 | + <p>Rendering of calendars and events has been abstracted out to javascript template functions that |
| 55 | + use the "doT.js" templating system [<a href='http://olado.github.io/doT/'>http://olado.github.io/doT/</a>]. |
| 56 | + This layout is just one possible way to use the Resource Calendar system; it is fully customizable and configurable.</p> |
17 | 57 | <p>Source code for the Resource Calendar jquery plugin, and a description of functionality implemented so far, can be found at: <a href="https://github.com/geekbrit/ResCal">https://github.com/geekbrit/ResCal</a></p> |
18 | 58 | </div> |
19 | 59 | <div id='new_events' class='event_palette'> |
@@ -191,6 +231,7 @@ <h3>Resource Calendar</h3> |
191 | 231 | <!-- END TEMPLATES - - - - - - - - - - - - - - - - - - - - - - - - - - --> |
192 | 232 |
|
193 | 233 | <script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script> |
| 234 | + <!-- jquery-ui down-revved because 1.10.3 has issues with dragging in scrolled pages --> |
194 | 235 | <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" type="text/javascript"></script> |
195 | 236 | <script src="js/jquery.pnotify.js" type="text/javascript"></script> |
196 | 237 | <script src="js/moment.min.js" type="text/javascript"></script> |
@@ -258,6 +299,28 @@ <h3>Resource Calendar</h3> |
258 | 299 | } |
259 | 300 |
|
260 | 301 |
|
| 302 | + // |
| 303 | + // This function is registered as "postcalrender", a callback to be executed |
| 304 | + // after every rerender of the calendars |
| 305 | + // |
| 306 | + // calendar_state gives access to the public state of the calendar |
| 307 | + // |
| 308 | + function adjust_calendar_width( calendar_state ) |
| 309 | + { |
| 310 | + // expand width of containers to accommodate pesky scrollbar |
| 311 | + // this is specific to the template used in the test system, but the techniques used |
| 312 | + // may be useful in similar templates where the calendar is scrollable |
| 313 | + var first_week = $('.rc_bodyweek').first(); |
| 314 | + var days = $(first_week).find('.rc_day_target'); |
| 315 | + var first = $(days).first(); |
| 316 | + var last = $(days).last(); |
| 317 | + var retries = 5; |
| 318 | + while( --retries && $(first).offset().top != $(last).offset().top ){ |
| 319 | + $('.rc_week').animate({width: "+=10px"},0); |
| 320 | + } |
| 321 | + } |
| 322 | + |
| 323 | + |
261 | 324 | // |
262 | 325 | // This function is needed as a callback when the user clicks on a new |
263 | 326 | // date using a datepicker dialog. The callback mechanism doesn't let |
|
0 commit comments